link

link 要素 (HTML)

[6] link 要素は、当該 HTML 文書そのものを始点アンカーとするハイパーリンクを記述するための要素です。

仕様書

[20] 仕様書:

[21]

開始タグ
必須
終了タグ
禁止 (HTML 4), 必須 (XHTML 1)
内容模型
EMPTY (強制空要素型)
出現できる文脈
head 要素内、任意個

属性

[29] link 要素内容属性
属性名属性値既定値説明状態出典
bulletin-date満期 (IETF I-D)
bulletin-expires満期 (IETF I-D)
bulletin-image%URI;満期 (IETF I-D)
bulletin-text%Text;満期 (IETF I-D)
charset%Charset(なし)リンク先 charset のヒント[HTML 4]
duration
hreflang%LanguageCode(なし)リンク先言語のヒント[HTML 4]
integrity
media%MediaDesc[HTML 4]
methods
rev%LinkTypes関係(逆)[HTML 4]
speed
src
target%FrameTarget[HTML 4] 非推奨
type%ContentType(なし)リンク先媒体型のヒント[HTML 4]
urn
version

[4] HTML4 によると lang 属性も dir 属性も対象は title 属性だけのようです。

[39] 似た機能を持つ a 要素とは違って、 targetdownload はありません。


[104] 使える属性は、 rel 属性値によって変化します。

[105] link 要素属性の制約
semantics
リンクの種別
rel
rel
itemprop
itemprop
crossorigin
crossorigin
media
media
nonce
nonce
integrity
integrity
hreflang
hreflang
type
type
referrerpolicy
referrerpolicy
title
title
sizes
sizes
as
as
scope
scope
workertype
workertype
updateviacache
updateviacache
color
color
semantics
外部資源リンク
rel
必須
itemprop
禁止
crossorigin
integrity
rel=stylesheet
type
media
hreflang
○ (ヒント)
referrerpolicy
title
rel=stylesheet の時特別
nonce
sizes
rel=icon, rel=apple-touch-icon
as
rel=preload
scope
rel=serviceworker
workertype
rel=serviceworker
updateviacache
rel=serviceworker
color
rel=mask-icon
semantics
ハイパーリンク
rel
必須
itemprop
禁止
crossorigin
無意味
nonce
無意味
integrity
禁止
crossorigin
無意味
type
○ (ヒント)
media
○ (ヒント)
hreflang
○ (ヒント)
referrerpolicy
title
sizes
禁止
as
禁止
scope
禁止
workertype
禁止
updateviacache
禁止
color
禁止
semantics
マイクロデータ
rel
禁止
itemprop
必須
nonce
無意味
integrity
禁止
crossorigin
無意味
hreflang
無意味
type
無意味
media
無意味
referrerpolicy
無意味
title
無意味
sizes
禁止
as
禁止
scope
禁止
workertype
禁止
updateviacache
禁止
color
禁止
[106] 1つの link 要素外部資源リンクかつハイパーリンクとなることが認められていますから、 この表で「禁止」であっても属性が指定されても構わない場合があります。

文脈

[83] XML Sitemapsurl 要素子要素として使えます。

状態

[96]

dropzone
DOMTokenList
relList
DOMTokenList

レンダリング

[13] ハイパーリンクの処理も参照。

[22] レンダリング例:

処理

[14] ハイパーリンクの処理も参照。

検索円陣

[24] 検索円陣に対しては、特に次のようなものへの link が有用です。 HTML 4

  • 文書の他の言語で書かれた版
  • 文書の他の媒体向け (例: 印刷用) に書かれた版
  • 文書群の開始頁

挿入手順群、削除手順群、属性変更手順群

[91] 次の処理が定義されています。

詳細は各リンク型の項を参照。

HTMLLinkElement インターフェイス

[92] HTMLLinkElement インターフェイスメンバー

歴史

HTML2

[30] 普通著者、関係する索引用語集、 古い版や新しい版、 文書階層、スタイル・シートなど関連付ける資源、 その他を示すために使います。 RFC 1866 5.2.4

HTML4

[1] HTML 4 では必須属性なしなんですけど、本当にそれでいいのでしょうか? 多分 href 属性は必須でしょう。

[5] こんな要素にまで onmouse* / onkey* 属性があるなんて、徹底してますね。

XHTML2

[51] RDFa が取り込まれた XHTML2 の第6次案では link 要素meta 要素子供にできるようになっています。また、 文書中ほとんどどこででも使えるように変更されています。

Web Linking

[56] RFC 5988link 要素Web Linking直列化の1方式として取り扱っていました。

[57] 2010年に出版された RFCHTML4 をベースにした規定というのは甚だ時代遅れ感がありますがw
[59] RFCHTML について規定する正当性は特になく、若干遠慮して本文ではなく附属書になっているようですw (しかし附属書参考であるとは書かれていないので、規定の一部なのでしょうが・・・。)

[60] HTML5リンク型の定義を IANA の登録簿にしようと IETF 系の人達が HTML WG でロビー活動を行なっていたこともありましたが、採用されておらず、 あくまで RFC の規定は IETF 側からの勝手な見解となっており、 一般的な HTML の解釈とは一致していないようです。

[61] HTML4link 要素href 属性対象URIrel 属性リンク関係型、 当該HTML文書全体に関連付けられた URL文脈とする Web Linking リンクに写像することができます。 >>58

[62] HTML4 が定義するリンク型IETF 側でも登録されており、そのまま使うことができます。 >>58

[63] 実際には HTML4リンク型と同名であっても別の出典から登録されたものがあり、 その意味が必ずしも一致しているとは断言できないのですが・・・。

[64] 逆に拡張リンク関係型 (URL で表されるもの) を HTML4 で表現するにあたっては、幾つかの方法が考えられます。例えば、

... といったような方法が考えられます。従ってリンクを使う応用はそれぞれ HTML4 でどう直列化するべきかを定義する必要があります。 >>58

[68] 既に HTML5 が廃止した profile 属性をわざわざ推すあたりが時代錯誤感激しいですね。というか著者が profile 属性存続主義者なのでしょうが。しかし応用依存にして明確に決めないで、 相互運用性をどうやって確保するつもりなのでしょう。
[76] HTML4 でも HTML5 でも rel 属性値ASCII大文字・小文字不区別であり、 Web Linking では URL大文字・小文字区別である点も互換性がありませんが、特に言及はありません。

[69] HTML では IANA 未登録のリンク関係型URL でないものがよく使われていることがわかっており、適合する HTML の実装はこれを誤りとはみなさずに、局所的な適用範囲の (当該文書内で意味を持つ) リンク関係型と考えるべきです。 >>58

[70] 本当に、なんで HTML利用者エージェントの適合性を規定しているのでしょうね・・・。 それは HTML の仕様の役目でしょうに・・・。どうしてもそれを規定したいのなら、 HTML4Web Linking の両方を実装するUArel 属性をこう解釈しなければならない、ともっとはっきり定義すれば良いのに。

[71] IANA に登録されていても HTML4 で定義されていないリンク型もたくさんありますが、 これを HTML4 でどう表現するのかについてはなぜか一切言及がありません。

[72] HTML4alternate stylesheet の組には特別な意味が与えられているため、 Link: 欄として直列化するときには単一のリストとして、 rel="alternate stylesheet" のように表すべきです。 >>58

[73] HTML4 の定義する属性のいくつかは Link: 欄では明確に定義されていませんが、忠実に再現するために拡張引数としてそのまま直列化することもできます。 >>58

[74] target 属性などのことでしょう。それならそれで定義しておけばいいのになぜ曖昧にするのでしょうね。
[75] しかしなぜ link 要素Link: 欄の対応関係を定義するのか、という肝心の意図が全然説明されていません。これは atom:link 要素についての同様の規定でも同じです。

実装

[7] 大昔から定義されている要素型であるにもかかわらず、 長らく Lynx などの一部WWWブラウザ等しか実装しない瀕死状態でしたが、 外部スタイル・シートの指定に使われたことで一躍有名となり、 意味マーク付けへの回帰の流れの中で再び注目されるようになりました。

現在では MozillaOpera のような有名な WWW ブラウザも目立つ形で実装し、 IE でも利用可能にする拡張 tool が幾つも公開され、同時に HTML 文書に link 要素を明記する流れが広まっています。

[17] NCSA Mosaic 3.0 とか iCab とか、 昔から実装はあったことはあったのだけど。。。

[8] link 要素型を使って前後の文書などの関係を明記し、 Web ブラウザの UI を通して利用可能となることで、 Web browsing の効率は著しく向上します。

[16] >>7 多くの解説書に表示されないから意味が無い とまで切り捨てられたからなあ。悲惨だよね。

[9] Bug 2800 - No UI for HTML2 "LINK" element <http://bugzilla.mozilla.org/show_bug.cgi?id=2800>: Mozilla での link 要素の実装について。

[15] Excel (少なくても Excel 10) は、 <link id="shLink" href="foo.files/sheet002.htm"> とか <link id="shLink"> とかを一つの文書内に一杯出力します。 idrel をまちがえているとしかおもえません(w

[40] libwwwHTML構文解析器は1996年7月20日のRelease 4.1b3でlinkを実装しました。 (名無しさん [sgea])

[43] link要素とCSSのみでナビゲーションを作る <http://overknee.info/2006/08/20/125918>

Geckolinka と同じようにリンクとしてレンダリングする。 (名無しさん 2006-08-23 00:15:14 +00:00)

[45] FirefoxでOperaのようなlink要素を表示させる「Mozeraナビ=叢ナビ」 (インターネット帳面) (2007-02-09 08:54:37 +09:00 版) <http://ima.pandach.com/cgi-bin/mt/2006/09/firefoxoperalink.php> (名無しさん)

[46] link 要素を可視化してみる - double-team.org (2007-02-08 18:33:35 +09:00 版) <http://www.double-team.org/2007/02/07/000034/> (名無しさん)

不思議解釈

[35] Stricter 系過激派の中には、ナビゲーション的な記述が body 内に含まれるのは好ましくなく、 すべて link 要素を使って記述されるべきだと考える人もいます。

[36] ながくあってないもの状態の時代が続いたので、 未だに多くのブラウザが対応していないなどと嘘を平気で言う人がよくいます。 (名無しさん [sage] 2005-12-13 11:13:11 +00:00)

[23]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
  <TITLE>Chapter 2</TITLE>
  <LINK rel="Index" href="../index.html">
  <LINK rel="Next"  href="Chapter3.html">
  <LINK rel="Prev"  href="Chapter1.html">
</HEAD>
...the rest of the document...

(HTML 4 仕様書より)

[25] 色々な言語の版へのリンクの例

<HEAD>
<TITLE>The manual in English</TITLE>
<LINK title="The manual in Dutch"
      type="text/html"
      rel="alternate"
      hreflang="nl" 
      href="http://example.com/manual/dutch.html">
<LINK title="The manual in Portuguese"
      type="text/html"
      rel="alternate"
      hreflang="pt" 
      href="http://example.com/manual/portuguese.html">
<LINK title="The manual in Arabic"
      type="text/html"
      rel="alternate"
      charset="ISO-8859-6"
      hreflang="ar" 
      href="http://example.com/manual/arabic.html">
<LINK lang="fr" title="La documentation en Fran&ccedil;ais"
      type="text/html"
      rel="alternate"
      hreflang="fr"
      href="http://example.com/manual/french.html">
</HEAD>

(HTML 4 仕様書より、改)

[26] 印刷版へのリンクの例

<HEAD>
<TITLE>Reference manual</TITLE>
<LINK media="print" title="The manual in postscript"
      type="application/postscript"
      rel="alternate"
      href="http://example.com/manual/postscript.ps">
</HEAD>

(HTML 4 仕様書より、改)

[27] 文書群の最初の文書へのリンクの例

<HEAD>
<TITLE>Reference manual -- Page 5</TITLE>
<LINK rel="Start" title="The first page of the manual"
      type="text/html"
      href="http://example.com/manual/start.html">
<LINK rel="Prev" title="Page 4"
      type="text/html"
      href="http://example.com/manual/page4.html">
<LINK rel="Next" title="Page 6"
      type="text/html"
      href="http://example.com/manual/page6.html">
</HEAD>

(HTML 4 仕様書より、改)

他との関係

[28] HTTP には Link: (古くは WWW-Link: とも) という実体頭欄があります。 Linklink の弟にあたります。

HTML 4 12.4.1 Resolving relative URIs <IW:HTML4:"struct/links.html#resolving-relative-uris"> の注には、 Linklink と同じように扱うと書いてあります。 (が、基底URI の話なので、基底 URI 限定のメモかもしれません。)

メモ

[10] HTML 4 でも accesskey 属性は無いんだね。

[11] >>10 文書が個々に指定するよりブラウザの UArel / rev ごとに決まってた方がいい。 rel=prev == とか。

[19] Subotnik: Das 'link'-Element in (X)HTML <http://www.subotnik.net/html/link.html> (ドイツ語): link 要素についてのありとあらゆる情報のリンク集。 (ドイツ語が読めなくてもリンク集なので大丈夫です。)

[31] linkのススメ - 駄的HTML改善計画 <http://car.s35.xrea.com/better/link.php>

[42] Link Toolbar とかで URIコピーができないのが不便・・・。 (名無しさん 2006-06-21 23:04:45 +00:00)

[44] 我的春秋: link 要素をナビゲーションに利用することの注意点(改訂) (2007-02-09 08:54:04 +09:00 版) <http://my-chunqiu.cocolog-nifty.com/blog/2007/02/link__be31.html> (名無しさん 2007-02-09 00:07:14 +00:00)

[47] パンくずリストがベストとは限らない | WWW WATCH (2007-02-10 14:54:24 +09:00 版) <http://hyper-text.org/archives/2007/02/topic_path.shtml> (名無しさん 2007-02-10 05:56:55 +00:00)

メモ

[18] 2003-08-30 23:52:46 +00:00 名無しさん: なぜかこの WikiPage が <IW:Google:"阪大ちゃんねる"> で20位、 <IW:Google:"阪大ちゃんねろ"> 及び <IW:Google:"大阪大学ハイパーリンク"> で1位ですよ。なんでやねん。

[37] DPML Transit Link Protocol (2006年1月1日付URI scheme仕様書) <http://dpml.net/transit/technical/link.html> (名無しさん [sage])

[38]>>37: link:module:dpml/metro/dpml-metro

(名無しさん [sage])

[41] <http://www.re.be/css2xslfo/1_3_2/manual.pdf#page=26>:

a[href] { link: href }

(名無しさん [sage])

[48] Document specific background and foreground control (2007-02-26 22:14:03 +09:00 版) <http://web.archive.org/web/19961020032532/http://www3.netscape.com/assist/net_sites/bg/index.html> (名無しさん)

[49] XML.com: Building the Annotated XML Specification (Tim Bray 著, 2007-03-17 18:34:30 +09:00 版) <http://www.xml.com/pub/a/98/09/exexegesis-0.html?page=2> (名無しさん)

[50] Re: [XHTML 2] renaming :link to :unvisited (Bert Bos 著, 版) <http://lists.w3.org/Archives/Public/www-style/2006Sep/0278.html> (名無しさん)

[52] (X)HTML5 Tracking ( 版) <http://html5.org/tools/web-apps-tracker?from=3720&to=3721>

[53] IRC logs: freenode / #whatwg / 20100807 ( 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20100807#l-69>

[54] draft-hammer-discovery-03 - LRDD: Link-based Resource Descriptor Discovery ( ( 版)) <http://tools.ietf.org/html/draft-hammer-discovery-03>

[55] Web Applications 1.0 r6388 Disallow <link> from having both rel= and itemprop=. This might change back if there are compelling use cases, but in the meantime it seems like this is likely to catch errors. This also effectively disallows rel= on <link>s in <body>.]] ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=6387&to=6388>

[77] Building Smartphone-Optimized Websites - Webmasters — Google Developers ( ( 版)) <https://developers.google.com/webmasters/smartphone-sites/details>

[78] Document specific background and foreground control ( ( 版)) <http://web.archive.org/web/20020806181026/http://wp.netscape.com/assist/net_sites/bg/>

[79] WWWLibrary_1.1 ( ( 版)) <http://lists.w3.org/Archives/Public/www-talk/1992NovDec/0206.html>

[80] IRC logs: freenode / #whatwg / 20130408 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20130408#l-919>

[81] Web Applications 1.0 r8222 Clarify the activation behaviour of <link> elements. ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=8221&to=8222>

[84] Flip ahead browsing (Windows) ( ( 版)) <http://msdn.microsoft.com/en-us/library/ie/jj883726(v=vs.85).aspx>

[85] Re: LINK only in HEAD? ( (Ian Hickson 著, 版)) <http://lists.w3.org/Archives/Public/public-webapps/2013OctDec/0638.html>

[86] HTML+RDFa 1.1 ( ( 版)) <http://www.w3.org/TR/2013/REC-html-rdfa-20130822/#extensions-to-the-html5-syntax>

[87] Web Applications 1.0 r8390 Update how the interaction with CSS style sheets and CSSOM is defined. ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=8389&to=8390>

[88] Web Applications 1.0 r8390 Update how the interaction with CSS style sheets and CSSOM is defined. ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=8389&to=8390>

[89] Re: color: NCSA Mosaic, Netscape, and HTML3 ( (Lou Montulli 著, 版)) <http://lists.w3.org/Archives/Public/www-style/1995Jul/0080.html>

[2] Allow pingback/prefetch/stylesheet links in body · whatwg/html@179983e ( 版) <https://github.com/whatwg/html/commit/179983e9eb99efe417349a40ebb664bd11668ddd>

[3] Merge pull request #22 from estark37/link-attr · w3c/webappsec-referrer-policy@a52cc62 ( 版) <https://github.com/w3c/webappsec-referrer-policy/commit/a52cc624852b77b63cb18ad79d4a2a67255fb9d5>

[12] Google ウェブマスター向け公式ブログ: 検索エンジンとの相性を考慮した無限スクロールのベストプラクティス ( 版) <http://googlewebmastercentral-ja.blogspot.jp/2014/02/infinite-scroll-search-friendly.html>

各ページで、<head> 内に rel=next と rel=prev の値を含めるページ指定を行います。<body> 内のページ指定の値は、ウェブマスターが意図しないところで、ユーザー生成コンテンツによっても挿入される場合があるため、Google のインデックス登録では無視されますので、ご注意ください。

[93] Make <link rel="stylesheet"> work inside shadow trees (domenic著, ) <https://github.com/whatwg/html/commit/43c57866c2bbc20dc0deb15a721a28cbaad2140c>

[94] Use link referrerpolicy attribute when obtaining the resource (estark37著, ) <https://github.com/whatwg/html/commit/b209fa011d8d1c315cbca973aba0ae40d335b67c>

[95] Ignore title="" for <style> and <link> in shadow trees (domenic著, ) <https://github.com/whatwg/html/commit/449dee2307c52d59253af61d884ae3a5450a2a02>

[97] Add <link nonce> (mikewest著, ) <https://github.com/whatwg/html/commit/1d4fc66465169312deaa8945fcb359813abc3fe0>

[98] Upstream SRI's 'integrity' attribute (mikewest著, ) <https://github.com/whatwg/html/commit/4c5066c171610e0c8300a58baf4f94816044cedc>

[99] Editorial: refine link-element section readability (sideshowbarker著, ) <https://github.com/whatwg/html/commit/9d0d388288e7fd1201df1ea867af1df27b7cfdff>

[100] Cut distracting statement about external resources (sideshowbarker著, ) <https://github.com/whatwg/html/commit/2cc7329adba04fb2f6927c05183fbb061c73c62c>

[101] IMPLEMENTING THE LINK ELEMENT () <http://www.hixie.ch/specs/html/link/001>

[102] () <http://www.hixie.ch/specs/html/link/002>

[103] Update <link>'s processing model to work well for preload (domenic著, ) <https://github.com/whatwg/html/commit/eb5d1cc61cdfe7d946618cc39a1f7c3e5904a03b>

[107] Clarify the status of <link> elements support in a shadow tree (hayatoito著, ) <https://github.com/w3c/webcomponents/commit/f686895fd6128ce0afa13369f4d9f7c010f68265>

[108] Should <link> work inside Shadow DOM? · Issue #628 · w3c/webcomponents () <https://github.com/w3c/webcomponents/issues/628>

[109] Centralize checks for <a>, <area>, <form>, and <link> (annevk著, ) <https://github.com/whatwg/html/commit/f3c354add894e1ac01e3732ff976aa9874a77b3f>

[110] Allow UAs to conditionally block on stylesheet loading (domfarolino著, ) <https://github.com/whatwg/html/commit/42dd707cbfc0f5d8f88b04ef270f4fcb121a10ff>

[111] Align the title attribute with implementations (annevk著, ) <https://github.com/whatwg/html/commit/2102913b313078cd8eeac7e81e6a8756cbd3e773>

[112] Add <link> rel="modulepreload" (domenic著, ) <https://github.com/whatwg/html/commit/7c28027b80208aa6b126fa7b086c44877f584178>

[113] WebSub () <https://w3c.github.io/websub/#discovery>

In the absence of HTTP Link headers, and if the topic is an XML based feed or an HTML page, subscribers MUST check for embedded link elements.

[114] WebSub () <https://w3c.github.io/websub/#discovery>

If the topic is an XML based feed, publishers SHOULD use embedded link elements as described in Appendix B of Web Linking [RFC5988]. Similarly, for HTML pages, publishers SHOULD use embedded link elements as described in Appendix A of Web Linking [RFC5988].

[115] WebSub () <https://w3c.github.io/websub/#discovery>

Since <link> has been limited to being placed in the <head> for many years, some consuming code might only check the <head>. Therefore it is more robust to place the <link> tags only in the HTML <head> rather than in the <body>.

[116] まるで今は body 内でも認められているみたいな書き方だけど、 rel=selfrel=hub も認められてないんだよなー。