アクティブなナビゲーション項目、つまり現在のページへのナビゲーション項目はclass属性を使ってactiveなどと付けられることが多い。特に間違ってはいないんだけど、いまいちピンとこない。というかしっくりこない。大体は流されてそうしているけど、このウェブサイトではmark要素を使ってる。
HTML5仕様ではmark要素は以下のようになってる。
The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
mark要素が含まれる要素のコンテキストとは別のコンテキストでの関係性をハイライト等で表したい時に使うと解釈してる(同じコンテキストならemやstrong、そしてb要素を使う)。ナビゲーション項目が現在のページへの参照かどうかというのは、その文書がウェブサイトにおいてどういう位置にあるのかというコンテキストから判断されるべきなので、文書そのものとは別のコンテキストを受けての判断。つまりmark要素を使うのが適切なんじゃないかなと。
実装上でも、自身へのリンクをしないケースでちょっと収まりが良くて気に入ってる。自身へのリンクをしない場合、class="active"を使うとおおよそ以下のようなコードになる。
<nav role="navigation">
<ul>
<li class="active">Foo</li>
<li>
<a href="/bar/">Bar</a>
</li>
<li>
<a href="/baz/">Baz</a>
</li>
</ul>
</nav>アクティブな項目のa要素が消えるので、非アクティブなリスト項目とそのテキストの階層が一致しなくなる。対してmark要素を使うと以下のようになる。
<nav role="navigation">
<ul>
<li>
<mark>Foo</mark>
</li>
<li>
<a href="/bar/">Bar</a>
</li>
<li>
<a href="/baz/">Baz</a>
</li>
</ul>
</nav>テキストの階層が一致したまま維持できる。
<body class="foo">
<ul class="navigation">
<li class="foo"><a href="/foo/">Foo</a></li>
<li class="bar"><a href="/bar/">Bar</a></li>
<li class="baz"><a href="/baz/">Baz</a></li>
</ul>
</body>その昔はこう書いておいて、.foo .foo….bar .barをまとめて指定したルールセットでアクティブな項目を作っていた。この場合はナビゲーション項目のような所で局所分岐せずにすっきりテンプレート処理できる(いつでもどこでも同じHTMLでナビゲーション吐ける)とかがメリットだったような気がする(うろ覚え)。そこそここうやっていたウェブサイトも見かけた。これを一歩進めて@documentを使った全自動アクティブ項目のマーク機構なんかも作ってたけど、Internet ExplorerやChromeで@document実装されそうな気配全くないので考えるのをやめた。