Článek je překladem textu Exploring Markup for Breadcrumbs, jehož autorem je Chris Coyier, autor webu CSS Tricks. Překlad vychází s laskavým autorovým svolením.

V komentářích u článku o stylování trojúhelníkových drobečků v CSS jsem používal HTML kód zhruba takový:

<ul class="breadcrumb">
        <li><a href="#">Top Level</a></li>
        <li><a href="#">Second Level</a></li>
        <li><a href="#">Third Level</a></li>
        <li>Current Item</li>
</ul>

K tomuto kódu měl výhrady Geert van der Heide:

… toto HTML není sémantické. Kódovat drobečkovou navigaci pomocí nečíslovaného seznamu vytváří dojem, že prvky jsou na stejné hierarchické úrovni, jako množina prvků v řadě. To ale položky v drobečkové navigaci nejsou, reprezentují cestu, kde každá položka je „potomkem“ položky předchozí.

Myslím, že to je dobrá připomínka. Nečíslovaný seznam (anglické slovo „unordered“, tedy „neseřazený“, vyjadřuje podstatu věci přesněji – pozn. překl.) vytváří sémanticky špatný dojem. Jak píše Geert, klade všechny položky na stejnou úroveň. Pokud by měla být každá položka na odpovídající úrovni, musel by zápis vypadat takto:

<ul class="breadcrumb">
    <li>
      <a href="#">Top Level</a>
      <ul>
        <li>
          <a href="#">Second Level</a>
          <ul>
             <li>
               <a href="#">Third Level</a>
               <ul>
                  <li>
                     Current Item
                 </li>
               </ul>
            </li>
         </ul>
       </li>
     </ul>
  </li>
</ul>

Což je poněkud těžkopádné. Nemyslím, že by to bylo moc použitelné, i když je technicky možné takový seznam vytvořit a nastylovat přesně, jak potřebujete.

Problém spíš spočívá v té „neseřazenosti“ nečíslovaného seznamu. Možná by stačilo místo něj použít číslovaný:

<ol class="breadcrumb">
        <li><a href="#">Top Level</a></li>
        <li><a href="#">Second Level</a></li>
        <li><a href="#">Third Level</a></li>
        <li>Current Item</li>
</ol>

Rozhodně to působí líp. Drobečky jsou ve velmi důležitém pořadí, tak je použití číslovaného, „seřazeného“ seznamu odpovídající. Ale stále jsem s tímto řešením nebyl spokojen. Jednoduše proto, že seznam 1, 2, 3 atd. neodpovídá úrovním hierarchie.

Někteří lidé zmiňovali v komentářích použití obyčejných odkazů a vizuálního oddělovače:

<p class=„breadcrumb“>
  <a href=„#“>Top Level</a> >
  <a href=„#“>Second Level</a> >
  <a href=„#“>Third Level</a> >
  Current Item
</p>

Bez stylování v CSS je to pravděpodobně ta nejlepší varianta. Znak „>“ naznačuje velmi pěkně hierarchii, použití inline elementů zase dává drobečkové navigaci obvyklý horizontální vzhled. Ale zase: není to moc uspokojivé, protože zápis nedává moc srozumitelně najevo, co je jeho obsahem.

Myslel jsem, že se podívám, jestli Google nemá nějakou radu v téhle věci. Ostatně sám drobečkovou navigaci používá ve výsledcích vyhledávání:

Nepřekvapivě je HTML kód výsledků vyhledávání jedním slovem zmatek (HTML kód od Google-čehokoli je zmatek). Ale přesto mají, co se týče drobečkové navigace, radu ohledně kódování. Doporučují použít HTML5 Microdata a nabízejí tento příklad:

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

Na první pohled to vypadá těžkopádně, ale ve skutečnosti jsou Microdata určena právě pro takovéhle účely. Možná bych místo DIVů použil SPAN.

Nejsem si jist tím, jak spolu vycházejí microdata a mikroformáty, ale vypadá to, že podle doporučení mikroformátů stačí dát obalovacímu prvku třídu „breadcrumb“ a hotovo.

HTML5 má také co k tématu dodat. Použití hodnoty „up“ v atributu „rel“ naznačuje, že element je částí hierarchické struktury a také naznačuje vzdálenost od aktuálního dokumentu k tomu, který je odkazová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>

Element nav je tu obzvlášť vhodný, a pokud do něj zabalíte předchozí příklady, zlepšíte tím jejich sémantiku. Mimoto je tento příklad pravděpodobně ten nejvíc uspokojivý co do sémantického popisu povahy drobečkové navigace. Atribut rel je určen pro popis vztahů mezi elementy, takže to sedí. Navíc i vizuálně, bez jakéhokoli stylování, je dosaženo obvyklého vzhledu drobečkové navigace.

Ale prosím pozor: HTML5 je ve vývoji a rel/up ještě není definitivní a nemusí nakonec ve specifikaci zůstat. Je tu otevřená připomínka, že použití vícenásobného „up“ není příliš čistá cesta, a ve vzduchu visí návrhy jako „up2“, „great-grandparent“ či úplně nový atribut jako třeba level=„3“.

Tak jak na tom jsme? Řekl bych, že zatím není žádný super jedinečný naprosto nejlepší způsob, jak nakódovat drobečkovou navigaci. Naštěstí to není v praxi zase tak obrovský problém. Vyberte si některý z výše uvedených příkladů a použijte ho. Jen si myslím, že to je zajímavé téma pro diskusi o HTML. Pokud máte nějaký způsob, jak zapisovat drobečkovou navigaci, podělte se!