link要素の使い方

HTMLのlink要素は、今のページと別のファイルとの関係をブラウザーに伝えます。CSSファイルやサイトのアイコンを読み込むときによく使います。

先に結論

一番よく使う例 — CSSを読み込む

<head>
  <link rel="stylesheet" href="style.css">
</head>

hrefは読み込むファイルの場所、rel="stylesheet"は「このファイルはページの見た目を決めるCSSです」という関係を表します。ファイル名やフォルダーが合っていないと、CSSは読み込まれません。

relで関係を伝える

relは、ページと指定したファイルがどんな関係なのかを伝えます。値によって、ブラウザーがファイルを読み込むか、ページの情報として扱うかが変わります。

書き方	何をする？
rel="stylesheet"	CSSを読み込み、ページの見た目に使う
rel="icon"	タブなどに使うサイトアイコンを知らせる
rel="preload"	あとですぐ使うファイルを、先に読み込むようブラウザーに伝える
rel="preconnect"	あとで使う別サイトへの接続を、先に準備する
rel="canonical"	同じ内容のページが複数あるとき、代表となるURLを検索サービスなどに知らせる

ファイルを先に読み込む

preloadは、今のページですぐ使うことが分かっているファイルを先に読み込みたいときに使います。たとえば、そのページで使うフォントなら次のように書けます。

<link rel="preload" href="/fonts/site.woff2" as="font" type="font/woff2" crossorigin>

asには、読み込むものの種類を書きます。先に読み込むだけでは、フォントやCSSがページに適用されるわけではありません。実際に使うCSSなども別に必要です。

必要のないファイルまで先に読み込むと、今すぐ必要な画像やページの表示に使う通信をじゃますることがあります。「すぐ使う」と分かっているものだけにします。

preconnectはダウンロードではない

preconnectは、別のWebサイトからファイルを読み込む前に、接続を準備するための合図です。ファイルそのものはダウンロードしません。接続先が決まっていて、すぐに利用する予定がある場合に使います。

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

使う予定のない接続先をたくさん書くと、通信や端末の作業が増えます。必要な接続先だけにしましょう。

画面を移動するリンクとは違う

linkとaは名前が似ていますが、役割が違います。画面に表示され、押すと別のページへ移動するリンクにはaを使います。linkは、ページと別のファイルやページとの関係をブラウザーに伝えます。

<!-- CSSファイルをページに使う -->
<link rel="stylesheet" href="style.css">

<!-- 押すと別のページへ移動する -->
<a href="about.html">このサイトについて</a>

よくある間違い

• <link>の最後に閉じタグを書く。linkは中身や閉じタグを持たない要素です
• relを書き忘れて、何のファイルかをブラウザーへ伝えない
• hrefのフォルダーやファイル名を間違える
• preloadを書けば、そのファイルがページに自動で適用されると思う
• ページ移動用のリンクをlinkで作ろうとする。移動にはaを使います

もう少し詳しく

mediaでCSSを使う画面の条件を指定できます。crossorigin、integrity、referrerpolicyは、別のサイトからファイルを読むときの通信や確認方法に関係します。意味はrelやファイルの種類によって変わるため、必要な場合に確認して使います。

Atlasで確認する

relごとの条件、preloadとmodulepreloadの違い、CSSの読み込み時の処理、ブラウザーの観測結果は、Yugien Atlasのlink要素で確認できます。押して移動するリンクの仕組みはa要素を参照してください。