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 modify the default encoding of mysql in Linux

During the development process, if garbled charac...

How to start a Vue.js project

Table of contents 1. Node.js and Vue 2. Run the f...

Creative opening effect achieved by combining CSS 3.0 with video

Let me share with you a creative opening realized...

How to build Nginx image server with Docker

Preface In general development, images are upload...

MySQL 5.7.11 zip installation and configuration method graphic tutorial

1. Download the MySQL 5.7.11 zip installation pac...

A must-read career plan for web design practitioners

Original article, please indicate the author and ...

Teach you how to use MySQL8 recursive method

I have previously written an article about recurs...

How to install and persist the postgresql database in docker

Skip the Docker installation steps 1. Pull the po...

40 web page designs with super large fonts

Today's web designs tend to display very larg...

Analysis of the principles of Mysql dirty page flush and shrinking table space

mysql dirty pages Due to the WAL mechanism, when ...

Simple example of HTML text formatting (detailed explanation)

1. Text formatting: This example demonstrates how...

Native JS to implement sharing sidebar

This article shares a sharing sidebar implemented...

UDP connection object principle analysis and usage examples

I wrote a simple UDP server and client example be...