構文

[64] 開始タグと終了タグは必須です。

属性

[11] a 要素はアンカーを定義します。 name 属性や id 属性を使うと、 終点アンカーにすることができます。 href 属性を使うと、始点アンカーにすることができます。

この3つの属性は、1つも使わなくても構いませんし、3つとも使っても構いません。

状態

[56]

DOM インターフェイス

[70] HTMLElement, HTMLDatabinding

内容

[1] a 要素の子孫要素に a 要素は存在できません XHTML 1.0。

[2] つまり、a 要素の入れ子は禁止されています。なのにした場合の挙動は未定義ですが、可能性としては

• [3] 両方とも「意図したように」扱う。内側の a 要素の部分はリンク先が外側と違う、みたいな。
• [4] 外側の a 要素を無視する。
• [5] 内側の a 要素を無視する。
• [6] 外側の a 要素を、内側の a 要素の開始タグ直前で閉じる。

辺りがあるでしょう。

[7] WinIE 6.0 の動作は >>4 です。

[20] a を入れ子にすることはできません。

[27] 仕様書:

• HTML 4 12.2.2 Nested links are illegal IW:HTML4:"struct/links.html#idx-link-6"
• XHTML 1.0 http://www.w3.org/TR/xhtml1/#prohibitions

[28] 文書中で一意であること: 文書中で複数の href 属性付き a 要素の内容の文字列が等しい時は、 その href 属性の値 (リンク先) も等しいのが望ましいとする考え方があります。

この考え方に従うと、例えば

あれの<a href="usage-1">使い方</a>や、
これの<a href="usage-2">使い方</a>。

は好ましくないことになります。

この考え方の背景には、 同じように見えるものは同じように機能するべきだ (その方が分かりやすい) という考察があります。

先の例は

<a href="usage-1">あれの使い方</a>や、
<a href="usage-2">これの使い方</a>。

とした方がより分かりやすいと思われます。

[29] 注意: >>28 は絶対そうでなければならないというほどのことでもありません。 その場その場で文脈に応じて何が一番好ましいのか考える必要があります。

例えば、

<p>あれ:
      <a href="usage-1">使い方</a>、
      <a href="example-1">実例</a>。</p>
<p>これ:
      <a href="usage-2">使い方</a>、
      <a href="example-2">実例</a>。</p>

は >>28 の例と内容は似ていますが、同じ対処法を採ることはできません。 無理に同じ方法を適用すると、

<p><a href="usage-1">あれの使い方</a>、
<a href="example-1">あれの実例</a>。</p>
<p><a href="usage-2">これの使い方</a>、
<a href="example-2">これの実例</a>。</p>

とでもなるのでしょうが、かえって分かりにくいように思えます。

[30] >>28-29 のような場合の別の対処法として、 title 属性によって説明を加えるのがよいとも言われます。

例えば >>29 の例では

<p>あれ:
      <a href="usage-1" title="あれの使い方">使い方</a>、
      <a href="example-1" title="あれの実例">実例</a>。</p>
<p>これ:
      <a href="usage-2" title="これの使い方">使い方</a>、
      <a href="example-2" title="これの実例">実例</a>。</p>

となります。 これなら悪くはなさそうです。

[31] 始点リンク内容は自己完結している方が良いか: href 属性付き a 要素の内容の文字列はそれだけでリンク先がわかる方が良いと言われることがあります。

そしてその根拠として、文書中のリンクの一覧を抽出した時に良く分からないものが沢山出てきて困るというのが挙げられます。 (この根拠は >>28 の主張の根拠にも使われます。)

[32] >>31 のような主張は元々 here症候群への (誤った) 反論として生じたのではないかと考えられますが、 しばしば絶対的な基準であるかのように語られます。

確かにリンク一覧に here が20個も並んでいたり、 例が数十個あってそれぞれリンク先が違っていたりすると、 リンク一覧を抽出した意味も無くなります。

しかし HTML 文書に対するリンク一覧はあくまで本来の表示に対する補助的な機能であるべきで、 それだけで完結させられるようにしろというのは主張に無理があります。 link 要素ならともかく、 a 要素は普通の文章中でリンクするための要素です。 a 要素のリンクは元々文脈の中に存在しているのです。 適当な文から適当な単語を1つや2つ抜き出しても必ずしも意味のある使い方が期待できないのと同様、 リンクを文脈なしで抜き出してもさして役に立たなくて当然なのです。 (それを鑑みると、 Webブラウザのリンク一覧は、 一覧中の項目を選ぶと本文中の対応する部分がどこか表示されるくらいの機能を備えているくらいでないと駄目でしょう。)

[69] op (独自XML名前空間)

レンダリング

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

[14] HTML 4 仕様書の触れるレンダリング例:

• 始点アンカー
  • 下線を引く
  • 色反転させる
  • 既読かどうかでレンダリング方法を変える
  • 活性化 (マウスでかちっ, 鍵盤や音声で指示など) すると終点資源を取出す (設定によってはそれを表示する)
• 終点アンカー
  • 特別にレンダリング方法を変えることはしないのが普通

[21] a 要素によって定義されたリンクを活性化すると、 UA は通常リンクをたどります HTML 4 17.11.2。

処理

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

不思議解釈

[9] 今更不思議マーク付けの説明なんて読んでも驚きはしないと 思っていたのですが、 <a name="hogehoge"> で閉じタグ </a> は無いのが普通とかいうのを読んで驚いてしまいました:-)

[23]

<a href="#" title="このようになります">裏技大公開</a>

title属性を使って説明をいれることが簡単にできるようになります。 HTMLの話をするとtitle要素というものもありますが、 これとは別にtitle属性というものもあり、共通の属性ということで どの要素でも持っている属性です。

どの要素でもと言いながら、なぜ a 要素型を使っているのか。 そしてなぜ空の素片識別子の同文書参照へのリンクとしているのか。 不思議マークアッパーの行動はまさに不思議。

出典: マウスを重ねたときに説明をつける - Webデザインの教科書 :: オシャレチップス http://oshare.chips.jp/d_tech/text02.html (2005年4月付け、2005年4月現在)

[24] 歴史的にはともかく、 a の中に入れることができるのは行内要素だけです。 にもかかわらず、 li とかを入れられるという解説が未だに後を絶ちません・・・。 リスト項目をリンクにしたいと思うのはもっともですが、 できないものはできないのでしてね・・・。

[25] 終了タグの省略: 終点アンカーとして (つまり name 属性と共に) 使われている a 要素で終了タグを省略したものがよく見られます。 (もちろん間違いです。)

解釈は実装依存になりますが、 Gecko だとブロック要素の開始タグが見つかるとそこでいったん中断し、 開始タグの後に再度元の a 開始タグがあるかのように扱われます。 (他の行内要素でも同じような感じ。)

だから同じ name が複数 (たぶん大量に) 出現したりしてしまいまして、おかしなことになります。

ちなみに W3C の仕様書で XMLspec から XHTML に変換したものの中に XML の空要素の構文を使ったものが登場しまして、 Gecko が HTML として構文解析すると / はごみとみなされるので同じ現象が発生します。

歴史

[34] a要素型は、HTMLの最大の特徴の一つですから、 HTMLの一番初めから存在した要素型だと考えられます。 HTML 1991

[42]

• [78] ComMentor, 2024-08-15T15:24:00.000Z, 2001-12-25T16:31:31.428Z https://web.archive.org/web/20011225162855/http://www-diglib.stanford.edu/rmr/TR/Arch_WWW95.html
• [77] S-HTTP
• [76] Toward Reliable, Interoperable Links, 2014-02-24T23:06:53.000Z, 2024-08-15T15:23:34.117Z https://www.w3.org/People/Connolly/drafts/link-rpc.html

<A name="EMPTY-ANCHOR" id="EMPTY-ANCHOR"></A>
<EM>...some HTML...</EM>
<A href="#EMPTY-ANCHOR">Link to empty anchor</A>

例

[12] 単純な始点アンカーの例

For more information about W3C, please consult the 
<A href="http://www.w3.org/">W3C Web site</A>. 

(HTML 4 仕様書より)

レンダリング例:

For more information about W3C, please consult the W3C Web site.
                                                   ~~~~~~~~~~~~

[15]

...text before the link...
For more information, please consult <A href="./one.html#ANCHOR-ONE"> anchor one</A>.
...text after the link...

(HTML 4 仕様書より、改)

同じ階層の one.html (>>13) の終点アンカー ANCHOR-ONE への連結の例。

[13] 単純な終点アンカーの例

...text before the anchor...
<A name="ANCHOR-ONE" id="ANCHOR-ONE">This is the location of anchor one.</A>
...text after the anchor...

(HTML 4 仕様書より、改)

[16] 始点アンカーかつ終点アンカーな例

I just returned from vacation! Here's a
<A name="ANCHOR-TWO" id="ANCHOR-TWO" 
   href="http://www.somecompany.com/People/Ian/vacation/family.png">
photo of my family at the lake.</A>.

(HTML 4 仕様書より、改)

[18] 目次の例

<H1>Table of Contents</H1>
<P><A href="#section1">Introduction</A><BR>
<A href="#section2">Some background</A><BR>
<A href="#section2.1">On a more personal note</A><BR>
...the rest of the table of contents...
...the document body...
<H2><A name="section1">Introduction</A></H2>
...section 1...
<H2><A name="section2">Some background</A></H2>
...section 2...
<H3><A name="section2.1">On a more personal note</A></H3>
...section 2.1...

[19] >>18 を id に書き換えた例

<H1>Table of Contents</H1>
<P><A href="#section1">Introduction</A><BR>
<A href="#section2">Some background</A><BR>
<A href="#section2.1">On a more personal note</A><BR>
...the rest of the table of contents...
...the document body...
<H2 id="section1">Introduction</H2>
...section 1...
<H2 id="section2">Some background</H2>
...section 2...
<H3 id="section2.1">On a more personal note</H3>
...section 2.1...

(HTML 4 仕様書より)

[40] The SMIL 3.0 Linking Modules (2008-12-02 00:45:09 +09:00 版) http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-extended-linking.html#edef-a