The rel attribute inside link tags (<link>) describes the relation to the resource being linked to. It can take one of these 16 values:
- 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 the typical scenario where we see rel being used:
<link rel='stylesheet' href='style.css' type='text/css'>— Sorry to interrupt this program! 📺
Are you interested in learning Vue.js? If so, I highly recommend you try The Vue.js Master Class course by Vue School. Learning from a premium resource like that is a serious investment in yourself.
Plus, this is an affiliate link, so if you purchase the course you help Alligator.io continue to exist at the same time! 🙏