SimpleIsm

パンくずリストのマークアップを考える

HTML

社内でちょっとばかし議論になったので。

自分だったらul要素かなぁと思っていたのだけど、考えてみるとちょっとおかしい感じになる。

<ul>
   <li><a href="#">トップ</a></li>
   <li><a href="#">各種資料と情報源</a></li>
   <li><a href="#">辞書、辞典</a></li>
   <li><a href="#">百科事典</a></li>
   <li><a href="#">ウィキペディア (Wikipedia)</a></li>
</ul>

上記の例(リンクテキストはWikipediaからパクりました)だと、ul要素って順不同リスト(unordered list)だから、以下でもOKってことになる。

<ul>
   <li><a href="#">ウィキペディア (Wikipedia)</a></li>
   <li><a href="#">各種資料と情報源</a></li>
   <li><a href="#">トップ</a></li>
   <li><a href="#">百科事典</a></li>
   <li><a href="#">辞書、辞典</a></li>
</ul>

じゃあol要素ならどうか。レシピのように、順番が重要である情報を含むべきであるとあるぐらいだし。

<ol>
   <li><a href="#">トップ</a></li>
   <li><a href="#">各種資料と情報源</a></li>
   <li><a href="#">辞書、辞典</a></li>
   <li><a href="#">百科事典</a></li>
   <li><a href="#">ウィキペディア (Wikipedia)</a></li>
</ol>

これならリストがバラバラになるとおかしくなるし、ol要素で完璧！と思っていたのだけど、意外とp要素を使う例が多い。

<p>
   <a href="#">トップ</a> &gt;
   <a href="#">各種資料と情報源</a> &gt;
   <a href="#">辞書、辞典</a> &gt;
   <a href="#">百科事典</a> &gt;
   <a href="#">ウィキペディア (Wikipedia)</a> &gt;
</p>

なるほど。でもパンくずってそもそも段落なの？って言うと、日付とかコピーライトも段落でマーク付けするのには違和感がある。どれにも当てはまらないならdivでいいじゃんとか思うんだけど、どうなんだろう。まぁそれこそ人によるんだろうな。

なんで日本は「パンくずリスト」なんだろうか。以下(ほぼ)p要素に付けられていたclassやらidやらを挙げてみる。

• breadcrumbs
• breadcrumb-nav
• crumb
• topic-path
• path

まぁこのサイトではパンくずを使ってないのでアレなんだけど、仕事で使うときとかがあれば、何でマークアップするかをちょっと考えてみようと思う。