p要素?パンくずをどのように実装するのがよいかの考察を紹介します。Breadcrumbs[ad#ad-2]先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。-ul要素で同列配置そのチュートリアルのマークアップは、下記のようにul要素で実装されています。<li>現在位置</li></ul>この記事に対して、次のコメントがつきました。ul要素での同列配置は各アイテムが同じレベルの階層にあるように見えるため、そのHTMLはセマンティックではありません。パンくずはそうではなく、各アイテムが親子の関係にあり、パスをあらわすものです。-ul要素で親子ul要素で同列に配置するのは、意味的に間違っている感じがしたので、アイテム自身のレベルをあらわすために、以下のようなマークアップにしてみます。</li></ul>このマークアップは、本当に必要でしょうか?問題点はul要素自体にあると考え、ol要素でマークアップをしてみます。<li>現在位置</li></ol>これは、少しすっきりした感じがします。パンくずを順序づけし、ol要素でマークアップすることは適切に思われます。これでも満足はえられません。3というリストは、レベルの階層をあらわすものではありません。次に、各階層を区切るセパレーターを使用してみます。現在位置</p>これはCSSでのスタイリングが無い状態で、最も効果的です。「>」のセパレーターは階層を視覚的にうまくあらわしています。インラインの要素を使うことはパンくずを水平レイアウトに表示します。セマンティックであるかということでは、ひどく満足できないものとなっています。私がもしGoogleにアドバイスできるなら、このことを伝えるでしょう。Googleは検索結果のパンくず表示にこれを使用しています。実際のHTMLを見てみると予想通り、非常に乱雑なマークアップだと思うことでしょう。パンくずのこのマークアップは何かしら得るものがあるかもしれません。-Googleを参考にGoogleではパンくずにHTML5のマイクロデータを使用することを推奨しています。実装例を見てみましょう。ヘルプ一見すると、できの悪いマークアップに見えますが、実際にはそれぞれを意味付けするHTML5のマイクロデータを使用したセマンティックなマークアップとなっています。div要素をラッパーにし、「breadbrumb」などとclassを使用するだけで簡単に利用ができるでしょう。-HTML5の使用また、HTML5では他のマークアップ方法もあります。"up"」を使用することで、rel属性にその階層の関係を明示することができます。ここで、nav要素を使用することは非常に適切です。今まで紹介したコードのいずれの例に使用してもセマンティックな恩恵を受けるでしょう。今まで紹介した中でパンくずの実装として、一番満足がいくものだと思いました。rel属性はエレメント間の関係を記述するもので、それはとても相性のよいものです。デザイン面においても、簡単にどんなスタイルでも適用できるものでしょう。-おわりにしかしながら、パンくずをマークアップする究極的な最も良い方法はまだ存在しない、と思います。現時点は、あなたのためにうまく機能するものを選び、それを使用するのがよいでしょう。ここで紹介したもの以外でパンくずのマークアップのアイデアを持っているなら、どうか教えてください。Posts関連記事が見つかりませんでした。