En los comentarios de mi publicación reciente sobre CSS Triangle Breadcrumbs, el marcado HTML que utilicé para crearlos fue (en esencia):
<ul class="breadcrumb">
<li><a href="https://css-tricks.com/markup-for-breadcrumbs/#">Top Level</a></li>
<li><a href="https://css-tricks.com/markup-for-breadcrumbs/#">Second Level</a></li>
<li><a href="https://css-tricks.com/markup-for-breadcrumbs/#">Third Level</a></li>
<li>Current Item</li>
</ul>A lo que Geert van der Heide comentó:
… El HTML no es semántico. Codificar una ruta de navegación como una lista desordenada hace que parezca que los elementos están en el mismo nivel jerárquico, como si fuera un conjunto de elementos en una fila. Los elementos de una ruta de navegación no lo son, representan una ruta, y cada enlace es un “hijo” del anterior.
Pensé que era un buen punto. Una lista desordenada, semánticamente, se siente mal. Como dijo Geert, los coloca a todos en el mismo nivel jerárquico. Para obtener cada elemento del menú claramente en su propio nivel, se requeriría un marcado como este:
<ul class="breadcrumb">
<li>
<a href="https://css-tricks.com/markup-for-breadcrumbs/#">Top Level</a>
<ul>
<li>
<a href="https://css-tricks.com/markup-for-breadcrumbs/#">Second Level</a>
<ul>
<li>
<a href="https://css-tricks.com/markup-for-breadcrumbs/#">Third Level</a>
<ul>
<li>
Current Item
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>Eso se siente bastante abrumador, ¿no es así? No veo que se esté usando, aunque técnicamente podría y darle un estilo de la manera que lo necesite.
No, la parte “desordenada” de una lista desordenada es más el problema. Quizás podríamos convertirlo en una lista ordenada en su lugar:
<ol class="breadcrumb">
<li><a href="https://css-tricks.com/markup-for-breadcrumbs/#">Top Level</a></li>
<li><a href="https://css-tricks.com/markup-for-breadcrumbs/#">Second Level</a></li>
<li><a href="https://css-tricks.com/markup-for-breadcrumbs/#">Third Level</a></li>
<li>Current Item</li>
</ol>Eso definitivamente se siente mejor. Las migas de pan están en un orden muy específico, por lo que parece apropiado usar una lista “ordenada”. Sin embargo, de alguna manera no estoy totalmente satisfecho con eso. El hecho de que una lista sea 1, 2, 3, etc., no representa realmente capas de jerarquía.
Varias personas también mencionaron el uso de enlaces y algún tipo de separador visual textual.
<p class="breadcrumb">
<a href="https://css-tricks.com/markup-for-breadcrumbs/#">Top Level</a> >
<a href="https://css-tricks.com/markup-for-breadcrumbs/#">Second Level</a> >
<a href="https://css-tricks.com/markup-for-breadcrumbs/#">Third Level</a> >
Current Item
</p>Sin ningún estilo CSS, este es probablemente el más efectivo. El separador de símbolo> indica la jerarquía bastante bien. El uso de elementos en línea le da a las migas de pan un diseño horizontal como el que suelen tener las migas de pan. Sin embargo, una vez más, esto no es terriblemente satisfactorio, ya que el marcado en sí no describe lo que contiene de manera muy significativa.
Pensé en comprobar si Google tenía algún consejo sobre este tema. Después de todo, Google incluye rutas de navegación en sus resultados de búsqueda:
Como era de esperar, el marcado de sus resultados de búsqueda reales es solo un lío tonto (el marcado de Google, cualquier cosa es un lío tonto). Sin embargo, tienen algo que decir sobre cómo deberíamos marcar nuestras migas de pan. Recomiendan los microdatos HTML5 y ofrecen este ejemplo:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/books" itemprop="url">
<span itemprop="title">Books</span>
</a> ›
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/books/authors" itemprop="url">
<span itemprop="title">Authors</span>
</a> ›
<div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/books/authors/stephenking" itemprop="url">
<span itemprop="title">Stephen King</span>
</a>
</div>
</div>
</div>Parece torpe a primera vista, pero en realidad los microdatos están destinados precisamente a esos fines. Probablemente iría con spans aquí, en lugar del div envoltorios independientemente.
No estoy seguro de cómo se relacionan los microdatos y los microformatos entre sí, pero parece que los microformatos sugieren simplemente darle a la envoltura un nombre de clase de ‘ruta de navegación’ y llamarlo un día.
HTML5 tiene algo más que decir sobre el tema (ver actualización a continuación) Usando el valor “arriba” en un rel atributo significa que el elemento es parte de una estructura jerárquica y también indica la distancia del documento actual al documento de referencia.
<nav>
<p>
<a href="https://css-tricks.com/" rel="index up up up">Main</a> >
<a href="http://css-tricks.com/products/" rel="up up">Products</a> >
<a href="http://css-tricks.com/products/dishwashers/" rel="up">Dishwashers</a> >
<a>Second hand</a>
</p>
</nav>El nav La etiqueta es especialmente apropiada, y cualquiera de los ejemplos de código anteriores se beneficiaría semánticamente de estar envuelto en ella. Aparte de eso, este puede ser el más satisfactorio de todos los ejemplos para mí, ya que describe semánticamente la naturaleza de una ruta de navegación. El rel etiqueta es específicamente para describir relaciones entre elementos, por lo que es un ajuste. También visualmente, sin ningún estilo, se logra el aspecto de migas de pan.
Pero tenga en cuenta: lo de rel / up no es definitivo y no es probable que dure. Hay un problema abierto que indica que el uso de varios “up” no es una forma muy clara de hacer las cosas y sugerencias para valores como “up2”, “bisabuelo” o incluso un nuevo atributo como level="3" están dando vueltas.
Actualizar: Nelson Menezes escribió para informarme sobre HTML5 y rel="up" está muerto. Referencias: 1 2
Entonces, ¿dónde estamos en esto? Yo diría que todavía no existe la mejor manera posible de manejar el marcado de migas de pan. Con suerte, obviamente, esto realmente no es gran cosa. Simplemente elija uno que funcione para usted y vaya con él. Creo que es un territorio interesante para una conversación HTML. Si tiene alguna idea para el marcado de ruta de navegación que no se muestra aquí, ¡compártala!