Table of Contents
URL: https://www.progressiverobot.com/html-rel-attribute-link-tags/
Introduction
The rel attribute inside link tags (<link>) describes the relation of a linked resource. rel can take one of these 16 values. Let's examine them all.
Prerequisites
- A general knowledge of HTML5. For a comprehensive review of the HTML5 markup language, explore our series, How To Build a Website in HTML.
Using the <rel> Attribute for Link Tags
Here are the 16 values that the rel attribute can accept inside <link> tags:
alternate: Alternate version of the document.
author: Author of the document.
dns-prefetch: The DNS lookup and handshake should be prefetched for the linked resource.
help: A resource for help on about the whole document.
icon: An icon resource.
license: License and legal information.
manifest: Web App Manifest document.
next: Next document in the series.
pingback: External resource called for pingbacks in the comments.
preconnect: The connection should be opened in advance.
prefetch: The resource should be prefetched.
preload: The resource should be preloaded.
prerender: The resource should be prerendered.
prev: Previous document in the series.
search: A document meant to perform a search in the current document.
stylesheet: The most commonly used value. Linking to an external stylesheet.
Note that dns-prefetch, preconnect, prefetch, preload, and prerender are simply hints to the browser and are currently experimental. They are not supported in all browsers, and you can refer to the Can I Use? page for more information about browser support. Here's also a summary about the difference between the different behaviors for these resource hints.
Here's a typical scenario where we'll see the rel tag in use:
<link rel='stylesheet' href='style.css' type='text/css'>
stylesheet is the most commonly used value.
Conclusion
The rel attribute inside <link> tags is an important feature of HTML. You can check out our related tutorial on the rel attribute inside <anchor> tags.
Or, for a more comprehensive review of the HTML5 markup language, explore our series, How To Build a Website in HTML.