<a>要素
Technical Summary
href属性を持つa要素は、子孫の内容をlabelとするhyperlinkを表します。href属性を持たない場合はhyperlinkではなく、リンクが置かれうる場所のplaceholderを表します。
hrefの有無は、単なる文字列の有無ではなく、要素の意味、interactive contentへの分類、activation behaviorの入口を分ける条件です。
Definition / Variants
| 条件 | 意味 | 主な帰結 |
|---|---|---|
hrefあり |
hyperlink | ユーザーがたどれるリンクを作成し、interactive contentに分類される |
hrefなし |
placeholder | hyperlinkを作成せず、interactive contentにも分類されない |
hrefの属性ノードが存在するかどうかが条件です。空文字列かどうかだけで判定してはいけません。仕様上、hrefの値は空白で囲まれたvalid
URLである必要があります。
Content model
- コンテンツモデルはtransparentです。
- ただし、子孫にinteractive contentを含めることはできません。
hrefがある場合はinteractive contentおよびphrasing contentに分類されます。hrefがない場合はinteractive contentではありません。
したがって、リンクの中に別のリンクやボタンを入れる構造は、見た目が動作しても意味上の問題を生みます。
主要属性と適用範囲
| 属性 | 役割 | 確認すべき点 |
|---|---|---|
href |
hyperlinkのURL | 存在の有無が要素のvariantを分ける |
target |
使用するnavigable | target nameまたはkeywordとして処理される |
download |
リソースのダウンロード意図 | activation時のdownload処理に関係する |
rel |
リンク先との関係 | noopener、noreferrerなどのlink typeを含む |
ping |
hyperlink auditing用の通知先 | HTTP(S) URLのspace-separated set |
hreflang / type |
リンク先の言語・MIME typeの案内 | いずれも仕様上はadvisory metadata |
referrerpolicy |
リンクをたどるときのreferrer policy | Fetch・Referrer Policyとの関係を確認する |
Activation behavior
aまたはareaのactivation
behaviorでは、まずhrefがなければ処理を終了します。その後、downloadがあればhyperlinkをダウンロードし、そうでなければhyperlinkをたどります。
if href is absent:
return
if download is present:
download the hyperlink
else:
follow the hyperlink
これは「クリックイベントを発火する要素」という説明では不十分です。リンクは、URL・navigable・ユーザー関与・download処理を含む処理モデルを持ちます。
DOM API
a要素はHTMLAnchorElementとして扱われ、hyperlinkのURLを扱うAPIを利用できます。origin、protocol、host、pathname、search、hashなどは、要素に関連付けられたURLの状態と関係します。
const link = document.querySelector('a');
link.href;
link.origin;
link.pathname;
link.hash;
Fact / Evidence(主張 / 根拠)
主要Factを、適用条件・確認状態・仕様上の根拠位置と対応付けています。未完了の範囲は下のCoverage / Open Issuesに残しています。
| 種別 | Fact / 主張 | 条件・範囲 | 状態 | 根拠 |
|---|---|---|---|---|
| SPEC | hrefを持つa要素はhyperlinkを表します。 |
href属性ノードが存在する場合。 |
確認済み | HTML Standard: links created by a and area |
| SPEC | hrefがなければ、a要素はplaceholderであり、interactive contentではありません。 |
href属性ノードがない場合。 |
確認済み | HTML Standard: interactive content |
| SPEC | リンクになったa要素には、interactive contentの子孫を含められません。 |
hrefがあり、transparentなcontent modelが適用される場合。 |
確認済み | HTML Standard: interactive content |
| SPEC | activationではhyperlinkをたどり、downloadの条件ではダウンロード処理に進みます。 | hrefがあり、移動とダウンロードで処理分岐が異なる場合。 |
確認済み | HTML Standard: following hyperlinks |
Evidence
- HTML Standard: 4.6 Links — a/areaによるhyperlink、属性、activation behavior、hyperlink API
- HTML Standard: Content models — content categoryとcontent modelの共通定義
- HTML Standard: Interactive content — interactive contentの分類
Implementation Evidence
仕様から導いた主張とは別に、ブラウザー実装・WPT・アクセシビリティ観測を記録します。Pendingは未実行であり、実装結果を主張しません。
共通fixture / 実行環境: hrefあり・なしのa、/target.htmlへの相対URL、focus、click、動的scriptを含む最小fixture。Chrome 152.0.0.0 / Windows NT 10.0 / 確認日 2026-09-13。
| 種別 | 再現確認の範囲 | 記録する条件 | 状態 |
|---|---|---|---|
| IMPL | href="/target.html"はhttp://127.0.0.1:8765/target.htmlへ解決し、getAttributeは相対値を保持。hrefなしのaはhrefが空文字・属性なし。両方ともHTMLAnchorElementとして生成され、focus後のactiveElementはwith-href、clickはpreventDefault後に遷移しない |
Chrome 152.0.0.0 / Windows NT 10.0 / 2026-09-13。最小fixtureでURL解決、API、focus、activationを実測 | 確認済み |
| WPT | hyperlinkの生成・activation・download・targetに関係するテストとの対応 | htmlanchorelement_getter.html、htmlanchorelement_attribute-getter-setter.html、activation-behavior.window.jsを対応付け。2026-09-15 / Chrome 152.0.0.0 / Windows NT 10.0 / wpt.liveでHTMLテスト2件を実行し25/25 pass。activation-behavior.window.jsはブラウザー実行器により開けず未実施 |
部分実行(25/25 pass) |
| AAM | Chrome AX treeではhrefありがrole link・name「リンクあり」として公開され、hrefなしはリンクroleを持たないtextとして公開。focus後もhrefありはfocus対象として観測 |
Chrome 152.0.0.0 / Windows NT 10.0 / 2026-09-13。支援技術ではなくブラウザーAX treeの観測 | 観測済み |
WPTの対応付けにはWPTリポジトリ、アクセシビリティの基準にはHTML-AAMを参照します。
Coverage / Open Issues
- 確認済み要素の意味、hrefの有無、主要属性、activation behavior、DOM API
- 未完了全link type、URL Standard、Fetch、Referrer Policyの詳細追跡は別Topicが必要
- 未完了ARIA・platform accessibility mappingの完全な整理
- 未完了今回の実装・AX観測はChrome 1環境のみ。複数ブラウザー、WPT実行、歴史的変更、互換性データは未登録
このページは初期Coverageであり、HTMLのa要素に関する全事実の検証完了を意味しません。
Related surface
初心者向けの最小例と、リンクとボタンの使い分けはYugienのa要素ページで説明しています。ボタンのtype状態とフォーム処理はAtlasのbutton要素を参照してください。