Menu
Document Structure & Metadata
<link> Tag
Connect external CSS, favicons, fonts, and canonical URLs.
1Common Uses
The <link> tag (a void element) connects the document to external resources. It is most often used for stylesheets and favicons.
Example Code
css
<link rel="stylesheet" href="/styles.css" />
<link rel="icon" href="/favicon.ico" />
<link rel="canonical" href="https://example.com/page" />
<link rel="preconnect" href="https://fonts.googleapis.com" />2Put the element in context
A link element in the head establishes a relationship to another resource, such as a stylesheet. It is different from an anchor that a visitor activates. A broken stylesheet URL can leave a page with unstyled content, so inspect both the relationship and the resource response.
3Practice with a small page
Create a separate CSS file and reference it with rel="stylesheet". Change one rule and verify that the page updates. Temporarily use a missing file path and inspect the network panel, then restore the correct resource.
Finished reading?
Mark this topic as complete to track progress.