Module 3: Document Structure and Metadata
Linking Resources from the Head
Use link elements for stylesheets, icons, and document relationships.
The link element describes a relationship between the current document and another resource. It belongs in the document head in most common uses.
<head>
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="/styles/site.css">
<link rel="canonical" href="https://example.com/guides/html/">
</head>
A stylesheet link tells the browser where to fetch CSS. A favicon link identifies an icon associated with the page. A canonical link indicates the preferred URL for substantially duplicate or equivalent pages; it should point to a real, appropriate URL, not be copied blindly across unrelated pages.
The rel attribute names the relationship. Different values communicate different purposes, such as stylesheet, icon, canonical, alternate, preload, or preconnect. Each has specific requirements. Do not add resource hints simply because they sound faster: a hint to the wrong host or resource can waste a connection.
A root-relative path such as /styles/site.css starts at the site’s root. A relative path such as styles/site.css is resolved from the current document URL. Test paths from nested pages.