Analysis of the rel attribute in HTML

This article mainly introduces the analysis of the rel attribute in HTML. Friends who need it can refer to it.

Since I found that some students retweeted and collected this article on Weibo, I will go back and review this article. I later found out that w3cschools.com.cn already had a comparable Chinese translation of the article on sex translation, so I will continue to improve this article to make it more valuable. The original idea of ​​translating this document 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 these attribute values. For usage scenarios, I feel it is very necessary to understand the rel attribute in this way.

Example

Connection with rel attribute:

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

Browser support

The rel attribute is supported in all major browsers

<strong>Note: </strong>The browser will ignore this attribute when rendering, however search engines can use it from Get more information (the a tag is only valid when the href attribute exists).

Definition and use

The rel attribute specifies the relationship between the current document and the connected document

Syntax

<a rel="value">

HTML 4.01 and HTML 5 Differences between

Removed 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.

Attribute value

##startLinks to the first page of the current document PagenextLink to the next document in the collectionprevLink to the previous document in the collectionlastLink to collection The last document in upProvides a link to a document. This document provides context for the current document search Search linked to the document ToolssidebarLink to a document that should be displayed in the browser sidebarcontentsLink to the content directory of the current documentGeneral Place it in the sidebar of the main content of the document to facilitate jumping between topics on the current pageindex Link to the index of the current document glossaryLink to the current document glossarycopyrightLink to the copyright or privacy page of the current documentWebsite bottom copyrightchapterLink to a chapter from the current documentsectionLink to a section in the document listsubsectionLinks to a subsection in the current document list. (A section can have multiple subsections.) headLink to collection Top-level document in tocLink to the table of contents of the collectionparentLink to the document above the sourcechildLink to the document below the sourcehelpLink to help documentbookmarkThe permanent URL used as a bookmark List titleexternalLink to external documentArticle External links cited in nofollow link to unapproved documents, such as paid links

Value	Description	Scenario|Example	HTML4.01	HTML5
appendix	Link to the appendix page of the document
alternate	Link to an alternative source (for example: printed page, translation and mirror)	Configure the website's atom, feed in the head tag
shortcut icon	Shortcut small icon	Specify title bar, address bar, collection Bar icon
archives	Link to document set or historical data	cda1f31d62fbe9bd603ad6ca981b8403
author	Link to the author of the document	State the document author in the head tag
canonical	Authority, model	Let the search engine know which page among the duplicate or similar web pages in the current website is the page that the webmaster wants it to crawl and include of 70ee7983a177cb58cc7f838dbb15d0f9 The canonical attribute value usually appears in the rel attribute Reference URL: http://www.xxoo.com/xhtml/rel_canonical/ canonical Functionally speaking, it can be understood as the auxiliary function of 301 permanent redirection canonical can be used with relative links or absolute links, but It is recommended to use absolute links Google’s definition of canonical is: a canonical web page is the preferred version of a group of web pages with highly similar content canonical: The meaning of "model" in Chinese
stylesheet	Document’s external style sheet	fe6520792c95425234690bc98239a72d
home	Connect to the home page of the site	3e653cd5e9abf105ed8c8ddab9126aec
first	Link to the first document in the collection	3cdca41d2442e89b157eeeb69369c849
		f6632d99a88ae7516848c1575ee711c1
		975c6ea00cb71293e39ea0ab2ea3b36a
		caf2f714962814b33884df9e600713ca
		d2e3c0ba27b15160da30b3b508fda7c9
		de2b97a81227c8aad5bee9e9691e74e7
	Google uses "nofollow" to stipulate that its search spiders will not follow the link	Related articles on the site, random articles on the site, comment replies, comments, views and author links in lists and article pages, and comment addresses in the sidebar , the "Home" link in the home page navigation, the articles with the most comments and the most visited articles
noreferrer	stipulates when When the user follows the hyperlink, the browser should not send the HTTP referer header
license	Copyright information linked to the document
tag	Current document tag (key Words)	Tag cloud in the sidebar, tags in the article, tags in the list, tags on the tag page
friend	Sponsorship	Friendly links, themes at the bottom by

Due to my limited level, it is inevitable that there will be some mistakes. If the readers feel that there is anything wrong or need to add something, please leave a message and point it out. Thank you!

The above is the entire content of this article. I hope it will help everyone learn from it. Helpful, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

How to remove the blank space of Inline-Block in HTML

The role of meta in the html page and Parsing of page caching and non-caching settings

The above is the detailed content of Analysis of the rel attribute in HTML. For more information, please follow other related articles on the PHP Chinese website!