グローバルナビやローカルナビの現在地表示マークアップ
サイトのグローバルナビやローカルナビにおいて、現在地表示を行う代表的なやり方としてはこんなものが挙げられます。
em
要素を使う 例:<li><em><a href="category1.html">カテゴリ1</a></em></li>
- クラス名を付与 例:
<li class="current"><a href="category1.html">カテゴリ1</a></li>
- 画像を変える 例:
<li><a href="category1.html"><img src="category1_current.png" alt="カテゴリ1" /></a></li>
また、これらそれぞれに対して自身のページはリンクをしない(a
要素を外す)パターンもあります。
このほか、実例としてはほとんど見かけたことがないのですが、HTML5の仕様書ではa
要素にてhref
属性を付けない例が掲載されています。
<nav>
<ul>
<li> <a href="/">Home</a> </li>
<li> <a href="/news">News</a> </li>
<li> <a>Examples</a> </li>
<li> <a href="/legal">Legal</a> </li>
</ul>
</nav>
HTML 4.01ではアンカーのないa
要素を単に「生成してもよい」とし、Values for these attributes may be set at a later time through scripts.
(スクリプトで属性をセットできる)と書かれているだけで、属性なしを前提とした使い方については何も説明されていなかったのですが、HTML5になって具体的な利用方法が明示された形となります。
このコードをFirefoxやIEなどメジャーなブラウザで表示すると、href
属性のないa
要素は下線が引かれず、通常のテキストと同じ扱いとなります。Tabキーなどのキーボード操作でも(tabindex
属性を設定しない限り)フォーカスが合うことはありません。
CSSでスタイルを設定する場合も、いったん現在地のスタイルをナビゲーション内のa
要素すべてに設定したうえで、それ以外のスタイルをリンク疑似クラスの :link
, :visited
あるいは属性セレクタを使った a[href]
で上書きすることで想定どおりの表現が可能です。もちろん <a class="current"></a>
などとHTMLにクラス名を付けて区別するのもよいと思います。W3Cのサイトでは後者のマークアップを下階層ページのローカルナビで使用していますね。