吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【HTML】パンくずリスト

2014年10月1日 / category : その他-lab

以前から気になっていたパンくずリストのマークアップについて、書いてみます。
パンくずリストとは、ユーザーがwebサイトのどの場所にいるか視覚的にわかりやすくするためのアレですね。

HOEM > 会社概要 > 代表挨拶

みたいな、コレですね。
さて、このパンくずリストをどのようにマークアップするのか。

とりあえず、いろんなサイトを見てみた。

HTML
<nav id="breadcrumbs">
<ol>
<li><a href="/">HOME</a></li>
<li><a href="/aaa/"><span>AAA</span></a></li>
<li class="current">BBB</li>
</ol>
</nav>
HTML
<nav class="topicPath">
<ul>
<li class="first-child"><a href="/">HOME</a></li>
<li><strong>AAA</strong></li>
</ul>
</nav>

そうですよね、<ol>か<ul>のリストですよね。
自分も確か、以前までリストでマークアップしていました。
これはこれで良いと思います。
マークアップは、いろんな解釈があり、同じ要素でもコーディングした人によって違ったマークアップになります。

ただ、少し前に、どこかの記事で、次のような解釈をしていた方がいました。
(記事URLを忘れてしまったので、ご紹介できません。。。)


パンくずリストは、階層が深くなる構造です。
HOME(1階層目)の中の会社概要(2階層目)、会社概要(2階層目)の中の社長挨拶(3階層目)・・・のように。
これをリストタグでマークアップしてしまうと、全てが並列になってしまうので、好ましくない。

なるほど。
確かに、その通りな気がする。
ということで、リストタグ以外のマークアップにしよう。
でも、どういうマークアップ?

また、色々調べてみた。

HTML
<nav class="breadcrumb">
<div><a href="/">HOME</a></div>
<div><a href="/aaa/">AAA</a></div>
<div>BBB</div>
</nav>

ん~、なるほど<div>ですか。
自分は、<div> + <a>というマークアップはしません。
この例で言うと、間に<p>を入れます、自分は。

HTML
<nav class="breadcrumb">
<div><p><a href="/">HOME</a></p></div>
<div><p><a href="/aaa/">AAA</a></p></div>
<div><p>BBB</p></div>
</nav>

こんな感じ。
ん~、でもなんかタグ多いな・・・。
<div>要らないかも・・・。

HTML
<nav class="breadcrumb">
<p><a href="/">HOME</a></p>
<p><a href="/aaa/">AAA</a></p>
<p>BBB</p>
</nav>

うん、ちょっとスッキリ。
でも待てよ、<p>は1つで良くない?

HTML
<nav class="breadcrumb">
<p><a href="/">HOME</a><a href="/aaa/">AAA</a>BBB</p>
</nav>

なんかこれが1番良いマークアップなような気がする。
と、つい先日まで思っていました。

で、先日、先輩クリエータから、microdataによるタグ付けというものがあることを知りました。
microdata?
なんだそれ。

何やら、microdataでマークアップすると、Googleさんがパンくずリストだと認識してくれるらしいです。
それは重要だ。
ということで、microdataでマークアップすることに。
記述の方法は次のような感じ。

HTML
<element itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
■ itemscope属性
microdataの要素であること示す属性
■ itemtype属性
microdataのタイプを設定する属性
http://data-vocabulary.org/Breadcrumb
を設定することで、パンくずリストと認識する。
HTML
<a href="/" itemprop="url"><element itemprop="title">ホーム</element></a>
■ itemprop属性
プロパティ名を示す属性
urlを設定することで、パンくずリストのURLになり、titleを設定することで、パンくずリストのタイトルになります。

これらが、microdataに必要な属性です。
これを先ほどのパンくずリストのマークアップに追加します。

結果、次のようなマークアップに。

HTML
<nav class="breadcrumb">
<p itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/" itemprop="url"><span itemprop="title">HOME</span></a>
<a href="/aaa/" itemprop="url"><span itemprop="title">AAA</span></a>
<span class="current">BBB</span>
</p>
</nav>

または、次のようなマークアップでも良いかも。

HTML
<nav class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<p><a href="/" itemprop="url"><span itemprop="title">HOME</span></a></p>
<p><a href="/aaa/" itemprop="url"><span itemprop="title">AAA</span></a></p>
<p><span class="current">BBB</span></p>
</nav>

<p>でひとつずつ括る場合はこんな感じ。
いかがでしょうか。