Analysis of rel attribute in HTML_HTML/Xhtml_Web page production-HTML Tutorial-php.cn

Analysis of rel attribute in HTML_HTML/Xhtml_Web page production

WBOY

Release： 2016-05-16 16:36:28

Original

1410 people have browsed it

I found out that some classmates reposted and collected this article on Weibo, so I went back and reviewed this casually translated article, and later found that w3cschools.com.cn already had a Chinese comparison Translation, so here I will continue to improve this article and make it more valuable. The initial 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 text emphasizes I want to list the usage scenarios of these attribute values, and 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>注:</strong>浏览器渲染时会忽略此属性,然而搜索引擎可以从它获得更多的信息(a标签仅在href属性存在时有效)。

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 at the bottom

Value	Description	Scenario\|Example
appendix	Link to appendix page of document
alternate	Link to an alternative source (e.g. printed page, translation, mirror)	Configure the atom and feed of the website in the head tag
shortcut icon	Shortcut icon	Specify small icons in the 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 document author in the head tag
canonical	Authority, model	Let search engines know which page among the duplicate or similar web pages in the current website is what 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 Citation URL: http://www.xxoo.com/xhtml/rel_canonical/ Canonical can be understood as an auxiliary function of 301 permanent redirect from a functional point of view canonical can be used with relative or absolute links, but absolute links are recommended 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 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 next document in 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 context for the current document
search	Search tool linked to documentation
sidebar	Link to a document that should appear in the browser sidebar
contents	Link to the content table of contents of the current document	Generally placed in the sidebar of the main content of the document to facilitate jumping between topics on the current page
index	Link to index of current document
glossary	Link to current document glossary
copyright	Link to the copyright or privacy page of the current document	Copyright at the bottom of the website
chapter	Link to a chapter from the current document
section	Link to a subsection in the documentation list
subsection	Link to a subsection in 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 table of contents
parent	Link to documentation above source
child	Link to documentation below source
help	Link to help documentation	`<link rel="help" href="http://www.xxoo.net/help.html" />`
bookmark	Permanent URL to use as bookmark	List title
external	Link to external documentation	External links cited in the article
nofollow	Links to unapproved documents, such as paid links Google uses "nofollow" to instruct its search spiders not to follow the link	Related articles on the site, random articles on the site, comment replies, comments, browse and author links in the list and article pages, comment addresses in the sidebar, "Home" link in the homepage navigation, articles with the most comments, articles with the most visits
noreferrer	Specifies that the browser should not send the HTTP referer header when the user follows the hyperlink
license	Link to the document’s copyright information
tag	Current document tag (keyword)	Tag cloud in sidebar, tags in articles, tags in list, tags on tag page
friend	Sponsorship	Friendly links, themes by