What's The Most Current Way To Structure Breadcrumb Navigation Using HTML5

Question

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>

Answer 1

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!