Списки – это важный семантический элемент веб-разметки, который помогает структурировать информацию. Они делают контент более доступным (Accessibility, A11y) и понятным для пользователей и поисковых систем. В этом контексте тег li (List Item) играет ключевую роль. Он используется для обозначения отдельных элементов в списках, будь то маркированные (ul), нумерованные (ol) или даже интерактивные списки (с использованием современных CSS/JS-фреймворков).
Разметка списков с помощью этого тега позволяет создавать четкую иерархию данных, что напрямую влияет на качество восприятия информации.
Синтаксис тега li довольно прост. Он всегда используется внутри родительских тегов ul (для ненумерованных списков) или ol (для нумерованных списков). Например, чтобы создать маркированный список покупок или задач, можно использовать следующий код:
|
1 2 3 4 5 |
<ul> <li>Первый элемент списка</li> <li>Второй элемент списка</li> <li>Третий элемент списка</li> </ul> |
Результат (отрендеренный браузером) будет выглядеть так:
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
Для создания нумерованного списка используется аналогичный подход, но с тегом ol:
|
1 2 3 4 5 |
<ol> <li>Первый шаг</li> <li>Второй шаг</li> <li>Третий шаг</li> </ol> |
Результат:
- Первый шаг
- Второй шаг
- Третий шаг
Использование тега
liзначительно упрощает восприятие информации.
Важно помнить, что правильное семантическое использование тега li не только улучшает визуальный вид, но и критически важно для SEO-оптимизации страницы (по стандартам 2026 года). Поисковые системы часто используют хорошо структурированные списки для формирования «расширенных сниппетов» (Featured Snippets) в выдаче Google и Яндекс. Если вы хотите попасть на «нулевую» позицию, списки — ваш лучший инструмент.
Не забывайте: тег
liдолжен использоваться только внутри теговul,olилиmenu. Современные браузеры могут попытаться исправить ошибку, если вы поставитеliв пустоту, но это грубое нарушение стандартов W3C.
- Вложенные списки в HTML
- Современная стилизация списков (CSS 2026)
- Часто задаваемые вопросы (FAQ) об элементе <li>
- Для чего используется тег <li> в HTML?
- Как правильно использовать тег <li> в HTML-документе?
- Можно ли с помощью <li> создавать вложенные списки?
- Как стилизовать элементы списка с помощью CSS?
- Есть ли ограничения или особенности доступности (A11y) у тега <li>?
Вложенные списки в HTML
В некоторых случаях вы можете комбинировать списки, создавая многоуровневые вложенные структуры. Это позволяет организовать сложную иерархическую информацию. Например:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul> <li>Фрукты <ul> <li>Яблоки</li> <li>Бананы</li> </ul> </li> <li>Овощи <ul> <li>Морковь</li> <li>Помидоры</li> </ul> </li> </ul> |
Такая структура крайне популярна при создании выпадающих навигационных меню (Dropdown Navigation).
Современная стилизация списков (CSS 2026)
С помощью CSS можно гибко стилизовать списки. Раньше для изменения маркеров использовали картинки, но сегодня золотым стандартом является псевдоэлемент ::marker. Он позволяет менять цвет, размер и даже сам символ маркера без лишних оберток в HTML.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Стилизация маркера списка */ li::marker { color: var(--primary-color, #007bff); font-size: 1.2em; content: '🚀 '; } /* Сброс стилей для кастомных меню */ .custom-list { list-style-type: none; padding: 0; margin: 0; } |
Используя list-style-type: none;, вы также можете полностью убрать стандартные маркеры при реализации своего собственного дизайна (например, с использованием Flexbox или CSS Grid для элементов меню). Однако помните, что при снятии маркеров некоторые «читалки» экрана (Screen Readers) могут перестать воспринимать элемент как список, поэтому иногда требуется добавлять role="list" на родительский тег в целях accessibility.
Часто задаваемые вопросы (FAQ) об элементе <li>
Для чего используется тег <li> в HTML?
Тег <li> (list item) используется для обозначения отдельного элемента списка. Он применяется как в нумерованных списках (<ol>), так и в маркированных (<ul>). Каждый пункт, заключенный в этот тег, браузер выводит с переносом строки и соответствующим маркером или цифрой.
Как правильно использовать тег <li> в HTML-документе?
Для начала необходимо создать родительский контейнер — тег <ul> или <ol>. Затем внутри этого контейнера размещаются теги <li> для каждого пункта списка. Использовать <li> вне контекста этих родительских тегов семантически неверно.
Можно ли с помощью <li> создавать вложенные списки?
Да, вы можете вкладывать списки друг в друга, помещая дополнительные теги <ul> или <ol> непосредственно внутрь тега <li>. Это позволяет создавать древовидные меню и сложные многоуровневые оглавления.
Как стилизовать элементы списка с помощью CSS?
Элементы списка можно гибко стилизовать. В современных реалиях (стандарты CSS3/CSS4) для стилизации самих «точек» или «цифр» используется псевдоэлемент ::marker. Также можно использовать свойство list-style-type: none; для полного удаления стандартных маркеров, если вы создаете меню навигации.
Есть ли ограничения или особенности доступности (A11y) у тега <li>?
Главное правило: список всегда должен быть оформлен семантически верно. Если вы убираете стили списка через CSS (list-style: none), скринридеры (например, Safari/VoiceOver) могут перестать анонсировать его как список. В критичных местах для обхода этого поведения можно явно задавать ARIA-роли: role=»list» для контейнера и role=»listitem» для <li>.
