アンカー名をつける方法

[2] HTML で特定の部分を終点アンカーとして名前をつけるには 2つの方法があります。

• a 要素の name 属性を使う方法
• id 属性を使う方法

[3] NAME 属性を使う方法は古くから使われてきました。 古い UA はこちらの方法しか対応していません。 終点アンカーを A 要素としてマーク付けし、 更にその要素の NAME 属性で名前を指定します。 例:

  <A NAME="anchor-name">anchor text</A>

[4] もう一つの ID 属性を使う方法は、 任意の要素を終点アンカーとするにあたって、 その名前を ID 属性の値とします。 (ID 属性の役割は終点アンカー名の指定だけではありません。 詳しくは id 属性の説明を参照。)

この方法は比較的新しいもので、つい最近まで互換性に難あり、 NAME 属性と併用するのが望ましい、 とされてきました。現在ではほとんどの UA が対応しており、単独で用いても問題ないでしょう。

例:

  <p id="anchor-name">Paragraph text</p>

アンカー名の文字列

[5] アンカー名には使える文字に制限があります。 NAME 属性にはほとんどの文字が使えますが、 ID 属性では制限があります。

まず、 SGML (DTD) 的にみると、 HTML4 では NAME は CDATA, ID は ID とされています。

歴史的には、 NAME 属性も SGML の ID か NMTOKEN くらいにしたかったようなのですが、 広まってしまった実装と用例のために現状追認せざるを得なかったようです。

CDATA である NAME では、 文書文字集合に存在する全ての文字が使えます。 (HTML2.0 と HTML3.0 draft では ISO/IEC8859-1, HTML2.x と HTML4 と XHTML では ISO/IEC10646 の U+10FFFF 以下の文字。 明示 SGML宣言のない HTML (不思議マーク付け文書を含む。) では文書の符号化文字集合で表現可能な全ての文字。) 引用符で囲んで記述する時には実体参照を使って表現することもできます。 例:

  <A NAME="&lt;anchor name&gt;">anchor text</A>
  <!-- 終点アンカー名は「<anchor name>」 -->

一方、 ID である ID では、最初の文字は名前開始文字, それ以降の文字は名前文字から選ぶ必要があります。 また、実体参照で表現することは出来ません。

[8] さて、 IW:HTML4:"struct/links.html#idx-anchor-7" は、 HTML 4 のアンカー名は US-ASCII の文字で構成しないといけないとしています。 ですから アンカー名 というアンカー名は HTML 4 では不正となります。

一方で、 IW:HTML4:"struct/links.html#anchors-with-id" には US-ASCII にない文字を使ったアンカー名の例示があります。

実際の世界では非 ASCII 文字のアンカー名はよく使われます。 例えば用語集で用語を終点アンカーとするときに、 アンカー文字列をそのままアンカー名にすることはよく行われます。

非 ASCII 文字などの扱いに関して断片つき URI とアンカー名を比較して終点アンカーを決定する際の注意が IW:HTML4:"appendix/notes.html#non-ascii-chars" にあります。

アンカー名の名前空間

[6] 終点アンカー名は、当該文書中で一意である必要があります。 HTML4 によると、 id 属性によるアンカー名と name 属性によるアンカー名は同じ名前空間です。 つまり、同じ名前で別の要素を終点アンカーとすることは出来ません。 違う属性を使ってもです。 (IW:HTML4:"struct/links.html#idx-anchor-4") 悪い例:

  <a name="anchorName">Foo</a>...
  <span id="anchorName">Bar</span>

HTML 4 によれば、同じ要素に二つの属性で同じ名前をつけることは構いません。 かつて id 属性がそれ程普及していなかった頃には、 互換性を保つ技法として重宝されました。 例:

  <a name="anchorName" id="anchorName">anchor</a>

次の例は、 HTML 4 の説明を厳密に解釈すれば間違いでしょうが、 さして問題はないと思われます。

  <h2 id="intro"><a name="intro">Introduction</a></h2>

メモ