Что делает тег

Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023