<link>要素

まずは要点

link要素の役割と、リンクの種類

HTMLでは、リンクはページ同士や、ページと別ファイルのつながりを表します。画面に表示され、人が押して移動するハイパーリンクはaなどで作ります。このページのlink要素は、主にCSSなどを読み込んだり、ページに関する情報をブラウザーへ伝えたりします。

linkは中身や終了タグを持たない要素です。多くの種類はhead内に置きます。CSSや一部の先読み指定などは、種類ごとの条件を満たすとbody内にも置けます。

分類	結果の例	主な処理
ハイパーリンク（人がたどるリンク）	alternate、canonical、help、next	今のページと別のページとの関係を表す。画面に押せるリンクを表示するとは限らない。
外部ファイルのリンク	stylesheet、icon、preload、modulepreload	ブラウザーが別ファイルを読み込み、種類に合わせて使う。
先読みの合図	preconnect、dns-prefetch、prefetch	接続や後で使うファイルについて、ブラウザーへ早めの準備を提案する。実行するか、いつ行うかは種類で異なる。

一つのrelには空白区切りで複数のkeywordを指定でき、各keywordの効果が組み合わさる場合があります。ただし、組み合わせ可能な関係、重複、必要属性は個別のtype定義に従います。

relの種類と使える場所

rel keyword	主な意味	body内	境界・注意点
stylesheet	外部CSSを文書のstyle systemへ追加する。	許可	media、disabled state、CSS response処理、style sheet readinessが関係する。
icon	ページやsiteを表すicon候補。	通常不可	候補の選択と表示はuser agentやplatformにも依存する。
preload	現在のnavigationで必要なresourceを早く取得する。	許可	asでdestinationを指定する。後のrequestと一致しなければ再利用されないことがある。
modulepreload	module script用のpreload処理を行う。	許可	通常のpreload cacheではなくmodule mapに関係する。module用のfetch条件を使う。
preconnect	別originとの接続を早めに準備する。	許可	resource bodyを取得する指定ではない。使う予定が近いoriginに限定する。
dns-prefetch	別originの名前解決を早めに試みる。	許可	接続全体を確立するpreconnectとは範囲が異なる。
prefetch	将来のnavigationで使う可能性があるresourceの取得を提案する。	許可	取得時期・実行有無はuser agentの判断を含み、即時取得を保証しない。
alternate、canonical、help、next、prev	現在の文書と別の文書との関係を示す。	通常不可	検索サービスなどの解釈をブラウザーのnavigationやredirectと混同しない。

ここにないkeywordを含む全link typeの仕様、登録済み拡張、HTTP Link headerの処理は網羅していません。

属性と使う条件

Attribute	意味	適用・境界
href	関係先、または取得するresourceのURL。	ない場合、要素は通常、linkを表さない。DOMのhref propertyはbase URLを使って解決したURLを返す。
rel	現在の文書との関係を示すkeyword一覧。	keywordの集合と各typeの規則からhyperlinkかexternal resourceかが決まる。
as	preloadするresourceのfetch destination。	preloadでは必須かつ有効なdestinationが必要。modulepreloadではmodule preload destinationに使う。
media	適用するmedia condition。	external resourceでは条件に一致する場合に適用。hyperlinkでは参照文書の対象mediaを表す助言情報。
type	期待するMIME typeを示す。	対応しないtypeと分かる場合に取得を省略できる。responseの実際のContent-Typeを保証・上書きしない。
crossorigin	CORS settings attribute stateを選ぶ。	request modeやcredentialsに関係するが、初期値はlink typeごとのfetch規則も確認する。
integrity	Subresource Integrity metadata。	取得bodyのhashを指定metadataと照合する。cross-origin resourceではCORS response条件も関係する。
referrerpolicy	requestで送るreferrer情報の方針。	実際のrequest生成時にReferrer PolicyとFetchの処理を受ける。
fetchpriority	取得priorityの相対的なhint。	high、low、autoを指定できる。user agentが必ず特定の順序を実行する保証ではない。
imagesrcset、imagesizes	responsive image preload候補と表示幅を与える。	rel="preload"かつas="image"など、仕様上の条件に限って使う。
sizes	icon候補のsizeを伝える。	icon関係に使う。候補選択時にuser agentが考慮できる情報。
blocking	対象resourceがrenderをblockするかに関係する。	利用できる値とlink type・挿入状態の条件は、render-blocking処理の定義に従う。

ブラウザーで起きる処理

CSSや画像などを読み込むとき、ブラウザーはURLを決め、何を読み込むかなどの条件を整え、サーバーへ取りに行きます。その後、CSSならページの見た目に使うなど、種類に合った処理をします。relの種類によって、この順番に条件が加わります。

link element + rel keyword
  ↓ determine relationship and applicable attributes
  ↓ resolve href against the document base URL
  ↓ create request options (destination, mode, credentials,
      integrity, referrer policy, priority, policy container)
  ↓ run the link type's fetch and process algorithm
  ↓ apply, expose, or use the resulting resource

Stylesheet

rel="stylesheet"はCSS resourceをstyle systemへ渡します。media condition、CSS-OM state、stylesheetのenabled/disabled状態、response type、CSP、CORSなどが処理の一部になります。条件に一致しないmediaはstyleを適用しませんが、取得そのものを常に省略するとは限りません。

parserが作ったstylesheetが対象条件を満たすと、script実行やrenderingを一時的に待たせることがあります。これはCSS取得完了が常に同じ時刻に起きるという保証ではなく、parser insertion、media、stylesheet state、critical subresourcesなどの条件付き処理です。

Preloadとmodulepreload

preloadは、現在のnavigationで使うと分かっているresourceを適切なdestination・modeなどで早く取得し、後続requestからの再利用を可能にします。同じURLでもdestinationやCORS mode、credentialsなどが合わないと再利用されないことがあり、不要な二重requestやconsole warningの原因になります。

modulepreloadはmodule script向けの処理で、module mapへ接続します。通常のpreload as="script"と同じ処理ではありません。依存moduleも先読みすることはuser agentが利用できる最適化であり、同じ動作を一律に要求する規則ではありません。

接続や先読みの合図

preconnect、dns-prefetch、prefetchは実際のresourceをその場で適用するstylesheetとは異なります。hintに対する処理はuser agentの判断を含みます。resourceを取得するtypeではHTTP response、redirect、CSP、CORS、Integrity metadata、cacheなどの別仕様も関係します。

JavaScriptから要素を調べる

JavaScriptからlink要素を調べるとき、ブラウザーはHTMLLinkElementという種類で扱います。relListで関係の種類を確認でき、sheetで関連するCSSを調べられます。

const link = document.querySelector('link[rel="stylesheet"]');

link instanceof HTMLLinkElement;
link.relList.contains('stylesheet');
link.href;       // base URLで解決したURL
link.getAttribute('href'); // markupに書かれた値
link.sheet;      // stylesheetとの関連を調べる

rel、href、接続状態の変更が新しい取得を起こすかどうかはlink typeごとに異なります。属性変更だけからrequest数や再利用を推測せず、対象typeのprocessing modelと実測を確認します。

仕様の主張と根拠

主要Factを、適用条件と仕様上の根拠位置に結び付けています。実装観測は下のImplementation Evidenceへ分けます。

参照した仕様書

1. HTML Standard: The link element — content model、body-ok、attribute processing、DOM API
2. HTML Standard: Link types — rel keywordの分類とtype別の意味
3. HTML Standard: Link processing — request optionとexternal resourceの共通処理
4. HTML Standard: preload and modulepreload — 先読みの個別処理
5. Fetch Standard and Subresource Integrity — request mode、credentials、integrity検証
6. CSSOM: LinkStyle — stylesheetを参照するinterface
7. HTML-AAM: link — platform accessibility mapping

Implementation Evidence

以下は仕様上の要求ではなく、特定のfixture・ブラウザー・OSで記録した観測です。未実行の範囲や一環境だけの結果を、他の実装へ一般化しません。

WPTは選定したテストのみを実行します。AAM記録は仕様上のmappingとブラウザーAX treeの観測を区別します。

確認した範囲と残った課題

• Reviewed主要link typeの関係分類、stylesheet・preloadの基本処理、関係属性とDOM API
• 仕様と実装を調査2026-10-01の再実行でもlink-load-error-events.htmlは同じ5件がfail。CSSでないHTMLページを直接stylesheetとして読んだcaseは、HTML Standardの手順ではerrorになるため、観測したloadは仕様との明確な不一致。残る4件は@import先の失敗を外側のlink eventに伝える問題だが、HTML Standardはstylesheet内の読み込み手順が未明確と記し、issue #968で解決を検討中。二段階のHTTP importは、eventだけでは実際に通信が止められたか分からない。
• Open全rel typeと登録済み拡張、HTTP Link header、early hintsとの完全な相互作用
• Open各browserのrequest reuse、優先順位、render blocking、icon候補選択の差
• OpenWindows UI Automationの実測はCodex内ブラウザー1環境のみ。Narratorなどの読み上げ、別のブラウザー、Firefox、Safari、mobile browserは未評価

このページは初期Coverageです。全link type、全環境の一致、または全WPTの通過を意味しません。

関連ページ

初心者向けのCSS読み込み例、preloadの選び方、aとの違いはYugienのlink要素ページで説明します。画面に表示するハイパーリンクの作成はa要素、scriptの実行・module処理はscript要素を参照してください。