サイト製作を進めていくにあたって、様々な専門用語と出会う事になります。

「パンくずリスト」
今回の記事ではこの言葉に注目してみます。これはいったい何の事なのでしょうか。
意味としては、童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを少しずつ落としながら歩いたという故事が由来であると言われています。

サイト閲覧者が自分の居場所（ページ内の部分）にいるかを表していく物であると考えて下さい。特にサイトのボリュームが増えていくとディレクトリ構成が複雑化し、第一階層から第四、第五階層程度まで掘り下がっていくようになります。
パンくずリストは、その垂直方向（深階層）へのナビゲーションとして捉えるとイメージしやすくなります。

例えばトップページより「Aカテゴリ」の中にある「Bカテゴリ」の「Cというページ」を閲覧している場合、すでに自分がどこの階層のどのページを見ているか分かりにくくなっているでしょう。
これをパンくずリストで下記のように表示します。

トップページ > Aカテゴリ > Bカテゴリ > Cページ

自分がどの階層にいるのかを表示させる事で、居場所をユーザーに案内する事が出来ます。全て「pタグ」や「divタグ」で一行表示してもいいのですが、「li（リストタグ）」でインライン要素として表示させる事で、パンくずのリストとしてロボットも認識しやすくなります。
HTMLでマークアップしていく（書いていく）際には、人間の目とロボットの理解度という二つの要素を考えながら構築していく事が、キレイなソース作りになっていきます。

＜pタグやdivタグで表記したソース＞
—————————————-
<p>トップページ > Aカテゴリ > Bカテゴリ > Cページ</p>
—————————————-

＜listタグ（ul & li）で表記したソース＞
—————————————-
<ul>
<li><a href=”index.html”>トップページ</a></li>
<li> > <a href=”a/index.html”>Aカテゴリ</a></li>
<li> > <a href=”a/b/index.html>Bカテゴリ</a></li>
<li> > Cページ</li>
</ul>
—————————————-
このリストタグで表記する場合は、CSSでインライン（display: inline）にしておく必要があります。通常は縦方向になる（display: block）になってしまいますので、横並びに配列させておかなくてはいけません。

パンくずリストは人間とロボットのどちらにも重要ですので、サイト製作時には設置しておくべき項目の一つであると言えます。
設置場所としては、ヘッダー下に左詰で配置させる事が一般的です。訪問者の方に少しでも迷わずサイト閲覧していただけるようにしておくには、パンくずリストは重要な項目です。