What's The Most Current Way To Structure Breadcrumb Navigation Using HTML5
breadcrumbs, html, markup, semantics
Solution
This is how Google represents markup for BreadCrumb (using 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>
Source : https://support.google.com/webmasters/answer/185417
But I don't really think that there is right-or-wrong in either of the approaches!
Problem
Chris Coyier wrote a while ago that the best markup uses `rel='up'` in a `<nav>` section, but that was in 2010, and he said that this way was debated back then. What's the best way to mark up hierarchy using HTML5 for a breadcrumb navigation bar? Here is Chris' reccomendation: ``` <nav> <p> <a href="/" rel="index up up up">Main</a> > <a href="/products/" rel="up up">Products</a> > <a href="/products/dishwashers/" rel="up">Dishwashers</a> > <a>Second hand</a> </p> </nav> ```