Analysis of rel attribute in HTML

Analysis of rel attribute in HTML

Since I found that some classmates reposted and collected this article on Weibo, I went back to review this casually translated article. Later, I found that w3cschools.com.cn already has a corresponding Chinese translation, so I will continue to improve this article here to make it more valuable. The idea of ​​translating this document first came from the article http://vanessa.b3log.org/research-a-rel-value. I found that the rel attribute has many uncommon semantic values. The original article focused on listing the usage scenarios of these attribute values. I felt it was very necessary to understand the rel attribute in this way.

Example

Links with the rel attribute:

<a rel="external" href="http://www.xxoo.com/">ooxx</a>

Browser support

The rel attribute is supported by all major browsers.

注:瀏覽器渲染時會忽略此屬性,然而搜索引擎可以從它獲得更多的信息(a標簽僅在href屬性存在時有效)。

Definition and Use

The rel attribute specifies the relationship between the current document and the linked document.

grammar

<a rel="value">

Differences between HTML 4.01 and HTML 5

Deleted values: appendix, chapter, contents, copyright, glossary, index , section, start, subsection.

New values: archives, author, bookmark, external, first, index , last, license, nofollow, noreferrer, search, sidebar, tag,up.

Property Value
value describe Scenario | Example HTML4.01 HTML5
appendix Link to the appendix page of the document
alternate Link to an alternative source (e.g. print page, translation, mirror) Configure the website's atom and feed in the head tag
shortcut icon Shortcut icon Specify small icons for title bar, address bar, and favorites bar
archives Link to document set or historical data <link rel='archives' href='http://www.ooxx.com/2012/07' />
author Link to the author of the document Declare the author of the document in the head tag
canonical Authority, Model

Let the search engine know which page among the duplicate or similar web pages on the current website is the one the webmaster wants it to crawl and include

<link rel="canonical" href="http://xxoo.com/" />
  • The canonical attribute value usually appears in the rel attribute.
  • Reference URL: http://www.xxoo.com/xhtml/rel_canonical/
  • From a functional point of view, canonical can be understood as an auxiliary function of 301 permanent redirection.
  • Canonical can be used with either relative or absolute links, but absolute links are recommended.
  • Google defines canonical as follows: A canonical page is the preferred version of a set of pages with highly similar content.
  • canonical: Chinese meaning of "model"
stylesheet The document's external style sheet <link rel="stylesheet" href="base.css">
home Link to the site's home page <link href="http://www.ooxx.com" rel="home" />
first Link to the first document in the collection <link rel="first" href="index.html">
start Link to the first page of the current document <link rel="start" href="about:blank">
next Link to the next document in the collection <link rel="next" href="about:blank">
prev Link to the previous document in the collection <link rel="chapter" href="about:blank">
last Link to the last document in the collection <link rel="last" href="index.html">
up Provides a link to a document. This document provides the context of the current document.
search Link to the documentation search tool
sidebar Link to the document that should be displayed in the browser sidebar
contents Link to the table of contents of the current document Usually placed in the sidebar of the main document content, convenient for jumping between topics on the current page
index Link to the index of the current document
glossary Link to current document glossary
copyright Link to the copyright or privacy page for the current document Copyright at the bottom of the website
Chapter Link to a section from the current document
section Link to a section in the documentation list
subsection Links to a subsection of the current document list. (A section can have multiple subsections.)
head Link to the top-level document in the collection
toc Link to the collection's directory
parent Link to source document above
child Link to source document below
help Link to help documentation <link rel="help" href="http://www.xxoo.net/help.html" />
bookmark Permanent URL for bookmarking List Title
external Links to external documents External links cited in the article
nofollow Linking to unauthorized documents, such as paid links
Google uses "nofollow" to specify that its search spiders do not follow the link
Related articles on the site, random articles on the site, comment replies, comments, browse and author links in lists and article pages, comment addresses in the sidebar, "Home" link in the homepage navigation, most commented articles, most visited articles
noreferrer Specifies that when a user follows this hyperlink, the browser should not send an HTTP referer header
license Link to the copyright information of the document
tag Current document tags (keywords) Tag cloud in the sidebar, tags in articles, tags in lists, tags on tag pages
friend sponsor Friendly links, themes by at the bottom

由于本人水平有限,難免存在一些錯誤,看官們如果覺得有不妥或者需要補充的地方,請留言指出,謝謝!

refer to

http://www.w3schools.com/TAGS/att_a_rel.asp

http://vanessa.b3log.org/research-a-rel-value

http://www.w3school.com.cn/htmldom/prop_anchor_rel.asp

I have to mention the rel-author tag

HTML rel canonical attribute value

The meaning of the link tag rel attribute

About rel="canonical" (Google Webmaster Tools)

<<:  A Brief Analysis of MySQL Connections and Collections

>>:  Nginx memory pool source code analysis

Recommend

How to configure mysql5.6 to support IPV6 connection in Linux environment

Introduction: This article mainly introduces how ...

Steps for Vue to use Ref to get components across levels

Vue uses Ref to get component instances across le...

Detailed explanation of the basic use of Apache POI

Table of contents Basic Introduction Getting Star...

How to avoid data loop conflicts when MySQL is configured with dual masters

I wonder if you have ever thought about this ques...

Detailed explanation of common operations of Docker images and containers

Image Accelerator Sometimes it is difficult to pu...

Nginx operation and maintenance domain name verification method example

When configuring the interface domain name, each ...

Example code for css3 to achieve scroll bar beautification effect

The specific code is as follows: /*Scroll bar wid...

How to use cutecom for serial communication in Ubuntu virtual machine

Using cutecom for serial communication in Ubuntu ...

Solve the problem of blocking positioning DDL in MySQL 5.7

In the previous article "MySQL table structu...

Chinese and English font name comparison table (including Founder and Arphic)

In CSS files, we often see some font names become...

Detailed explanation of XML syntax

1. Documentation Rules 1. Case sensitive. 2. The a...

Element-ui directly clicks on the cell in the table to edit

Table of contents Achieve results Implementation ...