HTML - The link element (inter-document relationships)

About

The link 1) 2) represents metadata that expresses inter-document relationships.

It's not an hyperlink

Syntax

The link element can be used only within the head element.

<head>
<link 
    rel="stylesheet" 
    media="screen,projection" 
    href="css/common.min.css" 
    integrity="sha384-ZYfZnVukOuh/gRpU9uN+T9XwwRFJ9Y+0Ylk3zKvI184omb/HoOtQ0F8Iol7Nix7q">
....
</head>

where:

You can also add a css file through the CSS Import rule

Rel

The value of the rel attribute define the type of document (ie the type of relation, ie the type of resource).

Stylesheet

The stylesheet value loads a style sheet 3)

  • Sync version:
<link href="style.css" rel="stylesheet">
<!-- In the header -->
<link href="style.css" rel="preload" as="style">

<!-- Where you want to use the stylesheet (it can be at the bottom of the body) -->
<link href="style.css" rel="stylesheet" >

Canonical

A canonical value should be the unique identifier of a document for this entire life. See HTML - Canonical URL

<link rel="canonical" href="https://gerardnico.com/cat/post1" />

Preload

preload permits to preload a resource that will be used later. How to preload HTML resource (Javascript, StyleSheet)

Example with a video:

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">

Pingback

pingback permits to advertise the pingback endpoint.

<link rel="pingback" href="https://websiteA.com/xmlrpc">

Example with one or more stylesheet

const head = document.querySelector('head');
const stylesheets = [
	["https://cdnjs.cloudflare.com/ajax/plugins/toolbar/prism-toolbar.css","sha256-kK4/JIYJUKI4Zdg9ZQ7FYyRIqeWPfYKi5QZHO2n/lJI="],
	["https://cdn.example.com/stylesheet","integrityHash"],
];

stylesheets.forEach(stylesheet => {
		let link = document.createElement('link');
		link.rel="stylesheet"
		link.href=stylesheet[0];
		link.integrity=stylesheet[1];
		link.crossOrigin="anonymous";
		head.append(link);
	}
)

Powered by ComboStrap