Linking to external resource dependencies
link

The link element specifies where the browser can find additional resources needed to properly render the document.
The most common use for link elements is to define external stylesheets.
Other uses include browser preload instructions and favicons.
Properties
- href
- Use sourceref syntax to define the external resource URL
- rel
icon
reference to the website's faviconstylesheet
reference to a CSS stylesheetprefetch
reference to a resource to be prefetched by the browserpreload
reference to a resource to be preloaded by the browser- as
- Identifies the base MIME-type of a preload resource
audio, document, embed, fetch, font, image, object, script, style, track, worker, video
- crossorigin
- Added to preload resources from a different domain
- media
- CSS
@media
rule to apply to the stylesheet, for exampleprint
orscreen
or(max-width: 600px)
Example
html {
head {
link `favicon.ico` *rel=icon
link `/css/tangled-web-services.css` *rel=styleheet *media=print
link `/css/thorny-divide.css` *rel=styleheet *media=screen
link `/fonts/source-serif-pro.woff2` *rel=preload *as=font *crossorigin
}
}
Complement
- style
- The style element is used to declare CSS rules that will be applied to the document.
Ancestor
- head
- The head element comprises subordinate elements for the purpose of describing the document, its context, and its dependencies.