グローバルナビやローカルナビの現在地表示マークアップ

投稿

サイトのグローバルナビやローカルナビにおいて、現在地表示を行う代表的なやり方としてはこんなものが挙げられます。

  • 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要素(W3C) にて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.(W3C) （スクリプトで属性をセットできる）と書かれているだけで、属性なしを前提とした使い方については何も説明されていなかったのですが、HTML5になって具体的な利用方法が明示された形となります。

このコードをFirefoxやIEなどメジャーなブラウザで表示すると、href属性のないa要素は下線が引かれず、通常のテキストと同じ扱いとなります。Tabキーなどのキーボード操作でも（tabindex属性を設定しない限り）フォーカスが合うことはありません。

CSSでスタイルを設定する場合も、いったん現在地のスタイルをナビゲーション内のa要素すべてに設定したうえで、それ以外のスタイルをリンク疑似クラスの :link, :visited あるいは属性セレクタを使った a[href] で上書きすることで想定どおりの表現が可能です。もちろん <a class="current"></a> などとHTMLにクラス名を付けて区別するのもよいと思います。W3Cのサイト(W3C) では後者のマークアップを下階層ページのローカルナビで使用していますね。