revision:
The rel attribute specifies the relationship between the current document and the linked document and is only used if the "href" attribute is present. Search engines can use this attribute to get more information about a link!
Supported HTML tags: <a> and link elements, such as <area>, <link> and <form>.
Multiple relationships can be defined by separating values with a space.
<element rel="value"></element>
alternate: provides a link to an alternate representation of the document (i.e. print page, translated or mirror);
author: provides a link to the author of the document;
bookmark: permanent URL used for bookmarking;
external: indicates that the referenced document is not part of the same site as the current document;
help: provides a link to a help document;
license: provides a link to licensing information for the document;
next: provides a link to the next document in the series;
nofollow: links to an unendorsed document, like a paid link; ("nofollow" is used by Google, to specify that the Google search spider should not follow that link);
noopener: requires that any browsing context created by following the hyperlink must not have an opener browsing context;
noreferrer: makes the referrer unknown. No referer header will be included when the user clicks the hyperlink;
prev: the previous document in a selection;
search: links to a search tool for the document;
stylesheet: refers to an external style sheet for the document;
tag: a tag (keyword) for the current document.
alternate : alternate representations of the current document.
example
<!-- a persistent style sheet -->
<link rel="stylesheet" href="default.css" />
<!-- alternate style sheets -->
<link rel="alternate stylesheet" href="highcontrast.css"
title="High contrast" />
<link rel="alternate" type="application/atom+xml"
href="posts.xml" title="Blog" />
<link
rel="alternate" href="/fr/html/print" hreflang="fr"
type="text/html" media="print"
title="French HTML (for printing)" />
<link
rel="alternate" href="/fr/pdf"
hreflang="fr" type="application/pdf"
title="French PDF" />
author : author of the current document or article.
bookmark : permalink for the nearest ancestor section.
canonical : preferred URL for the current document.
dns-prefetch : tells the browser to preemptively perform DNS resolution for the target resource's origin.
external : the referenced document is not part of the same site as the current document.
expect : allows the page to be render-blocked until the essential parts of the document are parsed so it will render consistently.
help : link to context-sensitive help.
icon : an icon representing the current document.
example
<link rel="icon" href="favicon.ico" />
license : indicates that the main content of the current document is covered by the copyright license described by the referenced document.
example
<link rel="license" href="#license" />
manifest : web app manifest.
me : indicates that the current document represents the person who owns the linked content.
modulepreload : tells to browser to preemptively fetch the script and store it in the document's module map for later evaluation. Optionally, the module's dependencies can be fetched as well.
next : indicates that the current document is a part of a series and that the next document in the series is the referenced document.
nofollow : indicates that the current document's original author or publisher does not endorse the referenced document.
noopener : creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those, to begin with (i.e., has an appropriate target attribute value).
noreferrer : no referer header will be included. Additionally, has the same effect as noopener.
opener : creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has "_blank" as target attribute value).
pingback : gives the address of the pingback server that handles pingbacks to the current document.
preconnect : specifies that the user agent should preemptively connect to the target resource's origin.
prefetch : specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation.
preload : specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the "as" attribute (and the priority associated with the corresponding destination).
example
<head>
<meta charset="utf-8" />
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src="main.js" defer></script>
</body>
<head>
<meta charset="utf-8" />
<title>Web font example</title>
<link
rel="preload"
href="fonts/cicle_fina-webfont.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="fonts/zantroke-webfont.woff2"
as="font"
type="font/woff2"
crossorigin />
<link href="style.css" rel="stylesheet" />
</head>
<body>
…
</body>
<head>
<meta charset="utf-8" />
<title>Responsive preload example</title>
<link
rel="preload"
href="bg-image-narrow.png"
as="image"
media="(max-width: 600px)" />
<link
rel="preload"
href="bg-image-wide.png"
as="image"
media="(min-width: 601px)" />
<link rel="stylesheet" href="main.css" />
</head>
<body>
<header>
<h1>My site</h1>
</header>
<script>
const mediaQueryList = window.matchMedia("(max-width: 600px)");
const header = document.querySelector("header");
if (mediaQueryList.matches) {
header.style.backgroundImage = "url(bg-image-narrow.png)";
} else {
header.style.backgroundImage = "url(bg-image-wide.png)";
}
</script>
</body>
prerender : specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future.
prev : indicates that the current document is a part of a series and that the previous document in the series is the referenced document.
privacy-policy : gives a link to a information about the data collection and usage practices that apply to the current document.
search : gives a link to a resource that can be used to search through the current document and its related pages.
stylesheet : imports a style sheet.
tag : gives a tag (identified by the given address) that applies to the current document.
terms-of-service : link to the agreement, or terms of service, between the document's provider and users who wish to use the document.
<link rel='stylesheet' href='test.css' type='text/css'>
<p class="spec"><a rel='external' href='https://www.lwitters.com/index.php'>my website</a></p>
<p class="spec"><a rel="nofollow" href="http://www.functravel.com/">Cheap Flights</a></p>
Styled with CSS from the stylesheet.
<link rel="stylesheet" href="/tutorial/style.css">
<p class="spec aliceblue">Styled with CSS from the stylesheet.</p>