SAITEI no CHINJUU!!!（最低の珍獣）

パンくずリストをどうやって実装するか-

コーディングする度にどの方法が最適なのかを考えてしまいます
どの方法を使えばよいか決定的な理由が見いだせず、”これ”と決めれずにいました

色々と調べてみていると、
せっかくHTML5で記述しとぅんやし、それを使ってみようかなーという気に

ということでやってみたのが以下

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

rel属性は、リンク元からリンク先への位置づけを示します

その内、indexは索引文書を示します（と書いてました・笑）
つまりはindex.htmlを指すってことですね

upは自分から見てどれだけ上の階層かを示します
1階層上ならupは1つ、2階層上なら2つ、というように

これ以外に、Google先生はHTML5のマイクロデータを使うことを推奨しています
はて、マイクロデータ？？

詳しくはココをチェックして下さい

マイクロデータとは、タグに意味付けを与えるものです

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
 <a href="http://www.example.com/dresses" itemprop="url">
  <span itemprop="title">洋服</span>
 </a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
 <a href="http://www.example.com/dresses/real" itemprop="url">
  <span itemprop="title">ドレス</span>
 </a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
 <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
  <span itemprop="title">緑のドレス</span>
 </a>
</div>

例えば上記のようなもの
いちばん外側のdivにあるitemtypeで一意的に意味付けをし、
itempropでタグにその中での意味を与えます

コチラ参照

・・・若干煩雑かな？
現状ではまだ非現実的かも

ということで、<nav>を使った最初の方法か、
もっと簡単に

<p><a href="/">ホーム</a> > <a href="#">第一階層</a> > <a href="#">第二階層</a> > 現在位置</p>

でも良いかも