link

link (resource link) elements allow a document to reference other resources, such as stylesheets, icons and images of different sizes.

Content category

  • Metadata
  • If allowed in the body (has an itemprop attribute or a rel attribute with only body-ok values: dns-prefetch, modulepreload, pingback, preconnect, prefetch, preload, prerender and stylesheet):

Pseudo-classes

N/A

Attributes

  • href sets the address of the resource.
  • crossorigin configures CORS behaviour.
  • rel specifies the nature of the relationship:
    • alternate has a meaning that changes based on other attributes:
      • When combined with stylesheet, indicates that the stylesheet is an alternate sheet. In this case, the title attribute is required.
      • If type="application/(?:atom|rss)+xml, references a syndication feed. All such links should follow this format.
      • In all other cases, it creates a link to an alternate representation of the current document:
        • When combined with the hreflang attribute, indicates that a translation is available.
        • When combined with the type attribute, indicates that a conversion of the document to a different format is available.
    • canonical sets the preferred URL for the document.
    • author references the other of the document.
    • help links to context-sensitive help.
    • icon references an icon to reference the document.
    • manifest links to the web application manifest.
    • modulepreload hints that the browser should pre-emptively fetch the specified module and keep it in the module map.
    • license references the document's license.
    • next and prev link to the next and previous documents in a series.
    • pingback specifies the URL of a pingback server to handle pingbacks to the document.
    • preload hints that the browser must pre-emptively fetch the resource specified in the href attribute, treating it as the type specified in the as attribute. This can help prevent resource fetches from blocking the rendering of the document.
    • search links to a resource that facilitates searching the document.
    • stylesheet imports a stylesheet.
    • Resource hints:
      • dns-prefetch hints that the browser should pre-emptively resolve the specified resource's origin.
      • preconnect hints that the browser should pre-emptively connect to the resource's origin.
      • prefetch hints that the browser should pre-emptively fetch and cache the resource.
      • prerender is similar to preload, except for navigation to another document. It hints that the browser should fetch the linked resource and any subresources.
  • media specifies which media the resource is relevant to, in the form of a media query list.
  • integrity specifies integrity metadata for SRI.
  • hreflang specifies the language of the linked resource as a BCP 47 language tag.
  • type advises the browser of the linked resource's MIME type.
  • referrerpolicy indicates how to set the Referer HTTP header:
    • no-referrer never sends it.
    • no-referrer-when-downgrade means the header won't be sent when downgrading from HTTPS.
    • origin sends just the of the resource (roughly the scheme, host and port).
    • origin-when-cross-origin will include the path only for resources on the same origin.
    • unsafe-url always includes the origin and path, and is unsafe because it may leak the origin and path to insecure origins.
  • If rel="preload" or rel="prefetch":
  • If rel references an icon (e.g. icon, or a non-standard variety):
    • sizes denotes the sizes of visual media in the resource:
      • any indicates the icon can scale to any size as it's a vector.
      • <pixel width>x<pixel height> indicates a specific size. Though not often used as most image formats store only a single image, it can be a space-separated list of sizes.
  • If rel="preload" and as="image":
    • imagesizes specifies the size of the image using media queries (like img's sizes attribute).
    • imagesrcset specifies a set of sources that are specific to different display pixel densities (like img's srcset attribute).
  • If rel="stylesheet":
    • disabled specifies that the stylesheet should not be loaded during page load and will be loaded on-demand if the attribute is later removed or changed to false.
    • title semantics are altered: it defines an alternate stylesheet, and the attribute value is its name.

References


Backlinks