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	<link rel="archives" href="http://www.ooxx.com/2012/07">
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 <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/ 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	<link rel="stylesheet" href="base.css">
home	Connect to the home page of the site	<link href="http://www.ooxx.com" rel="home">
first	Link to the first document in the collection	<link rel="first" href="index.html">
	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!