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.