Web標準、W3C対応、SEO対策、スマートフォンサイト等、HTMLコーディング代行サイトです！全国どこからでもお申し込み可能。

ホームページによく見られる要素の一つに「パンくずリスト」があります。
「パンくずリスト」とは、表示されているページの位置を、階層構造をリスト化して簡潔に記述したものです。以下の例をみるとよくわかるかと思います。

この「パンくずリスト」は、大規模なホームページなどでは欠かせない要素となっており、ユーザビリティやSEO対策にとっても重要な要素の一つです。

コーディング方法としては難しいことをすることもなく、以下のようにしても問題ありません。

<p><a href="#">トップページ</a> ＞ <a href="#">ホームページ制作</a> ＞ 制作料金</p>

ただ、Web標準的なコーディングとして考えた場合は、olタグを使うのが適切でしょう。

CSS

.topic-path { list-style-type: none; } .topic-path li { display: inline; }

HTML

<ol class="topic-path"> <li><a href="#">トップページ</a> ＞ </li> <li><a href="#">ホームページ制作</a> ＞ </li> <li>制作料金</li> </ol>

表示サンプル

このようにolタグを使うことで、テキストモードでは以下のように表示され、階層構造が明確になるわけです。

修正する時も見やすいのでお勧めのコーディング方法です。