<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
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 :
charset="charset list from RFC 2045"
dir="ltr | rtl"
id="unique alphanumeric identifier"
media="all | aural | braille | print | projection | screen | other"
target="frame name" (transitional only)
The above listed attributes cover most of the popular attributes, however I’ve highlighted the most commonly used ones.
The rel attribute in HTML
<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|
|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 |
|This rel value can be used to reference a document which would serve as an “appendix” for the document or the site.|
|The reference to the archived documents.|
|A reference to the document or page with information about the current document’s “author”.|
|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/|
|Reference to the document that is a “chapter” in a site or collection of documents.|
|This link would add a reference to a document that serves as a table of contents.|
|A reference to a page that contains the copyright statement for the current document is added with the usage of this rel value.|
|A reference to the first document in a collection is added.|
|A reference to the document that provides a glossary of terms for the current document.|
|A reference to the help document for the current site or document.|
|A reference to an icon to represent the current page or document, for example a favicon. |
|A reference to a document that provides an index for the current document.|
|A reference to the last document in a collection is added.|
|A reference to the legal document or copyright information for the current document.|
|A reference to the next document in a collection of documents. Some browsers might help prefetch the next page.|
|A reference to the URL to ping when the current document is loaded.|
|Provides an indication to the browser about objects to be preloaded during the idle time.|
|A reference to the previous document in a collection of documents.|
|A reference to the search facility used in the site.|
|A reference to the document that is a section in a site or in a collection of documents.|
|Specifies a URL that should be displayed in a browser sidebar.|
|A reference to the first document or the starting page in a set of documents.|
|A reference to the external stylesheet. This is one of the most common usage of link tag.|
|A reference to the document that is a subsection in a collection of documents.|
|Gives a tag that applies to the document.|
|A reference to the document or section up from the current document, usually a parent document for the current URL.|
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.