metadata
<link>
Defines a relationship between the current document and an external resource — stylesheets, icons, preloads, RSS feeds, canonical URLs, and manifest files. Lives inside <head>.
<link rel="stylesheet" href="/styles.css">Common attributes
| Attribute | Purpose |
|---|---|
| rel | Relationship: stylesheet, icon, canonical, preload, alternate, manifest |
| href | URL of the linked resource |
| type | MIME type of the resource |
| media | Media query the resource applies to |
| as | Resource type for rel=preload (script, style, font, image) |
| crossorigin | anonymous | use-credentials for CORS |
| sizes | Icon sizes for rel=icon |
| hreflang | Language for rel=alternate |
Examples
<link rel="stylesheet" href="/main.css">Load a CSS file
<link rel="icon" href="/favicon.svg" type="image/svg+xml">SVG favicon
<link rel="canonical" href="https://utilko.com/html/input/">Canonical URL for SEO
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin>Preload a font to cut LCP
Gotcha
is a void element — no closing tag. Preload without a matching as value is ignored by browsers and wastes bandwidth.
Related tags
<meta>
Provides metadata about the document that other tags cannot express — charset, viewport, description, robots directives, and Open Graph tags. Placed only inside <head>.
<title>
The document's title, shown in the browser tab, bookmarks, and search-engine result snippets. It is required in every valid HTML document.
<a>
The anchor element creates a hyperlink to another page, a file, an in-page anchor, an email, or a phone number. It is the fundamental building block of the web's link graph and a key SEO signal.