The <link> Element
As defined in the HTML Living Standard, the <link> element allows authors to connect their document to other resources. It is most commonly used to link to CSS stylesheets, but it also handles site icons, preloading assets, and defining relationships between documents.
<link rel="icon" href="favicon.ico">
<link rel="alternate" hreflang="es" href="/es/">
The <link> is a void element and must be placed within the <head> of the document.
Accessibility: Internationalization (i18n)
One of the most important accessibility uses for the <link> tag is providing alternative language versions of a page.
WCAG Requirement: Language of Page
Success Criterion 3.1.1 (Level A): The default human language of each Web page can be programmatically determined.
Using <link rel="alternate" hreflang="xx"> programmatically identifies equivalent content in other languages. This allows search engines and specialized browser tools to automatically direct users to the version of the site that matches their language preference, ensuring the content is perceivable and understandable.
Standard Attributes
rel: Defines the relationship between the document and the resource. (e.g.,stylesheet,icon,preload,author).href: The URL of the resource.media: Specifies which media the resource is for (e.g.,media="print"for a print-only stylesheet).sizes: Used withrel="icon"to define different resolutions for different devices (like Apple Touch icons).
<!-- Preloading a critical font for better performance -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Security & Integrity
When linking to external resources on a CDN, you should use **Subresource Integrity (SRI)** to ensure the file hasn't been tampered with.
<link rel="stylesheet"
href="https://cdn.example.com/style.css"
xintegrity="sha384-..."
crossorigin="anonymous">
A11y Tip: Responsive Styles
Use the media attribute to load styles only when they are needed. For example, <link rel="stylesheet" href="print.css" media="print"> helps ensure that users who need a printed copy of your content receive a version optimized for that medium, satisfying WCAG SC 1.4.4 (Resize Text) contexts.