The link 1) 2) represents metadata that expresses inter-document relationships.
It's not an hyperlink
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
The value of the rel attribute define the type of document (ie the type of relation, ie the type of resource).
The stylesheet value loads a style sheet 3)
<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" >
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 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 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);
}
)