The <link> tag is one of the most primary tags that a lot of us must have been using. This tag is usually found in the <head> section and plays the role of specifying the relationship between the current document and other documents. The most common use of this tag is to link the document or webpage to a style sheet.
A large number of us would have used the <link> tag to just specify the style sheet for the webpage and nothing more. However, we can use the <link> tag to specify more than 25 other relationships too between the webpage and other documents. Let’s take a look at them.
HTML5 link Tag
All of us would have definitely used the <link> tag to link a style sheet to the webpage and must be aware about some of the existing attributes of the tag like href , type etc. However there are many more attributes that you can use with the <link> tag. The link tag has been around even before HTML5 however there are certain new attributes and values that were introduced in HTML5.
Let’s take a look at the syntax of <link> tag :
<link
charset="charset list from RFC 2045"
class="class name(s)"
dir="ltr | rtl"
href="URL"
hreflang="language code"
id="unique alphanumeric identifier"
lang="language code"
media="all | aural | braille | print | projection | screen | other"
rel="relationship value"
rev="relationship value"
style="style information"
target="frame name" (transitional only)
title="advisory information"
type="MIME Type"
>The above listed attributes cover most of the popular attributes, however I’ve highlighted the most commonly used ones.
The rel attribute in HTML
The <link> attribute in HTML is used to name the relationship between the linked document and the current document. For example, the css file can be linked with the webpage as a “stylesheet“. The rel attribute allows you to specify multiple values separated by spaces. Generally these values are not case sensitive. Let us take a look at the different possible values.
HTML rel attribute values
| Relationship Value or Values for the “rel” attribute | Description | Example |
|---|---|---|
alternate |
The link references an ‘alternate’ version of the document/page that the link is in. For e.g This could be the translated version of the document as mentioned or referenced by the lang attribute. |
<link href="spanish-welcome.html" rel="alternate" lang="es">
|
appendix |
This rel value can be used to reference a document which would serve as an “appendix” for the document or the site. | <link href="appendix.html" rel="appendix"> |
archives |
The reference to the archived documents. | <link href="archives.html" rel="archives"> |
author |
A reference to the document or page with information about the current document’s “author”. | <link href="moreonfew-author.html" rel="author"> |
canonical |
Reference to the preferred URL of the page, suggesting search engines that the URL mentioned in the href is same as the current page, basically to avoid duplicate content. E.g if the current page is www.site.com/search/?q=products you might want to point the search engines to the actual URL www.site.com/products/ | <link href="www.site.com/products/" rel="canonical"> |
chapter |
Reference to the document that is a “chapter” in a site or collection of documents. | <link href="chapter01.html" rel="chapter"> |
contents |
This link would add a reference to a document that serves as a table of contents. | <link href="table-of-contents.html" rel="contents"> |
copyright |
A reference to a page that contains the copyright statement for the current document is added with the usage of this rel value. | <link href="copyright.html" rel="copyright"> |
first |
A reference to the first document in a collection is added. | <link href="page-1.html" rel="first"> |
glossary |
A reference to the document that provides a glossary of terms for the current document. | <link href="glossary.html" rel="glossary"> |
help |
A reference to the help document for the current site or document. | <link href="help.html" rel="help"> |
icon OR shortcut icon |
A reference to an icon to represent the current page or document, for example a favicon. Sizes attribute can also be used along with this. |
<link href="favicon.png" rel="icon"> <link href="favicon.png" rel="shortcut icon"> |
index |
A reference to a document that provides an index for the current document. | <link href="page-index.html" rel="index"> |
last |
A reference to the last document in a collection is added. | <link href="page-10.html" rel="last"> |
license |
A reference to the legal document or copyright information for the current document. | <link href="legal.html" rel="license"> |
next |
A reference to the next document in a collection of documents. Some browsers might help prefetch the next page. | <link href="page-02.html" rel="next"> |
pingback |
A reference to the URL to ping when the current document is loaded. | <link href="https://www.moreonfew.com/ping.php" rel="pingback"> |
prefetch |
Provides an indication to the browser about objects to be preloaded during the idle time. | <link href="some-big-img.png" rel="prefetch"> |
prev |
A reference to the previous document in a collection of documents. | <link href="page-intro.html" rel="prev"> |
search |
A reference to the search facility used in the site. | <link href="search.php" rel="search"> |
section |
A reference to the document that is a section in a site or in a collection of documents. | <link href="section-05.html" rel="section"> |
sidebar |
Specifies a URL that should be displayed in a browser sidebar. | <link href="chapters.html" rel="sidebar"> |
start |
A reference to the first document or the starting page in a set of documents. | <link href="intro.html" rel="start"> |
stylesheet |
A reference to the external stylesheet. This is one of the most common usage of link tag. | <link href="main.css" rel="stylesheet"> |
subsection |
A reference to the document that is a subsection in a collection of documents. | <link href="section-05a.html" rel="subsection"> |
tag |
Gives a tag that applies to the document. | <link href="extratag.html" rel="tag"> |
up |
A reference to the document or section up from the current document, usually a parent document for the current URL. | <link href="/main/parent.html" rel="up"> |
It might not be easy to remember all the possible values, however its always good to be aware about the existence of these different types of rel attribute values. Also please note that not all the browsers might support all the different values. Moreover the way the browsers render these might also differ in certain cases, like the Opera browser might show special buttons for certain rel types and other browsers might not. Well, I would really encourage you to go ahead and try out the above listed different rel attribute values and do share your experience with us.