HTML reference

link

The <link> element describes a relationship between the current document and an external resource. It belongs in the document's <head> and does not display page content by itself.

What you will learn

  • How link describes external relationships
  • What rel, href, and as do
  • How stylesheets, canonical URLs, icons, and alternate pages differ

Common examples

<link rel="stylesheet" href="/styles.css">
<link rel="icon" href="/favicon.ico">
<link rel="canonical" href="https://example.com/page">
<link rel="alternate" hreflang="ja" href="/ja/page">

The important attribute is rel

rel="stylesheet"
Associates a CSS stylesheet with the document.
rel="canonical"
Declares the preferred URL for equivalent pages. Use it only when the URL is correct.
rel="alternate"
Describes an alternate representation, such as another language.
rel="preload"
Requests an important resource early. Use the correct as value and avoid preloading things the page does not need.

Be precise

A wrong relationship or URL can confuse browsers and search services. Keep linked resources available, use integrity and cross-origin settings when appropriate, and verify performance hints rather than adding them automatically.

Related pages