Тег <li>

Описание

Тег <li> (от англ. "list item") определяет элемент списка внутри контейнеров <ul>, <ol> или <menu>. Является основным строительным блоком для всех типов списков в HTML.

Маркированный список:
<ul> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul>
Нумерованный список:
<ol> <li>Подготовить ингредиенты</li> <li>Смешать компоненты</li> <li>Выпекать 30 минут</li> </ol>

Особенности использования:

  • Может содержать любые HTML-элементы (текст, изображения, другие списки)
  • Поддерживает вложенные списки (до 3-4 уровней рекомендуется)
  • Для меню навигации часто добавляют классы к <li>
  • Важен для семантической структуры документа
  • Используется в комбинации с CSS для создания сложных компонентов

Стилизация через CSS:

<style> /* Кастомные маркеры */ ul.custom { list-style: none; padding-left: 0; } ul.custom li { padding-left: 1.5em; position: relative; margin-bottom: 0.5em; } ul.custom li::before { content: "→"; position: absolute; left: 0; color: #6c757d; } /* Нумерованный список с ведущими нулями */ ol.decimal-leading-zero { list-style-type: decimal-leading-zero; } </style> <ul class="custom"> <li>Пункт с кастомным маркером</li> </ul>

Тег <li> является фундаментальным элементом для создания структурированных списков любого типа в HTML-документах.

Атрибуты

value Числовое значение для нумерованных списков
accesskey Горячая клавиша для активации элемента
class CSS-классы для стилизации элемента
contenteditable Разрешает редактирование содержимого
data-* Пользовательские данные элемента
dir Направление текста (ltr|rtl)
hidden Скрывает элемент от отображения
id Уникальный идентификатор элемента
lang Язык содержимого элемента
spellcheck Включает проверку орфографии
style Инлайновые CSS-стили элемента
tabindex Порядок перехода при навигации по Tab
title Всплывающая подсказка для элемента
translate Определяет возможность перевода содержимого
type Тип маркера списка (устарел в HTML5)

Поддержка браузерами
3.0 1.0 4.0 1.0 1.0