link: The External Resource Link element

The <link> HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both “favicon” style icons and mobile home screen/app icons) among other things.

Attributes

Specific attributes

Required attributes

href="[URL]" specifies the URL of the linked resource.

rel="[relationship]" specifies the relationship between the current document and the linked resource. Common values include:

stylesheet: Links to a CSS stylesheet
icon: Links to an icon for the page
alternate: Links to alternate versions (RSS feeds, different languages)
canonical: Links to the canonical version of the page
preconnect: Establishes early connections to external domains

Allowed attributes

hreflang="[language code]" indicates the language of the linked resource.

media="[media query]" specifies the media/device the linked resource is optimized for.

sizes="[size specification]" specifies icon sizes (when rel=“icon”).

type="[MIME type]" specifies the media type of the linked resource.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<head>
  <link rel="stylesheet" href="/css/main.css" type="text/css">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="alternate" href="/rss.xml" type="application/rss+xml" title="Blog RSS Feed">
  <link rel="canonical" href="https://example.com/blog/post-title">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="/css/print.css" type="text/css" media="print">
</head>