アンカーの最適化

Updated / Published

従来の HTML では a要素の name属性にアンカー名を付与してウェブページ内の特定箇所をリンク先として参照できるようにする目的地アンカー(終点アンカー)が用いられてきましたが、XHTML では name属性は廃止され、旧来の目的地アンカーのテクニックは利用できません。本文書では HTML4 の規格から新たに登場した id属性name属性に代わって指定することでアンカーを最適化させる手法を解説します。

アンカー内容を空にして使う旧来の手法について

a要素に name属性を指定する目的地アンカー(終点アンカー)は、従来の HTML によく用いられる手法ですが、開始タグと終了タグの間、つまりアンカー内容を空にして使われていることがあります。これはアンカー内容を空にすることで、目的地アンカーを視覚的にわからないように仕込むことを目的に使っているのでしょうが、標準技術という視点からは好ましい手法とは言えません。

たしかに、HTML4, XHTML1.0, XHTML1.1 の各バージョンの a要素の部分の DTDと仕様を確認してみても、開始タグと終了ダグは必須になっており、内容に a要素以外のインライン要素を含むことができるのですが、必ずテキスト等の何かしらのインライン内容を含まなければならないとは記されていません。つまり、アンカーの内容は空でも文法的には間違いではないのです。しかし、アンカーの内容が空では、HTML は構造化を示す言語であるにも関わらず、その部分が何であるかを明示することができていないことになります。また、仕様の邦訳の注釈には、ユーザエージェントは、空のA要素が生成するアンカーも発見できるべきだが、発見できないユーザエージェントもある とあるように、全くの不具合がないわけでもないようです。それでは、視覚的にわからないように仕込む条件を満たした上で、目的地アンカーの代替となる手法について考えてみましょう。

name属性に代わって id属性を使う

id属性は HTML4 の規格から新たに登場した共通属性(汎用属性)です。共通属性というように name属性のように限られた要素型(a要素, applet要素, frame要素, form要素, iframe要素, img要素, map要素)だけではなく、ほぼ全ての要素(base要素, head要素, html要素, meta要素, script要素, style要素, title要素を除く)に指定することができます。従来はウェブページ内の特定箇所を参照する方法は a要素の name属性による目的地アンカーのみに限られていましたが、id属性は他の要素に指定してもウェブページ内の特定箇所をリンク先として参照させることが可能です。

なお、XHTML1.0 では name属性は廃止予定とされ、id属性を参照できない UA との後方互換のために id属性と name属性の両方を同じ値で設定することが認められています。しかし、XHTML1.1 では完全に廃止され、XHTML1.1 以降の規格においては要素の識別に id属性のみを使用することになります。id属性の用法は主に以下の2点にまとめることができます。

  1. name属性の目的地アンカー(終点アンカー)の代替となる。
  2. スタイルシート(CSS など)やスクリプト(JavaScript など)の目印となる。

Web標準技術の視点において、過去の規格において有効であった name属性を使用するのではなく、将来的にも通用する id属性を採用するのは至極当然のことでしょう。さらに id属性は、ほぼ全ての要素型に定義できる共通属性であるため、name属性のように使い方が限定されないので、これまで視覚的にわからないように仕込みたいがために開始タグと終了タグの間にあるアンカー内容を空にした目的地アンカーが作成されてきましたが、空のアンカーに代わって他の相応しい要素に id属性を指定することで、開始タグと終了タグの間を空にしなくても済むのでなお良いといえるでしょう。

空アンカー、及び name属性を撤廃せよ

<a name="section1"></a>
<h2>セクション1</h2>

たとえば、各見出し毎に a要素の name属性で目的地アンカーを設置していた場合、これを id属性で代替してみましょう。

<h2 id="section1">セクション1</h2>

たったこれだけの書き換えで良いのです。視覚的にわからないように仕込みたいがために空にして使っていた目的地アンカーは、既存の h2要素等の相応しい要素に id属性を付与することで name属性の目的地アンカーを代替することが可能です。ただし、要素を識別するための id属性は、name属性同様、その文書内で一意でなければならない(ひとつの文書内で同一の名前をつけることができない)ことに注意が必要です。

古い環境の UA への後方互換のためにXHTML1.0 では name属性と id属性の両方を指定することが認められています。

<h2><a name="section1" id="section1">セクション1</a></h2>

このため、XHTML1.0 の規格においては上記のように指定すれば後方互換を考慮する点では有効な方法といえるでしょう。しかし、id属性は HTML4 で採用された規格であり、今となっては Netscape 6, Internet Explorer 4 よりも以前の id属性の目的地アンカーを参照できないような古い UA を利用しているユーザは皆無であると考えられます。Web標準とは、どんな環境(コンピュータ)からでも利用できることも目的としますが、これから登場するかもしれない未来の環境でも利用できる文書を作成すること(前方互換)のほうが情報的価値は高いといえるでしょう。もはや、後方互換のための name属性は冗長な指定でしかありません。あなたの (X)HTML文書からも空アンカー、及び name属性を撤廃しましょう。

目的地アンカーを参照するには

<a href="#section1">セクション1</a>
<h2 id="section1">セクション1</h2>

なお、id属性の目的地アンカーを参照するには、name属性の場合と同様に a要素のアンカーでリンクを設定します。この始点となるリンクは "<a href="#ID名">" の形式で ID名にハッシュ(#)を前置します。なお、このときのハッシュ(#)以下の ID名の部分をフラグメント識別子と呼び、値がハッシュ(#)に続くフラグメント識別子のみで構成されている場合、当該文書を対象としたリンク設定となります。別の文書の目的地アンカーを参照する場合には、その文書の所在となる URI を記述してからハッシュ(#)とフラグメント識別子(ID名)を記述します。