Breadcrumbs

<nav aria-label="Breadcrumb">
  <ol style="display:flex;gap:0.5rem;list-style:none;padding:0;margin:0">
    <li><a href="/">Главная</a></li>
    <li>/</li>
    <li><a href="/blog">Блог</a></li>
    <li>/</li>
    <li aria-current="page">Статья</li>
  </ol>
</nav>

Предпросмотр

Пояснение

Последний элемент (текущая страница) не является ссылкой и имеет aria-current="page" вместо href. ol использован, так как порядок шагов имеет значение.

• Разделитель "/" можно заменить на CSS ::after вместо отдельного <li>, чтобы не путать с реальными пунктами пути для скринридеров.

Похожие инструменты