What is the latest way to structure your navigation with Breadcrumb using HTML5

Question

Chris Coyier wrote some time ago that the best markup uses rel='up' in the <nav> section, but that was in 2010, and he said it was discussed like that then. What is the best way to lay out a hierarchy using HTML5 for a navigation bar? Here is Chris's recommendation:

 <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

So Google presents the 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 do not think that in any of the approaches there are right or wrong options!

Answer 2

Well, personally, I like this article from Divya Manian, which explains that semantics really don't matter, as most people seem to think. In most cases, people will view your page in a web browser and will not know what your basic css or html structure is, and, as such, it doesn’t matter as long as it looks beautiful and works.

Most search engines and computer accessibility software will determine that this is independent of your particular markup, unless you specifically try to stop them. Of course, moving your navigation to a tag navigator will help smarter software, but smarter software will understand it anyway.

Worrying about whether your code matches the semantics will not give you enough tangible benefits to take the time to decide whether rel=up “best way” for your navigation code. Do not waste your time, just enter the code of your site. (Unless, of course, you are not paid by the hour.)