ぱんくずリスト

パンくずリスト(wikipedia)
日本語では「パンくずリスト(breadcrumb list)」だが、英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
パンくずリストには次の3種類がある。
パス型 : そのページにどういう経路でたどり着いたのかを示す。動的。
位置型 : そのページがウェブサイトの階層構造のどこに位置しているかを示す。静的。
属性型 : そのページがどんな属性で分類されているかを示す。

ほとんどの人がたどり着く先がパンくずの実装はどのようにするのがよいかの考察 | コリスを眺めて考えた。
 

<nav>
 <p>
  <a href="/" rel="index up up up">第一階層</a> >
  <a href="/products/" rel="up up">第二階層</a> >
  <a href="/products/dishwashers/" rel="up">第三階層</a> >
  <a>現在位置</a>
 </p>
</nav>

ここだけを抜き出してbody直下に貼りつけようとすると異論を唱えたくなる。けれどsectionの中に入れたとしたら?

<section>
<nav>
 <p>
  <a href="/" rel="index up up up">第一階層</a> >
  <a href="/products/" rel="up up">第二階層</a> >
  <a href="/products/dishwashers/" rel="up">第三階層</a> >
  <a>現在位置</a>
 </p>
</nav>
<h1>せくしょんの中身</h1>
<p>なんたらかんたら</p>
</section>

セクションだけど表示させた場合でも階層が分かる。パン屑をデザインする人には怒られそうだけど。いまいち分からないのがrelの書き方で「up」を複数回書いているのが美しくない。(不勉強で文句を垂れる悪い人になっている)
ISSUE-119 (rel-repetition) blocks progress to Last Callを眺める。本当にこのまま実装されるのかな…?