webref.ru — сайт htmlbook.ru

Технологии

• analytics: Yandex Metrica
• architecture_signals: lazy_loading_images
• hosting_cloud_cdn: Beget
• javascript_libraries: jQuery
• seo_signals: hreflang

Соцсети

• odnoklassniki
• odnoklassniki

О сайте

Title: Home | htmlbook.ru

---

- [Основное](main) - [HTML](html) - [CSS](css) - [Сайт](site)

- [Статьи](/content) - [Блог](/blog) - [Практикум](/practical) - [Форум](//htmlforum.io)

- [Самоучитель HTML](/samhtml) - [Справочник по HTML](/html) - [XHTML](/xhtml) - [HTML5](/html5)

- [Самоучитель CSS](/samcss) - [Справочник по CSS](/css) - [Рецепты CSS](/faq) - [CSS3](/css3)

- [Вёрстка веб-страниц](/samlayout) - [Макеты](/layout) - [Веб-сервер](/webserver)

Теги HTML

Справочник CSS

[электрокарнизы для штор купить в москве](https://prokarniz.ru/) [почасовой отель](https://podushkin.ru/) Современная фабрика ["Любимая Кухня"](https://love-kuhnya-na-zakaz-moskow.ru/) по производству кухонь на заказ

реклама

[Хлебные крошки](/blog/khlebnye-kroshki)

Хлебные крошки — это разновидность навигации, которая помогает посетителям понять, где они находятся на сайте и быстро перемещаться по иерархии веб-страниц. Обычно хлебные крошки отображаются в виде цепочки ссылок, разделённых между собой специальными символами (например: «», «/» или «→»).

Первой в цепочке ссылок, как правило, идёт главная страница, а последней — текущая веб-страница. Вместо надписи «Главная страница» также применяют изображение домика. На рис. 1 приведено несколько вариантов хлебных крошек.

Рис. 1. Вид хлебных крошек

Обратите внимание, что последний пункт не является ссылкой, поскольку указывает на текущую веб-страницу.

Разметка хлебных крошек обычно делается с помощью списков <ul или <ol, каждая ссылка вставляется внутрь пункта списка <li. Для последнего пункта списка ссылка не нужна, поэтому вместо элемента <a используем <span.

<ol <li<a href="/"Главная</a</li <li<a href="/catalog/"Каталог</a</li <li<a href="/catalog/electronics/"Электроника</a</li <li<spanСмартфоны</span</li </ol

<ol <li<a href="/"Главная</a</li <li<a href="/catalog/"Каталог</a</li <li<a href="/catalog/electronics/"Электроника</a</li <li<spanСмартфоны</span</li </ol

[Стилизация <progress](/blog/stilizaciya)

На webref.ru добавился новый учебный курс, посвящённый [стилизации <progress](https://webref.ru/course/style-progress). Этот HTML-элемент предназначен для создания шкалы прогресса, показывающей степень выполнения задачи или процесса.

В курсе рассмотрены следующие темы:

- создание шкалы прогресса; - изменение цвета шкалы; - стилизация для разных браузеров, включая Chrome, Safari, Firefox; - специальные псевдоэлементы, работающие в определённых браузерах; - использование линейного градиента для созд…