パンくずリストのマークアップについて

パンくずリストのマークアップについて

イメージ

階層構造を持つ WEB サイトの場合、垂直方向のナビゲーションとして「パンくずリスト」が有効です。
「採用情報 > 中途採用 > 募集要項」のように表現するのが一般的で、閲覧中のページが階層構造上のどの位置なのかを確認したり、上位のページを辿っていくことができるようになります。

今のところ「パンくずリスト」のマークアップ方法に正解といえる決定的なものはありません。「パンくずリスト」というくらいなのでリストだという解釈はできます。いくつか妥当と思われる例を挙げてみます。

ケース 1)
パンくずリストは階層構造のリストだからマークアップも階層を意識したい……

<ul>
  <li><a href="/recruit/">採用情報</a>
    <ul>
      <li><a href="/recruit/career/">中途採用</a>
        <ul>
          <li>募集要項</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

順不同(unordered)リストを入れ子で指定して階層構造をマークアップする例です。
個人的な印象としては、コードが冗長になりがちなのが欠点でしょうか。

ケース 2)
親カテゴリの下に何階層かの子カテゴリがぶら下がるのだから……

<dl>
  <dt><a href="/recruit/">採用情報</a></dt>
  <dd><a href="/recruit/career/">中途採用</a></dd>
  <dd>募集要項</dd>
</dl>

親カテゴリの下に、いくつかの子カテゴリがぶら下がる、という解釈です。
子カテゴリの階層を表現できていないのが致命的な欠点のような気もします。

ケース 3)
上位カテゴリから順番にリストアップするのだから……

<ol>
  <li><a href="/recruit/">採用情報</a></li>
  <li><a href="/recruit/career/">中途採用</a></li>
  <li>募集要項</li>
</ol>

単純に番号順(ordered)のリストでマークアップした例。
個人的にはシンプルで一番好きです。

どの方法を取り入れたとしても、見栄えは CSS で同じようにすることができます。

「いやいや、パンくずのマークアップはそうじゃなくてこうだろう!」みたいなご意見がありましたら是非。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ