Re attribute analysis in HTML

Time:2019-9-28

Since I found that some of my classmates were broadcasting and collecting this article on Weibo, I looked back at this random translation article and found that the Chinese translation of w3cschools.com.cn had been contrasted, so I will continue to improve this article here to make it more valuable. When I first thought of translating this document from http://vanessa.b3log.org/research-a-rel-value, I found that rel attributes have a lot of unusual semantic values. The original text focuses on listing the use scenarios of these attributes, and I think it is necessary to understand rel attributes in this way.

Example

Connections with rel attributes:

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

Browser support

Re attributes are supported in all mainstream browsers

 

Note: Browser rendering ignores this attribute, but search engines can get more information from it (a tag is only valid when href attribute exists).

Definition and use

The rel attribute specifies the relationship between the current document and the connected 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。

Attribute 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 pages, translations and mirrors) Configure the atom, feed of the website in the head tag    
shortcut icon Shortcut Icon Specify Title Bar, Address Bar, Collection Bar icons    
archives Link to document set or historical data <link rel='archives' href='http://www.ooxx.com/2012/07' />    
author Author Linked to Document Declare the author of the document in the head tag    
canonical Authority, Model

Let search engines know which pages in the current duplicate or similar webpages are the ones that webmasters want to crawl and include.

<link rel="canonical" href="http://xxoo.com/" />

  • Canonical attribute values usually appear in the rel attribute
  • Reference Web Site: http://www.xxoo.com/xhtml/rel_canonical/
  • Functionally, canonical can be understood as an auxiliary function of 301 permanent redirection
  • Canonical can be used with relative or absolute links, but absolute links are recommended.
  • Google defines canonical as the preferred version of a highly similar set of pages
  • Canonical: Meaning of “Model” in Chinese
   
stylesheet Outline style sheets for documents <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">    
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 links to a document. This document provides context for the current document      
search Search Tools Linking to Documents      
sidebar Link to documents that should be displayed in the browser sidebar      
contents Link to the content directory of the current document Usually placed in the sidebar of the main content of the document, it is convenient to jump between the topics of the current page.    
index Index linked to the current document      
glossary Link to the current document Glossary      
copyright Link to the copyright or privacy page of the current document Copyright at the bottom of the website    
chapter Link from the current document to a chapter      
section Link to a section in the document list      
subsection Link to a subsection of the current document list. (A section can have more than one sub-section.)      
head Top-level documents linked to collections      
toc Directories linked to collections      
parent Documents linked to the source      
child Link to the document below the source      
help Link to Help Document <link rel="help" href="http://www.xxoo.net/help.html" />    
bookmark Permanent URL for bookmarks List title    
external Link to external documents External connections referred to in the article    
nofollow Link to unauthorized documents, such as paid links
Google uses “nofollow” to specify that its search spider does not track the link.
Relevant articles on the site, random articles on the site, comments and replies, comments, browsing and author links in lists and articles pages, comment address in sidebar, home page navigation “home page” link, comment on the most articles, visit the most articles    
noreferrer Provides that browsers should not send HTTP referer headers when users follow the hyperlink      
license Copyright information linked to documents      
tag Current document tags (keywords) Label cloud in sidebar, label in article, label in list, label on Label Page    
friend Sponsor Friendship links, bottom themes by    

 

Because of my limited level, inevitably there are some mistakes. If the officials feel that there are inappropriate or need to be supplemented, please leave a message to point out, thank you!

Reference resources

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

The rel-author tag I have to mention

HTML rel canonical attribute value

The Meaning of Link Label Re Attribute

About rel= “canonical” (google webmaster tool)