<li>
- 25 января 2023
Что делает тег
Тег <li>
используется для создания элементов списка. Он является дочерним элементом для контейнеров <ul>
и <ol>
, которые задают тип списка — маркированный или нумерованный соответственно.
Синтаксис тега <li>
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
Или
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
</ol>
Спецификация HTML
Тег <li>
является частью спецификации HTML Living Standard.
Семантический или нет
Тег <li>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Создание маркированного списка задач:
<ul>
<li>Сделать покупки в магазине</li>
<li>Помыть посуду</li>
<li>Погулять с собакой</li>
</ul>
Создание нумерованного списка задач:
<ol>
<li>Зарядить батарею</li>
<li>Проверить масло в двигателе</li>
<li>Заправить бензином</li>
</ol>
Для чего использовать тег <li>
- Для списка задач, шагов или инструкций.
- Для навигационного меню.
- Для маркированных списков с перечислением элементов.
- Для нумерованных списков с перечислением шагов, этапов или итераций.
- Для списка изображений или видео.
- Для списка ссылок на различные ресурсы.
Атрибуты тега <li>
У тега <li>
нет специфических атрибутов.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Тег <li>
должен использоваться только внутри тегов <ul>
, <ol>
и <menu>
.
Нюансы
- В маркированных списках (с помощью тега
<ul>
) маркеры по умолчанию — круглые точки. Их можно изменить с помощью CSS. - В нумерованных списках (с помощью тега
<ol>
) номера элементов по умолчанию отображаются арабскими цифрами. Их также можно изменить с помощью CSS.
Поддержка браузерами
Тег <li>
поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
Альтернативных тегов для тега <li>
не существует.
Чем заменить тег
Прямой замены тегу <li>
не существует.
Актуальность
Тег <li>
не устарел, можете использовать его в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023