読者です 読者をやめる 読者になる 読者になる

パンくずリストの要素はolかulか?

HTML

今、訳あって普段の業務とは関係のない、あるウェブサイトを作成している。自分はWebデザイナじゃないので見た目はウンコでもいいらしいのだが、WebプログラマとしてはHTMLを正しくマークアップしないとダメだろ、という俺制約を勝手に課している。

で、パンくずリストなんだけどolかulか。

ホーム > 事業内容 > システム開発

のようなページの階層を示すリストは、多くのサイトは ul タグでマークアップされているようだ。しかし、これ階層を示しているので順序にも意味あるのだから ul じゃなくて、ol でマークアップするのが正しい気がするのだが、どうなんだろうか?

HTMLは

<ol class="hierarchy">
  <li>ホーム</li>
  <li>事業内容</li>
  <li>システム開発</li>
</ol>

CSSはこんなふうにしている。

ol.hierarchy { list-style-type: none; }
ol.hierarchy li { display: inline; }
ol.hierarchy > li:before { content: "\25B6\0020"; }
ol.hierarchy > li:first-child:before { content: none; }

「ホーム ▶ 事業内容 ▶ システム開発」って表示される。IEをガン無視するとCSS書くのも楽しいもんだね。