title: What's The Most Current Way To Structure Breadcrumb Navigation Using HTML5
body: <p><a href="http://css-tricks.com/markup-for-breadcrumbs/" rel="noreferrer">Chris Coyier wrote a while ago</a> that the best markup uses <code>rel='up'</code> in a <code>&lt;nav&gt;</code> 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:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;p&gt;
      &lt;a href="/" rel="index up up up"&gt;Main&lt;/a&gt; &gt;
      &lt;a href="/products/" rel="up up"&gt;Products&lt;/a&gt; &gt;
      &lt;a href="/products/dishwashers/" rel="up"&gt;Dishwashers&lt;/a&gt; &gt;
      &lt;a&gt;Second hand&lt;/a&gt;
    &lt;/p&gt;
  &lt;/nav&gt;
  </code></pre>