¿Cuál es la forma más actual de estructurar la navegación Breadcrumb utilizando HTML5

Question

Chris Coyier wrote a while ago que la mejor marca utiliza rel='up' en una sección , pero eso fue en 2010, y dijo que esta manera se debatió en ese momento. ¿Cuál es la mejor manera de marcar la jerarquía utilizando HTML5 para una barra de navegación de navegación? Aquí es Chris recomendación:

<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

Esta es la forma en Google representa marcado para BreadCrumb (utilizando microdatos) -

<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> 

Fuente: https://support.google.com/webmasters/answer/185417

pero no lo hago realmente creo que hay un bien o un mal en cualquiera de los enfoques!

Answer 2

Bueno, personalmente, me gusta this article por Divya Manian, lo que explica que la semántica realmente no importan tanto como la mayoría de la gente parece pensar. La mayoría de las veces, las personas verán su página en un navegador web y no tendrán idea de cuál es su estructura css o html subyacente, y como tal no les importaría menos si se ve bonita y funciona.

La mayoría de los motores de búsqueda y el software de accesibilidad para computadoras sabrá lo que es, independientemente de su marcado específico, siempre y cuando no intente específicamente obstaculizarlos. Poner su navegación en una etiqueta de navegación, por supuesto, ayudará al software más inteligente, pero el software más inteligente lo resolverá de todos modos.

Preocuparse si su código sigue la semántica no le proporcionará suficientes beneficios tangibles para que valga la pena su tiempo para decidir si un rel=up es la "mejor manera" de codificar su navegación. No pierdas tu tiempo, solo codifica tu sitio. (A menos que, por supuesto, te están pagando por la hora.)