Хлебные крошки (Breadcrumbs)

Хлебные крошки рекомендуется оформлять как список.

<ol class="breadcrumbs">
  <li>
    <a href="https://know-online.com/">Главная</a>
  </li>
  <li>
    <a href="https://know-online.com/category">Раздел</a>
  </li>
  <li>
    <a href="https://know-online.com/category/tech">Техника</a>
  </li>
</ol>

Дальше остаётся их оформить в CSS.

Название «Хлебные крошки» является отсылкой к сказке «Гензель и Гретель» братьев Гримм, где дети оставляли хлебные крошки в лесу, чтобы по ним вернуться домой.

Микроразметка

Для хлебных крошек можно сделать микроразметку, чтобы оформить их в поисковых системах.

Код микроразметки для хлебных крошек выглядит следующим образом:

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://know-online.com/arts"><span itemprop="name">Arts</span></a>
        <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://know-online.com/arts/books"><span itemprop="name">Books</span></a>
        <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://know-online.com/arts/books/poetry"><span itemprop="name">Poetry</span></a>
        <meta itemprop="position" content="3" />
    </li>
</ol>

Доступность (WAI-ARIA)

Также рекомендуется указывать атрибуты aria, которые предназначены для людей с физическими ограничениями, которые открывают сайт через специальные приложения.

<div aria-label="Страницы">
  <ol class="breadcrumbs">
    <li>
      <a href="https://know-online.com/">Главная</a>
    </li>
    <li>
      <a href="https://know-online.com/category">Раздел</a>
    </li>
    <li>
      <a href="https://know-online.com/category/tech" aria-current="page">Техника</a>
    </li>
  </ol>
</div>

Скринридер прочитает данную ссылку как «Страницы. Главная, раздел, техника текущая страница».