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 favicon
stylesheet reference to a CSS stylesheet
prefetch reference to a resource to be prefetched by the browser
preload 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 example print or screen 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
}
}
The link element

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.

semantax > styling > linkLinking to external resource dependencies

🔎