HTMLMEETING

/

HTML5のパンくずマークアップについて

トロントでワーホリ中のしまえるです。
HTML会議は毎週末の夜中に4人でひっそり開催中です。とっても楽しい！
先々週に盛り上がった内容、HTML5でのパンくずのマークアップの話をします。

W3Cのサイトを見るとこう書いてます。
2011年10月5日時点でのWorking Draftを見ました。

4.13.2 Bread crumb navigation
This specification does not provide a machine-readable way of describing bread-crumb navigation menus. Authors are encouraged to just use a series of links in a paragraph. The nav element can be used to mark the section containing these paragraphs as being navigation blocks.
In the following example, the current page can be reached via two paths.

<nav>
  <p>
    <a href="/">Main</a> >
    <a href="/products/">Products</a> >
    <a href="/products/dishwashers/">Dishwashers</a> >
    <a>Second hand</a>
  </p>
  <p>
    <a href="/">Main</a> >
    <a href="/second-hand/">Second hand</a> >
    <a>Dishwashers</a>
  </p>
</nav>

4.12 Links — HTML5

訳:この仕様はパンくずナビゲーションの記述をコンピュータで読むことのできるように提供するものではない。段落の中にリンクの連続したものをただ使うことを奨励する。nav要素はナビゲーションブロックのようにこれらの段落を含む部分をマークするのに使われることができる。　みたいな感じ？

そしてこれを見て気になった点3つ。

  • だいなり（>）のテキストを使っているところ
  • パンくずの現在地のところはaタグだけで囲んでいるところ
  • コンピュータで読むことができるわけじゃない ってところ

じゃー1個ずつ潰してくぞー Here we go~

だいなり（>）を使っているところ

半角スペース後のテキストのだいなり・・・。これは衝撃やね。みんな>←この部分は背景画像にしたりイメージにしたりいろいろ工夫をしていたと思うのですが・・・テキストでだいなり入れちゃいました☆（冷やし中華はじめました　のノリ）

なぜ、だいなりか

パンくずはそのサイトの階層構造を示しているからだ！階層構造だからだいなりなわけです。矢印じゃだめで三角形でもだめで　だいなり！だからこのだいなりはデザインじゃないわけだっ　たぶん・・・！

音声ブラウザにもあえて「だいなり」と読ませることでこれはパンくずだってわかりやすくなるのかな、ってHTML会議ではそういう話もしてました。

現在地はaタグだけで囲む

HTML5からhref属性は必須じゃなくなりました。なのでaだけで書いてもいいです。でもなんでhref入れへんかったん？入れへんのやったらaも取ったらええやんな！

書いてあった

仕様にこう書いてあります。

If a site uses a consistent navigation toolbar on every page, then the link that would normally link to the page itself could be marked up using an a element

訳:サイトが全てのページに一貫したナビゲーションを持つ時、そのページ自体に通常リンクするであろうリンクはa要素を使ってマークアップすることができる。

パンくずだけじゃなくて、グローバルナビゲーションとかでも、今いるページ自身へのアンカーはhref属性をとってアンカーだけにしてもええよってことやね。could be marked upやから絶対しろ！ってわけでもないみたいだけど。

コンピュータで読めないなら、読めるようにしよう

Microdataで・・・！
Microdataについては2つの記事を参照しましょう。

みんな大好きkojika17さんの記事だよ！
パンくずにMicrodataを使用するとGoogle検索でこんな風に表示されるよってのが見られます。
コーディングとSEOの概念が変わるかもしれない、Microdataについての概要

GoogleもBreadcrumbsについて書いてある
Breadcrumbs

GoogleのBreadcrumbsのページから抜粋すると、Microdataを使ってのパンくずの書き方はこうです。

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses" itemprop="url"><span itemprop="title">Dresses</span></a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url"><span itemprop="title">Real Dresses</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">Real Green Dresses</span></a>
</div>

でも、さっきみた仕様では、pの中にリンクの連続したものいれろって書いてあったから、それに沿うならこうかな！

<nav>
  <p>
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	  <a href="http://www.example.com/dresses" itemprop="url"><span itemprop="title">Dresses</span></a> ›
	</div>
	<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	  <a href="http://www.example.com/dresses/real" itemprop="url"><span itemprop="title">Real Dresses</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">Real Green Dresses</span></a>
	</div>
  </p>
</nav>

どぅーーーん・・・・・
pの中にdivいくつも入ってるとか違和感ありすぎる・・・！
別に間違ってはいないけど、これはなんか違うかも！？
pにこだわらず、やっぱdivだけのでいいんじゃないですかね。（なんやねん）

結論

わたし的には、Microdata使うならこれで、

<nav>
  <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/dresses" itemprop="url"><span itemprop="title">Dresses</span></a> ›
  </div>
  <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/dresses/real" itemprop="url"><span itemprop="title">Real Dresses</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">Real Green Dresses</span></a>
  </div>
</nav>

使わないのなら、仕様通り、こういう風にマークアップするのかなって思います。

<nav>
  <p>
    <a href="/">Main</a> >
    <a href="/products/">Products</a> >
    <a href="/products/dishwashers/">Dishwashers</a> >
    <a>Second hand</a>
  </p>
  <p>
    <a href="/">Main</a> >
    <a href="/second-hand/">Second hand</a> >
    <a>Dishwashers</a>
  </p>
</nav>

p>divってしてもいいけど、そこまでこのpに意味はないと思ったので、Microdataの時はp>divにしなくていいと思いました。

※ブログ用に整形していたところで気付いたんやけど、GoogleのBreadcrumbsのページの>はだいなりじゃなかってんけどどうしよう・・・。やまかっこやった。やまかっこってなによ！だいなりじゃないやん！ミステリー

追記[2011.10.05]

はてぶのコメントを見ました。みなさんありがとう。コメントを読んでひとつ訂正です。

p>divはXHTMLではだめなのですが、HTML5では仕様上はいけると勘違いしていました。なぜならp要素はフロー・コンテンツのカテゴリにあるからです。でも、同時にp要素のコンテンツ・モデルはフレージング・コンテンツでした。
カテゴリとコンテンツ・モデルの違いはよくわからないのですが、p要素はきっとフレージング・コンテンツです。そして、フレージング・コンテンツの中にフレージング・コンテンツは持てないようなことが書いてありました

Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.

なので、まだ本当はよくわからないけど、p>divはだめってことにしておきましょう。XHTMLを愛していた人たちにとっては気持ち悪いものですしねっ