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);
	}
)





Discover More
Browser
Browser - Render blocking resources

All resources that are before the DomContentLoaded event are blocking the construction of the DOM. They are therefore known as render blocking resources They all have a render...
CSS - @import rule

Import permit to add an extern CSS file into a CSS file. The @import rule allows users to import style rules from other style sheets HTML link element This statement has a cost as it seems to make always...
CSS - Font

This page is font in CSS and html. From a web perspective, a font is considered to be a media resource and can be included in any page from any origin. the font-size is set on the body to be able...
CSS - Media Type (Screen, Paper, ) - Medium

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use: on a screen, sans-serif fonts when displayed when printed, and...
CSS - Style Sheet (Script|File) - Stylesheet

A stylesheet is a list of rules that specify the presentation of a source document. The stylesheet is a combination of : the external files with the suffix css defined via the HTML link element the...
CSS - Style declaration (Inline - (External|Internal) Style sheet)

There is three ways to specify CSS rules in HTML: External style sheet with the link element Internal style sheet with the style element Inline style or inline CSS with the style attribute ...
DOM - Document Loaded - onload event

The load event is an event that is fired / emitted on: an HTML element that fetch resources on the browser window when the page has finish loading. This event is a timing page load event To...
HTML - Canonical URL

URL A canonical url is a URL that has a canonical value identifier for a web page meaning that the value should be unique on the internet scope. This is the URL that people will see in: the search...
HTML - Head Element (Document Metadata)

The head is the element that contains the html metadata. The most known are: The title element (mandatory) - the title of the page The script element - to load script The link element - to load...
HTML - Hyper(Link) (href elements)

A link in HTML is an element that have the href attributes with an URL value An hyperlink is a contraction of hypertext link. link element The following elements are hyperlink because they have the...



Share this page:
Follow us:
Task Runner