<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.