メインコンテンツへスキップ

link要素

1.仕様

LINK要素は、
現在の文書と
外部のリソースとの
関係を指定します。

LINK - X EMPTY -- a media-independent link. (Void elements.) [Metadata|Flowlimited|Phrasinglimited] --

link

外部リソースにリンク (a media-independent link)

種類
空要素

任意のコンテンツを持つことができない要素です。

カテゴリ
  • メタデータコンテンツ
  • フローコンテンツ(条件付き)
  • フレージングコンテンツ(条件付き)

itemprop属性が存在する場合、または body-ok のキーワードのみを含む rel属性が存在する場合は、フローコンテンツ, フレージングコンテンツ。

使用できるコンテキスト
  • メタデータコンテンツを受け入れる要素
  • <head>要素の子である<noscript>要素に 0個以上
  • フレージングコンテンツを受け入れる要素

メタデータコンテンツを受け入れる要素のコンテンツとして、使用できます。
<head>要素の子である<noscript>要素に 0個以上を そのコンテンツとして、使用できます。
フレージングコンテンツを受け入れる要素のコンテンツとして、使用できます。

メタデータコンテンツを受け入れる要素は、<head>要素 です。

フレージングコンテンツを受け入れる要素は、<h1>要素, <h2>要素, <h3>要素, <h4>要素, <h5>要素, <h6>要素, <p>要素, <pre>要素, <output>要素, <progress>要素, <meter>要素, <label>要素, <datalist>要素, <body>要素, <section>要素, <nav>要素, <aside>要素, <article>要素, <header>要素, <footer>要素, <main>要素, <address>要素, <li>要素, <dt>要素, <dd>要素, <caption>要素, <th>要素, <td>要素, <form>要素, <fieldset>要素, <search>要素, <blockquote>要素, <figure>要素, <figcaption>要素, <div>要素, <dialog>要素, <abbr>要素, <b>要素, <bdi>要素, <bdo>要素, <cite>要素, <code>要素, <data>要素, <dfn>要素, <em>要素, <i>要素, <kbd>要素, <mark>要素, <q>要素, <s>要素, <samp>要素, <small>要素, <span>要素, <strong>要素, <sub>要素, <sup>要素, <u>要素, <var>要素 です。

ただし、フレージングコンテンツが期待される場所は、要素が本文内で許可されている場合に限ります。

コンテンツモデル
何もない

要素のコンテンツモデルが「何もない」の場合、要素にはテキストノード (要素間の空白以外) と要素ノードが含まれていてはなりません。

タグの省略

終了タグはありません。

コンテンツ属性
グローバル属性 他
href属性
ハイパーリンクのアドレス
crossorigin属性
要素がクロスオリジンリクエストを処理する方法
rel属性
ハイパーリンクを含むドキュメントと宛先リソースの関係
media属性
該当するメディア
integrity属性
サブリソース整合性チェックで使用される整合性メタデータ[SRI]
hreflang属性
リンクされたリソースの言語
type属性
参照されるリソースのタイプのヒント
referrerpolicy属性
要素によって開始されたフェッチのリファラーポリシー
sizes属性
アイコンのサイズ(rel ='icon'の場合)
imagesrcset属性
高解像度ディスプレイ、小型モニターなど、さまざまな状況で使用する画像(rel ='preload'の場合)
imagesizes属性
さまざまなページレイアウトの画像サイズ(rel ='preload'の場合)
as属性
プリロード要求の潜在的な宛先(rel ='preload'およびrel='modulepreload'の場合)
blocking属性
要素が潜在的にレンダリングをブロックしているかどうか
color属性
サイトのアイコンをカスタマイズするときに使用する色(rel ='mask-icon'の場合)
disabled属性
リンクが無効になっているかどうか
fetchpriority属性
要素によって開始されるフェッチの優先順位
title属性
この要素に特別なセマンティクスで、リンクのタイトル, CSSスタイルシートセット名。

charset属性がありましたが、廃止されました。代わりに、リンクされたリソースで HTTP `Content-Type` ヘッダーを使用して下さい。

methods属性がありましたが、廃止されました。代わりに HTTP OPTIONS 機能を使用して下さい。

rev属性がありましたが、廃止されました。代わりに、反対の用語を指定してrel属性を使用して下さい。 (たとえば、rev='made' の代わりに、rel='author' を使用します。)

urn属性がありましたが、廃止されました。代わりに href 属性を使用して、優先される永続識別子を指定します。

target属性がありましたが、廃止されました。不要です。 全く省略して下さい。

DOM インターフェイス
HTMLLinkElement
  1. [Exposed=Window]
  2. interface HTMLLinkElement : HTMLElement {
  3. lastReviewed;
  4. [HTMLConstructor] constructor();
  5.  
  6. [CEReactions] attribute USVString href;
  7. [CEReactions] attribute DOMString? crossOrigin;
  8. [CEReactions] attribute DOMString rel;
  9. [CEReactions] attribute DOMString as;
  10. [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
  11. [CEReactions] attribute DOMString media;
  12. [CEReactions] attribute DOMString integrity;
  13. [CEReactions] attribute DOMString hreflang;
  14. [CEReactions] attribute DOMString type;
  15. [SameObject, PutForwards=value] readonly attribute DOMTokenList sizes;
  16. [CEReactions] attribute USVString imageSrcset;
  17. [CEReactions] attribute DOMString imageSizes;
  18. [CEReactions] attribute DOMString referrerPolicy;
  19. [SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;
  20. [CEReactions] attribute boolean disabled;
  21. [CEReactions] attribute DOMString fetchPriority;
  22.  
  23. // also has obsolete members
  24. };
  25.  
  26. HTMLLinkElement includes LinkStyle;
HTMLElement
  1. [Exposed=Window]
  2. interface HTMLElement : Element {
  3. [HTMLConstructor] constructor();
  4.  
  5. // metadata attributes
  6. [CEReactions] attribute DOMString title;
  7. [CEReactions] attribute DOMString lang;
  8. [CEReactions] attribute boolean translate;
  9. [CEReactions] attribute DOMString dir;
  10.  
  11. // user interaction
  12. [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
  13. [CEReactions] attribute DOMString inert;
  14. undefined click();
  15. [CEReactions] attribute DOMString accessKey;
  16. readonly attribute DOMString accessKeyLabel;
  17. [CEReactions] attribute boolean draggable;
  18. [CEReactions] attribute boolean spellcheck;
  19. [CEReactions] attribute DOMString writingSuggestions;
  20. [CEReactions] attribute DOMString autocapitalize;
  21.  
  22. [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
  23. [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
  24.  
  25. ElementInternals attachInternals();
  26.  
  27. // The popover API
  28. undefined showPopover();
  29. undefined hidePopover();
  30. boolean togglePopover(optional boolean force);
  31. [CEReactions] attribute DOMString? popover;
  32. };
  33.  
  34. HTMLElement includes GlobalEventHandlers;
  35. HTMLElement includes ElementContentEditable;
  36. HTMLElement includes HTMLOrSVGElement;
Element
  1. [Exposed=Window]
  2. interface Element : Node {
  3. readonly attribute DOMString? namespaceURI;
  4. readonly attribute DOMString? prefix;
  5. readonly attribute DOMString localName;
  6. readonly attribute DOMString tagName;
  7.  
  8. [CEReactions] attribute DOMString id;
  9. [CEReactions] attribute DOMString className;
  10. [SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
  11. [CEReactions, Unscopable] attribute DOMString slot;
  12.  
  13. boolean hasAttributes();
  14. [SameObject] readonly attribute NamedNodeMap attributes;
  15. sequence<DOMString> getAttributeNames();
  16. DOMString? getAttribute(DOMString qualifiedName);
  17. DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
  18. [CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
  19. [CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
  20. [CEReactions] undefined removeAttribute(DOMString qualifiedName);
  21. [CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
  22. [CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
  23. boolean hasAttribute(DOMString qualifiedName);
  24. boolean hasAttributeNS(DOMString? namespace, DOMString localName);
  25.  
  26. Attr? getAttributeNode(DOMString qualifiedName);
  27. Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
  28. [CEReactions] Attr? setAttributeNode(Attr attr);
  29. [CEReactions] Attr? setAttributeNodeNS(Attr attr);
  30. [CEReactions] Attr removeAttributeNode(Attr attr);
  31.  
  32. ShadowRoot attachShadow(ShadowRootInit init);
  33. readonly attribute ShadowRoot? shadowRoot;
  34.  
  35. Element? closest(DOMString selectors);
  36. boolean matches(DOMString selectors);
  37. boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
  38.  
  39. HTMLCollection getElementsByTagName(DOMString qualifiedName);
  40. HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
  41. HTMLCollection getElementsByClassName(DOMString classNames);
  42.  
  43. [CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
  44. undefined insertAdjacentText(DOMString where, DOMString data); // legacy
  45. };
GlobalEventHandlers
  1. interface mixin GlobalEventHandlers {
  2. attribute EventHandler onabort;
  3. attribute EventHandler onauxclick;
  4. attribute EventHandler onbeforeinput;
  5. attribute EventHandler onbeforematch;
  6. attribute EventHandler onbeforetoggle;
  7. attribute EventHandler onblur;
  8. attribute EventHandler oncancel;
  9. attribute EventHandler oncanplay;
  10. attribute EventHandler oncanplaythrough;
  11. attribute EventHandler onchange;
  12. attribute EventHandler onclick;
  13. attribute EventHandler onclose;
  14. attribute EventHandler oncontextlost;
  15. attribute EventHandler oncontextmenu;
  16. attribute EventHandler oncontextrestored;
  17. attribute EventHandler oncopy;
  18. attribute EventHandler oncuechange;
  19. attribute EventHandler oncut;
  20. attribute EventHandler ondblclick;
  21. attribute EventHandler ondrag;
  22. attribute EventHandler ondragend;
  23. attribute EventHandler ondragenter;
  24. attribute EventHandler ondragleave;
  25. attribute EventHandler ondragover;
  26. attribute EventHandler ondragstart;
  27. attribute EventHandler ondrop;
  28. attribute EventHandler ondurationchange;
  29. attribute EventHandler onemptied;
  30. attribute EventHandler onended;
  31. attribute OnErrorEventHandler onerror;
  32. attribute EventHandler onfocus;
  33. attribute EventHandler onformdata;
  34. attribute EventHandler oninput;
  35. attribute EventHandler oninvalid;
  36. attribute EventHandler onkeydown;
  37. attribute EventHandler onkeypress;
  38. attribute EventHandler onkeyup;
  39. attribute EventHandler onload;
  40. attribute EventHandler onloadeddata;
  41. attribute EventHandler onloadedmetadata;
  42. attribute EventHandler onloadstart;
  43. attribute EventHandler onmousedown;
  44. [LegacyLenientThis] attribute EventHandler onmouseenter;
  45. [LegacyLenientThis] attribute EventHandler onmouseleave;
  46. attribute EventHandler onmousemove;
  47. attribute EventHandler onmouseout;
  48. attribute EventHandler onmouseover;
  49. attribute EventHandler onmouseup;
  50. attribute EventHandler onpaste;
  51. attribute EventHandler onpause;
  52. attribute EventHandler onplay;
  53. attribute EventHandler onplaying;
  54. attribute EventHandler onprogress;
  55. attribute EventHandler onratechange;
  56. attribute EventHandler onreset;
  57. attribute EventHandler onresize;
  58. attribute EventHandler onscroll;
  59. attribute EventHandler onscrollend;
  60. attribute EventHandler onsecuritypolicyviolation;
  61. attribute EventHandler onseeked;
  62. attribute EventHandler onseeking;
  63. attribute EventHandler onselect;
  64. attribute EventHandler onslotchange;
  65. attribute EventHandler onstalled;
  66. attribute EventHandler onsubmit;
  67. attribute EventHandler onsuspend;
  68. attribute EventHandler ontimeupdate;
  69. attribute EventHandler ontoggle;
  70. attribute EventHandler onvolumechange;
  71. attribute EventHandler onwaiting;
  72. attribute EventHandler onwebkitanimationend;
  73. attribute EventHandler onwebkitanimationiteration;
  74. attribute EventHandler onwebkitanimationstart;
  75. attribute EventHandler onwebkittransitionend;
  76. attribute EventHandler onwheel;
  77. };
ElementContentEditable
  1. interface mixin ElementContentEditable {
  2. [CEReactions] attribute DOMString contentEditable;
  3. [CEReactions] attribute DOMString enterKeyHint;
  4. readonly attribute boolean isContentEditable;
  5. [CEReactions] attribute DOMString inputMode;
  6. };
HTMLOrSVGElement
  1. interface mixin HTMLOrSVGElement {
  2. [SameObject] readonly attribute DOMStringMap dataset;
  3. attribute DOMString nonce; // intentionally no [CEReactions]
  4.  
  5. [CEReactions] attribute boolean autofocus;
  6. [CEReactions] attribute long tabIndex;
  7. undefined focus(optional FocusOptions options = {});
  8. undefined blur();
  9. };
LinkStyle
  1. interface mixin LinkStyle {
  2. readonly attribute CSSStyleSheet? sheet;
  3. };
ARIA in HTML
暗黙的="No" ARIAロール="No" aria-* 属性="No"

暗黙的な ARIAセマンティクスがありませんが、意味はあり、この意味は、ARIA によって提供されず、ARIA のユーザーに公開されていないロール、状態、プロパティで表現される可能性があります。

作成者は、暗黙的な ARIAセマンティクス, または HTML要素のネイティブセマンティクスを上書きしてはいけません。

記述できる aria-* 属性はありません。

レンダリング
ボックスを生成しない
非表示の要素
  1. link {
  2. display: none;
  3. }

CSS を大雑把に読むと、 要素とその子孫はボックスやテキストシーケンスを生成しません。 などになります。

説明
link要素は、現在の文書と外部のリソースとの関係を表します。

link要素は、使用すると、作成者は自分の文書を他のリソースにリンクできます。
a要素と area要素によって作成されたハイパーリンクとは異なり、link要素によって作成されたハイパーリンクは、提案されたデフォルトのレンダリングをサポートするユーザーエージェントでは、デフォルトではドキュメントの一部として表示されません。また、CSSを使用して強制的に表示された場合でも、アクティブ化の動作はありません。代わりに、主にページまたはページのコンテンツを使用する他のソフトウェアで使用される可能性のあるセマンティック情報を提供します。さらに、ユーザーエージェントは、このようなハイパーリンクをたどるための独自の UI を提供できます。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>link要素の例 - (Example of link element) | 離珠のHTMLでしぃ！</title>
  6. <meta name="author" content="コータン (KOUTAN)">
  7. <link rel="stylesheet" href="./excss01.css">
  8. <link rel="icon" href="../favicon.ico" type="image/vnd.microsoft.icon">
  9. </head>
  10. <body>
  11. <h1>link要素の例</h1>
  12. <p>この例の link要素は、./excss01.css というスタイルシートをインポートすると指定しています。</p>
  13. </body>
  14. </html>

このサンプルへのリンクです。
(./exlink.htm)

参照元
参照元
JSONデータ
JSON形式での、データのイメージです。
  1. {
  2. "link": {
  3. "group": "Metadata",
  4. "element": "- X EMPTY -- a media-independent link. (Void elements.) [Metadata|Flowlimited|Phrasinglimited] --",
  5. "attlist": {
  6. "%Global;": "",
  7. "href": "%URI; #IMPLIED -- URI for linked resource --",
  8. "hreflang": "%LanguageCode; #IMPLIED -- language code --",
  9. "type": "%ContentType; #IMPLIED -- advisory content type --",
  10. "rel": "%LinkTypes; #IMPLIED -- forward link types --",
  11. "media": "%MediaDesc; #IMPLIED -- for rendering on these media --",
  12. "crossorigin": "CDATA #IMPLIED -- How the element handles crossorigin requests --",
  13. "integrity": "CDATA #IMPLIED -- Integrity metadata used in Subresource Integrity checks [SRI] --",
  14. "referrerpolicy": "CDATA #IMPLIED -- Referrer policy for fetches initiated by the element --",
  15. "sizes": "CDATA #IMPLIED -- Sizes of the icons (for rel='icon') --",
  16. "imagesrcset": "CDATA #IMPLIED -- Images to use in different situations, e.g., high-resolution displays, small monitors, etc. (for rel='preload') --",
  17. "imagesizes": "CDATA #IMPLIED -- Image sizes for different page layouts (for rel='preload') --",
  18. "as": "CDATA #IMPLIED -- Potential destination for a preload request (for rel='preload' and rel='modulepreload') --",
  19. "blocking": "CDATA #IMPLIED -- Whether the element is potentially render-blocking --",
  20. "color": "CDATA #IMPLIED -- Color to use when customizing a site's icon (for rel='mask-icon') --",
  21. "disabled": "CDATA #IMPLIED -- Whether the link is disabled --",
  22. "fetchpriority": "CDATA #IMPLIED -- Sets the priority for fetches initiated by the element --",
  23. },
  24. "summary": "外部リソースにリンク (a media-independent link)",
  25. "point": "現在の文書と外部のリソースとの関係を表します。",
  26. "description": [
  27. "使用すると、作成者は自分の文書を他のリソースにリンクできます。",
  28. "a要素と area要素によって作成されたハイパーリンクとは異なり、link要素によって作成されたハイパーリンクは、提案されたデフォルトのレンダリングをサポートするユーザーエージェントでは、デフォルトではドキュメントの一部として表示されません。また、CSSを使用して強制的に表示された場合でも、アクティブ化の動作はありません。代わりに、主にページまたはページのコンテンツを使用する他のソフトウェアで使用される可能性のあるセマンティック情報を提供します。さらに、ユーザーエージェントは、このようなハイパーリンクをたどるための独自の UI を提供できます。",
  29. ],
  30. "elementKind": "Void",
  31. "categories": [
  32. "Metadata",
  33. "Flowlimited",
  34. "Phrasinglimited",
  35. ],
  36. "categoriessupplement": "itemprop属性が存在する場合、または body-ok のキーワードのみを含む rel属性が存在する場合は、フローコンテンツ, フレージングコンテンツ。",
  37. "canUsedContexts": [
  38. "parent (%Metadata)*",
  39. "HEAD NOSCRIPT (LINK)*",
  40. "parent (%Phrasing)*",
  41. ],
  42. "usedsupplement": "ただし、フレージングコンテンツが期待される場所は、要素が本文内で許可されている場合に限ります。",
  43. "contentModel": "%Nothing",
  44. "tagOmission": [
  45. "-",
  46. "X",
  47. ],
  48. "rendering": "Hidden",
  49. "domInterface": "HTMLLinkElement",
  50. "contentAttributes": {
  51. "href": "ハイパーリンクのアドレス",
  52. "crossorigin": "要素がクロスオリジンリクエストを処理する方法",
  53. "rel": "ハイパーリンクを含むドキュメントと宛先リソースの関係",
  54. "media": "該当するメディア",
  55. "integrity": "サブリソース整合性チェックで使用される整合性メタデータ[SRI]",
  56. "hreflang": "リンクされたリソースの言語",
  57. "type": "参照されるリソースのタイプのヒント",
  58. "referrerpolicy": "要素によって開始されたフェッチのリファラーポリシー",
  59. "sizes": "アイコンのサイズ(rel ='icon'の場合)",
  60. "imagesrcset": "高解像度ディスプレイ、小型モニターなど、さまざまな状況で使用する画像(rel ='preload'の場合)",
  61. "imagesizes": "さまざまなページレイアウトの画像サイズ(rel ='preload'の場合)",
  62. "as": "プリロード要求の潜在的な宛先(rel ='preload'およびrel='modulepreload'の場合)",
  63. "blocking": "要素が潜在的にレンダリングをブロックしているかどうか",
  64. "color": "サイトのアイコンをカスタマイズするときに使用する色(rel ='mask-icon'の場合)",
  65. "disabled": "リンクが無効になっているかどうか",
  66. "fetchpriority": "要素によって開始されるフェッチの優先順位",
  67. "title": "この要素に特別なセマンティクスで、リンクのタイトル, CSSスタイルシートセット名。",
  68. },
  69. "attributessupplement": [
  70. "charset属性がありましたが、廃止されました。代わりに、リンクされたリソースで HTTP `Content-Type` ヘッダーを使用して下さい。",
  71. "methods属性がありましたが、廃止されました。代わりに HTTP OPTIONS 機能を使用して下さい。",
  72. "rev属性がありましたが、廃止されました。代わりに、反対の用語を指定してrel属性を使用して下さい。 (たとえば、rev='made' の代わりに、rel='author' を使用します。)",
  73. "urn属性がありましたが、廃止されました。代わりに href 属性を使用して、優先される永続識別子を指定します。",
  74. "target属性がありましたが、廃止されました。不要です。 全く省略して下さい。",
  75. ],
  76. "reference": [
  77. {
  78. "title": "HTML Living Standard. 4.2.4 The link element. Last Updated 5 August 2025",
  79. "href": "https://html.spec.whatwg.org/multipage/semantics.html#the-link-element",
  80. "heading": "HTML Living Standard. 4.2.4 The link element",
  81. "sub": "最終更新日 2025年8月5日",
  82. },
  83. {
  84. "title": "HTML Living Standard. 4.6 Links 4.6.7 Link types. Last Updated 5 August 2025",
  85. "href": "https://html.spec.whatwg.org/multipage/links.html#linkTypes",
  86. "heading": "HTML Living Standard. 4.6 Links 4.6.7 Link types",
  87. "sub": "最終更新日 2025年8月5日",
  88. },
  89. {
  90. "title": "HTML Living Standard. 15 Rendering 15.3.1 Hidden elements. Last Updated 5 August 2025",
  91. "href": "https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements",
  92. "heading": "HTML Living Standard. 15 Rendering 15.3.1 Hidden elements",
  93. "sub": "最終更新日 2025年8月5日",
  94. },
  95. {
  96. "title": "HTML 5.3 W3C Working Draft. 4.2.4 The link element. W3C First Public Working Draft, 14 December 2017",
  97. "href": "https://www.w3.org/TR/2017/WD-html53-20171214/document-metadata.html#the-link-element",
  98. "heading": "HTML 5.3 W3C 初公開ワーキングドラフト. 4.2.4 The link element",
  99. "sub": "W3Cワーキングドラフト、2017年12月14日",
  100. },
  101. {
  102. "title": "HTML 5.3 W3C Working Draft. 10.3.1. Hidden elements. W3C First Public Working Draft, 14 December 2017",
  103. "href": "https://www.w3.org/TR/2017/WD-html53-20171214/rendering.html#hidden-elements",
  104. "heading": "HTML 5.3 W3C 初公開ワーキングドラフト. 10. Rendering 10.3.1. Hidden elements",
  105. "sub": "W3Cワーキングドラフト、2017年12月14日",
  106. },
  107. {
  108. "title": "HTML 5.2 W3C Recommendation. 4.2.4 The link element. W3C Recommendation, 14 December 2017.",
  109. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/document-metadata.html#the-link-element",
  110. "heading": "HTML 5.2 W3C 勧告. 4.2.4 The link element",
  111. "sub": "W3C勧告、2017年12月14日",
  112. },
  113. {
  114. "title": "HTML 5.2 W3C Recommendation. 10.3.1. Hidden elements.",
  115. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#hidden-elements",
  116. "heading": "HTML 5.2 W3C 勧告. 10.3.1. Hidden elements",
  117. "sub": "W3C勧告、2017年12月14日",
  118. },
  119. {
  120. "title": "HTML 5.1 W3C Recommendation. 4.2.4 The link element. W3C Recommendation, 1 November 2016.",
  121. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/document-metadata.html#the-link-element",
  122. "heading": "HTML 5.1 W3C 勧告. 4.2.4 The link element",
  123. "sub": "W3C勧告、2016年11月1日",
  124. },
  125. {
  126. "title": "HTML 5.1 W3C Recommendation. 10.3.1. Hidden elements. W3C Recommendation, 1 November 2016.",
  127. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#hidden-elements",
  128. "heading": "HTML 5.1 W3C 勧告. 10.3.1. Hidden elements",
  129. "sub": "W3C勧告、2016年11月1日",
  130. },
  131. {
  132. "title": "HTML 5 W3C Recommendation. 4.2.4 The link element. W3C Recommendation, 28 October 2014.",
  133. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/document-metadata.html#the-link-element",
  134. "heading": "HTML 5 W3C 勧告. 4.2.4 The link element",
  135. "sub": "W3C勧告、2014年10月28日",
  136. },
  137. {
  138. "title": "HTML 5 W3C Recommendation. 10.3.1. Hidden elements. W3C Recommendation, 28 October 2014.",
  139. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/rendering.html#hidden-elements",
  140. "heading": "HTML 5 W3C 勧告. 10.3.1. Hidden elements",
  141. "sub": "W3C勧告、2014年10月28日",
  142. },
  143. {
  144. "title": "HTML 4.01 Specification W3C Recommendation. 12.3 Document relationships: the LINK element. W3C Recommendation 24 December 1999.",
  145. "href": "https://www.w3.org/TR/html401/struct/links.html#h-12.3",
  146. "heading": "HTML 4.01 Specification W3C 勧告. 12.3 Document relationships: the LINK element",
  147. "sub": "W3C勧告1999年12月24日",
  148. },
  149. {
  150. "title": "HTML 3.2 Reference Specification. W3C Recommendation 14-Jan-1997.",
  151. "href": "https://www.w3.org/TR/2018/SPSD-html32-20180315/#link",
  152. "heading": "HTML 3.2 Reference Specification LINK",
  153. "sub": "W3C勧告1997年1月14日",
  154. },
  155. {
  156. "title": " Hypertext Markup Language - 2.0. November 1995.",
  157. "href": "https://www.ietf.org/rfc/rfc1866.txt",
  158. "heading": "Hypertext Markup Language - 2.0",
  159. "sub": "November 1995",
  160. },
  161. {
  162. "title": "Hypertext Markup Language (HTML). June 1993.",
  163. "href": "https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt",
  164. "heading": "Hypertext Markup Language (HTML)",
  165. "sub": "June 1993",
  166. },
  167. {
  168. "title": "MDN Web Docs. HTML <link>: The External Resource Link element.",
  169. "href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/link",
  170. "heading": "<link>: 外部リソースへのリンク要素 - HTML: ハイパーテキストマークアップ言語 | MDN",
  171. },
  172. ],
  173. "version": {
  174. "first": "HTML",
  175. "latest": "HTML Living Standard",
  176. },
  177. "lastReviewed": "2025-08-10",
  178. }
  179. }

注意: 簡易に描画する為に、各項目の後ろに , を付与しています。JSON の形式では、末尾の項目の後には , は付けません。

最終確認日

2025-08-10

2.使用できるコンテキスト

link要素は、
head要素に
配置できます。

<link>要素が使用できるコンテキスト(Context・文脈)は、<head>要素や<head>要素内にある <noscript>要素のコンテンツとしてです。指定する属性(属性値)などにより、フレージングコンテンツを受け入れる要素にも、配置できます。

フレージングコンテンツをコンテンツの一部として配置できる要素は、以下の各要素です。

document
html
head
body
link
noscript
link
link

<link>要素は、メタデータコンテンツを受け入れる要素に配置できます。
<head>要素にも, <head>要素内にある<noscript>要素の内部にも配置できます。
itemprop属性が存在する場合、または body-ok のキーワードのみを含むrel属性が存在する場合は、フレージングコンテンツを受け入れる要素にも(フローコンテンツを受け入れる要素でも)配置できます。

  1. <head>
  2. <meta charset="utf-8">
  3. <title>離珠のHTMLでしぃ！</title>
  4. <link rel="icon" href="../favicon.ico" type="image/vnd.microsoft.icon">
  5. </head>

メタデータコンテンツを配置できる<head>要素のコンテンツの一部として、<link>要素を配置できます。<head>要素の子である <noscript>要素にも配置できます。

  1. <head>
  2. <meta charset="utf-8">
  3. <title>離珠のHTMLでしぃ！</title>
  4. <link rel="stylesheet" href="./risyu01.css">
  5. <noscript>
  6. <link rel="stylesheet" href="./noscript01.css">
  7. </noscript>
  8. </head>
  9. <body>
  10. <link rel="stylesheet" href="./risyu02.css">
  11. <noscript>
  12. <link rel="stylesheet" href="./noscript02.css">
  13. </noscript>
  14. </body>

フレージングコンテンツを配置できる要素のコンテンツの一部としてrel属性の値が 'stylesheet' だけである<link>要素を配置できます。<noscript>要素にも配置できます。リンク種別 'stylesheet' は、 body-ok です。

フレージングコンテンツを受け入れる要素にも配置できると例で示しましたが、メタデータコンテンツを受け入れる<head>要素に配置する事をお勧めします。どこに記述しても、スタイルシートの影響範囲は同じです。スタイルシート同士の既述順が優先度に影響するだけです。

3.コンテンツモデル

link要素は、
配置可能なコンテンツは
ありません。

<link>要素の子や子孫としてどのようなコンテンツ(Content・内容) が含まれなければならないかというと、「何もない」 (要素にはテキストノード(要素間の空白以外) と要素ノードが含まれていてはなりません。) です。

<link>要素は、子(内容・コンテンツ・Content)を持つことができない空要素です。

<link>要素は、属性(属性値)によって現在の文書と外部のリソースとの関係を表します。

4.コンテンツ属性

link要素は、
グローバル属性と、
rel属性,
href属性,
type属性,
media属性,
integrity属性,
crossorigin属性,
referrerpolicy属性,
sizes属性,
as属性,
imagesrcset属性,
imagesizes属性,
color属性,
hreflang属性,
disabled属性,
blocking属性,
fetchpriority属性 を
配置できます。

<link>要素に指定することができる属性は、グローバル属性と rel属性, href属性, type属性, media属性, integrity属性, crossorigin属性, referrerpolicy属性, sizes属性, as属性, imagesrcset属性, imagesizes属性, color属性, hreflang属性, disabled属性, blocking属性, fetchpriority属性 です。
また、グローバル属性である title属性ですが、この要素では特別な意味を持ちます。

<link>要素は、href属性またはimagesrcset属性の一方または両方が存在する必要があります。

<link>要素は、rel属性またはitemprop属性のいずれかが必要ですが、両方は必要ありません。

charset属性は、HTML5 で廃止されました。代わりに、リンクされたリソースで HTTP `Content-Type` ヘッダーを使用して下さい。

methods属性は、HTML5 で廃止されました。代わりに HTTP OPTIONS 機能を使用して下さい。

rev属性は、HTML5 で廃止されました。代わりに、反対の用語を指定してrel属性を使用して下さい。 (たとえば、rev="made" の代わりに、rel="author" を使用します。)

urn属性は、HTML5 で廃止されました。代わりに href 属性を使用して、優先される永続識別子を指定します。

target属性は、HTML5 で廃止されました。不要です。 全く省略して下さい。

rel属性

  1. <link rel="stylesheet" href="./risyu.css">

rel属性 は、文書と参照先のリソース間の関係を表すリンク種別を指定します。属性の値は、空白で区切られたリンク種別の値のリストでなければなりません。

この例では、'stylesheet' を属性値で記しています。'stylesheet' は、「スタイルシートをインポートします。」を意味します。尚、スタイルシートの場合は、type属性の 'text/css' は省略できます。

リンク種別は、HTML Living Standard の Link types に記述(説明)があります。「HTML Living Standard - 4.6.7 Link types」

href属性

  1. <link rel="stylesheet" href="./risyu.css">

href属性 は、参照先のリソースの URLを指定します。URL は絶対・相対のどちらでもかまいません。

type属性

  1. <link rel="stylesheet" href="./risyu.css" type="text/css">

type属性 は、参照先のリソースの MIMEタイプを指定します。この情報は参考の為の値です。

rel属性で指定するリンク種別で stylesheet キーワードによって指定されるリソースのデフォルトのタイプは text/css です。
rel属性で指定されるリソースによって、既定値があってtype属性が省略できる場合があります。

media属性

  1. <link rel="stylesheet" href="./risyu.css" media="screen and (max-width: 640px)">

media属性 は、メディアクエリを指定します。参照先のリソースが適用されるメディアを指定します

  • media : 属性名
  • "screen and (max-width: 640px)" : 属性値 (メディアクエリ)
    • screen : メディアタイプ
    • and : 論理演算子
    • (max-width: 640px) : メディア特性

メディアタイプは、端末の全般的なカテゴリを説明します。all(すべてのデバイス), print(プリンタ), screen(プリンタ以外のすべてのデバイス), tty(テレタイプなど), tv(テレビ), projection(プロジェクター), handheld(携帯電話), braille(点字ディスプレイ), embossed(点字プリンタ), aural(音声デバイス), speech(音声出力機器) などがあります。

メディア特性は、特定のユーザーエージェントや、出力端末や、環境などの特性を記述します。特性式は、括弧で囲む必要があります。

論理演算子は、and 演算子(論理積), カンマ区切り(論理和), not 演算子(論理否定), only 演算子(古いブラウザー対応) があります。

integrity属性

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" integrity="sha384-jTFzRHnGayPcZHkUx5hTuWbygQevlGFimHdpRHicjyJXGyyjcioudSScb7/YN0PE" crossorigin="anonymous">

integrity属性 は、サブリソースの整合性チェックで使用される 整合性メタデータを指定します。

この属性は、stylesheet、preload、または modulepreload キーワードを含むrel属性を持つ<link>要素でのみ指定する必要があります。

crossorigin属性

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" integrity="sha384-jTFzRHnGayPcZHkUx5hTuWbygQevlGFimHdpRHicjyJXGyyjcioudSScb7/YN0PE" crossorigin="anonymous">

crossorigin属性 は、要素がクロスオリジン要求を処理する方法です。anonymous(匿名), use-credentials(資格情報を使用する) があります。

referrerpolicy属性

  1. <link rel="stylesheet" href="./risyu.css" referrerpolicy="no-referrer-when-downgrade">

referrerpolicy属性 は、リファラーポリシーを設定します。リソースを読み込む際にどのリファラーを使用するかを示す文字列を記述します。

sizes属性

  1. <link rel="icon" href="../favicon.ico" type="image/vnd.microsoft.icon" sizes="16x16">

sizes属性 は、アイコンのサイズを設定します。

この属性は、icon キーワードまたは apple-touch-icon キーワードを指定する rel属性を持つ<link>要素でのみ指定する必要があります。

as属性

  1. <link rel="preload" href="sample640.png" as="image" imagesrcset="sample320.png 320w, sample640.png 640w, sample1280.png 1280w" imagesizes="10vw">
  3. <body>
  4. <img src="sample640.png" srcset="sample320.png 320w, sample640.png 640w, sample1280.png 1280w" sizes="10vw" alt="サンプル画像">

as属性 は、プリロード要求の潜在的な宛先を設定します。

この属性は、preload キーワードまたは modulepreload キーワードを指定するrel属性を持つ<link>要素でのみ指定する必要があります。

imagesrcset属性

  1. <link rel="preload" href="sample640.png" as="image" imagesrcset="sample320.png 320w, sample640.png 640w, sample1280.png 1280w" imagesizes="10vw">
  3. <body>
  4. <img src="sample640.png" srcset="sample320.png 320w, sample640.png 640w, sample1280.png 1280w" sizes="10vw" alt="サンプル画像">

imagesrcset属性 は、プリロード要求の画像候補文字列を設定します。

この例の 320w は幅記述子といい、幅ディスクリプタ値と小文字W で記述しています。他に画素密度記述子という画素密度記述子の値と小文字X での記述の仕方もあります。

この属性は、preload キーワードを指定するrel属性とimage キーワードを指定するas属性を持つ<link>要素でのみ指定する必要があります。

imagesizes属性

  1. <link rel="preload" href="sample640.png" as="image" imagesrcset="sample320.png 320w, sample640.png 640w, sample1280.png 1280w" imagesizes="10vw">
  3. <body>
  4. <img src="sample640.png" srcset="sample320.png 320w, sample640.png 640w, sample1280.png 1280w" sizes="10vw" alt="サンプル画像">

imagesizes属性 は、プリロード要求の画像候補の画像サイズを設定します。

この属性は、preload キーワードを指定するrel属性とimage キーワードを指定するas属性を持つ<link>要素でのみ指定する必要があります。

color属性

  1. <link rel="mask-icon" href="./risyu.svg" color="#ff0000">

color属性 は、ユーザーがサイトをピン留めしたときに表示されるアイコンの表示をカスタマイズするためにユーザー エージェントが使用できる 推奨色を指定します。

この属性は、mask-icon キーワードを指定するrel属性を持つ<link>要素でのみ指定する必要があります。

hreflang属性

  1. <link rel="alternate" href="./alternate.htm" hreflang="en">

hreflang属性 は、参照先のリソースの 言語を指定します。

disabled属性

  1. <link rel="stylesheet" href="./risyu.css" disabled>

disabled属性 は、参照先のリソースの 無効を指定します。

この属性は、stylesheet キーワードを指定する rel属性を持つ<link>要素でのみ指定する必要があります。

blocking属性

  1. <link rel="stylesheet" href="./risyu.css" blocking="render">

blocking属性 は、render キーワードを指定した場合、要素は潜在的にレンダリングブロックになります。これは個々の要素で定義されます。
デフォルトでは、要素は暗黙的にレンダリングをブロックする可能性はありません。

この属性は、stylesheet キーワードを指定するrel属性を持つ<link>要素でのみ指定する必要があります。

fetchpriority属性

  1. <link rel="stylesheet" href="./risyu.css" fetchpriority="high">

fetchpriority属性 は、外部リソースリンクで使用することを目的としたフェッチ優先度属性であり、リンクされたリソースをフェッチして処理するときに使用される優先度を設定するために使用されます。

フェッチ優先度属性は、次のキーワードと状態を含む列挙型属性です。
high : 同じ宛先を持つ他のリソースに対して優先度の高いフェッチを通知します。
low : 同じ宛先を持つ他のリソースに対して優先度の低いフェッチを通知します。
auto : 同じ宛先を持つ他のリソースに対するフェッチ優先度の自動決定を通知します。
属性の欠損値のデフォルトと無効な値のデフォルトは両方とも auto です。

title属性

  1. <link rel="stylesheet" href="./risyu.css" title="Recommendation">
  2. <link rel="alternate stylesheet" href="./alternate.css" title="Alternate">

title属性 は、この要素に関する特別なセマンティクスがあります。title属性は、リンクのタイトルを与えます。 1 つの例外を除いて、これは純粋にアドバイスです。値はテキストです。例外は、ドキュメントツリー内のスタイルシートリンクであり、title属性によって CSSスタイルシートセットが定義されます。

<link>要素のtitle属性は、タイトルのないリンクが親要素のタイトルを継承せず、単にタイトルがないという点で、他のほとんどの要素のグローバル属性のtitle属性とは異なります。

5.DOM インターフェイス

link要素を、
直接表す
プロパティは
ありません。

<link>要素を JavaScript などで操作するには、documentのquerySelectorAll()メソッドを用いる方法があります。要素セレクタでlinkと指定して、<link>要素のリストを取得します。このメソッドの戻り値は、静的なNodeListオブジェクトであり、lengthプロパティで該当件数を知る事が出来ます。

NodeListオブジェクトは、配列の様に扱う事が出来ますが、for...in を使うとlengthプロパティなども対象となります。for...of を用いる事を推奨します。NodeListオブジェクトは、一致する要素ごとに Element を一つずつ含みます。上記の提示の時に取得できる値の形式はHTMLLinkElement インターフェイスのリストです。その様になる様に取得しているのであり、どのメソッドを用いるか, 指定する条件はどうするかにより異なります。属性セレクタと組み合わせる方法もあります。

HTMLLinkElement インターフェイスは、HTMLElement インターフェイスを継承しつつ、各IDL属性が追加されています。

他には、documentのquerySelector()メソッドを用いて、条件に一致する文書内で最初の一件を取得するとか、id属性があればdocumentのgetElementById()メソッドを用いるとか、name属性があればdocumentのgetElementsByName()メソッドを用いるとか、状況, 目的によりいろいろあります。

このページのメニューは、 〇〇 です。

  1. <p>このページのメニューは、
  2. <code id="JCD501">〇〇</code>です。</p>
  3. <script>
  4. document.addEventListener("DOMContentLoaded", function() {
  5. let _loJsList = document.createElement("ol");
  6. let _llJsLink = document.querySelectorAll("link[type='text/html']");
  7. for (var _lnJsIdx = 0; _lnJsIdx < _llJsLink.length; _lnJsIdx++) {
  8. let _loJsItem = document.createElement("li");
  9. let _loJsAnchor = document.createElement("a");
  10. _loJsAnchor.setAttribute("href", _llJsLink[_lnJsIdx].getAttribute("href"));
  11. _loJsAnchor.textContent = _llJsLink[_lnJsIdx].getAttribute("title");
  12. _loJsItem.appendChild(_loJsAnchor);
  13. _loJsList.appendChild(_loJsItem);
  14. }
  15. if (_loJsList.childElementCount) {
  16. document.getElementById("JCD501").textContent = "";
  17. }
  18. document.getElementById("JCD501").appendChild(_loJsList);
  19. });
  20. </script>

type属性の値が text/html である<link>要素の一覧から、href属性とtitle属性の値を取得する例です。例示では、メニュー形式に編集して表示する処理としています。例示で表示する為に、HTML文書の読み込みと解析が終了した時に処理するコードとしています。

6.アクセシビリティ

link要素の
暗黙的な
ARIAセマンティクスは
ありません。

<link>要素の暗黙的なARIAセマンティクスは、ありません。
No corresponding role とマークされている要素は、ARIAの暗黙的なセマンティクスを持ちませんが、意味を持ちます。この意味は、ARIAでは提供されていないロール、ステート、プロパティで表現され、アクセシビリティAPIを介して支援技術のユーザに公開される場合があります。したがって、リストされている要素のセマンティクスを上書きするのではなく、divやspanなどのセマンティクス的に中立な要素にロール属性を追加することをお勧めします。

作成者が<link>要素に明示的に指定可能なARIA ロール（役割）は、No role (役割なし) です。作成者は暗黙的なARIAセマンティクスまたは HTML 要素のネイティブ セマンティクスを上書きしてはならないことを表します。

指定できる aria-*属性はありません。

つまり、<link>要素の役割はなく、作成者は、ARIA ロール値と aria-* 属性を<link>要素に指定出来ないという事です。

7.レンダリング

  1. link {
  2. display: none;
  3. }

<link>要素のユーザーエージェントレベルのスタイルシートデフォルトでは、displayプロパティの値は none であり、この要素とその子孫はボックスやテキストシーケンスを生成しません。

現在の文書と外部のリソースとの関係を表すメタデータを記述する為の要素なので、ビジュアルメディアでボックスを生成する様な指定は行わないのが良いでしょう。 外部のリソースを埋め込む訳ではありません。埋め込む機能の要素は、他にあります。

  1. .sdvPseudo701 link, .sdvPseudo701 link::before, .sdvPseudo701 link::after {
  2. display: block;
  3. }
  4. .sdvPseudo701 link::before {
  5. content: attr(rel);
  6. }
  7. .sdvPseudo701 link::after {
  8. content: attr(href);
  9. }
  1. <div class="sdvPseudo701">
  2. <link rel="stylesheet" href="./dummy.css">
  3. </div>

メタデータを記述する空要素を表示する例のつもりです。表示する予定であれば、メタデータとしてではなく表示用でもあるデータとして別の要素で記述しておくのが良いかと思います。例として記述してみても、なんか変かなと思います。まぁ技術的な可能性としての知識として見てください。

8.気を付ける点

記述順

<link>要素の参照先リソースの内容によっては、記述の順序に意味がある場合もあります。
たとえば、CSS では優先度が同じ場合は記述順の後の物が採用されるなどです。
この場合でも、効果範囲は記述箇所以降ではなくて文書全体です。

簡単な転用

<link>要素は、外部のリソースと関われる訳で、内容に理解, 納得の上で使いましょう。 何より、書き間違えて意図と異なる結果になるとしても、その記述が作成者の意図として扱われる訳ですから。

簡単という意味では、当該ソースをそのままでも読み込む外部のリソースの内容を変えるだけで処理内容を変える事が出来ます。 つまり導入当初と運用時で同じ保証はありません。簡単であるが故の影響範囲の大きさ。管理が面倒になる点に注意しましょう。

非同期読み込み

ページパフォーマンスを上げる為に、ページレンダリングをブロックしない方法でCSSをロードする方法が検討されます。
デフォルトではブラウザは外部CSSを同期的に読み込む為、CSSがダウンロード・パースされている間は全てのページレンダリングが停止し、その為にレンダリングに遅延が発生します。
その対応策の 1 つが以下の記述です。

  1. <link rel="stylesheet" href="./risyu.css" media="print" onload="this.media='all'">

同期的に読み込む必要がある部分とファイルを分ける必要があるのと、スクリプトが有効である必要がある点が、余計に考慮しなければいけない点ですが、まぁ検討する価値はあると思います。

参考までに、このページでも採用しています。サイトとしては、採用していません。