アンカーの最適化
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点にまとめることができます。
- name属性の目的地アンカー(終点アンカー)の代替となる。
- スタイルシート(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名)を記述します。