W3docs
ru
Войти

HTML <li> Тег

Тег <li> определяет элементы списка в HTML. Описание тега, атрибуты и примеры.

HTML-тег <li> определяет отдельный элемент внутри HTML-списка. Он является дочерним элементом <ul> (ненумерованный список), <ol> (нумерованный список) или <menu>. В ненумерованных списках и меню элементы по умолчанию отображаются с маркером-точкой. В нумерованных списках каждый элемент получает слева цифру или букву, которая увеличивается автоматически.

На этой странице рассматриваются синтаксис <li>, атрибут value, стилизация маркеров списка с помощью CSS, а также рекомендации по доступности для программ чтения с экрана.

Синтаксис

Элемент списка записывается между открывающим тегом <li> и закрывающим </li>:

<li>List item text</li>

<li> — это элемент потокового содержимого: каждый элемент начинается с новой строки и занимает всю доступную ширину.

В HTML5 закрывающий тег </li> является необязательным — браузер закрывает элемент автоматически, когда встречает следующий <li> или конец родительского списка. Тем не менее использование </li> рекомендуется для удобочитаемости и во избежание неожиданных проблем в инструментах разработки.

Пример нумерованного и ненумерованного списков:

Список меню — Пример HTML-тега <li> — W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>Ordered list</p>
    <ol>
      <li>Appetizers</li>
      <li>Main Course</li>
      <li>Salads</li>
    </ol>
    <p>Unordered list</p>
    <ul>
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
  </body>
</html>
Попробуйте сами »

Атрибут value

Атрибут value задаёт порядковый номер элемента списка. Он работает только для элементов <li> внутри нумерованного списка (<ol>) и игнорируется в ненумерованных списках.

Установка value изменяет не только один элемент — нумерация продолжается с него. В примере ниже первому элементу принудительно присваивается значение 5, поэтому следующие элементы автоматически получают номера 6 и 7:

5. Coffee
6. Tea
7. Coca Cola

Чтобы изменить только начальный номер всего списка, предпочтительнее использовать атрибут start элемента <ol>. Используйте value, когда нужно переопределить номер конкретного элемента в середине списка.

Опасно

Значение атрибута value должно быть допустимым целым числом. Отрицательные значения разрешены.

Пример атрибута value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <ol>
      <li value="5">Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
  </body>
</html>
Попробуйте сами »

Стилизация маркера элемента списка

Для стилизации элемента <li> можно использовать CSS-свойства list-style, list-style-type, list-style-image и list-style-position.

Пример стилизации маркера элемента списка:

Свойство list-style-type

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.a {
        list-style-type: circle;
      }
      ul.b {
        list-style-type: square;
      }
      ol.c {
        list-style-type: upper-roman;
      }
      ol.d {
        list-style-type: lower-alpha;
      }
    </style>
  </head>
  <body>
    <h1>The list-style-type property</h1>
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
  </body>
</html>
Попробуйте сами »

Маркеры-точки можно заменить изображением с помощью CSS-свойства list-style-image.

Пример маркера в виде изображения:

Свойство list-style-image

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-image: url("https://api.w3docs.com/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
      }
    </style>
  </head>
  <body>
    <h2>List-style-image property example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>
Попробуйте сами »

CSS-свойство list-style-position определяет, будет ли маркер списка отображаться внутри или снаружи блока элемента списка.

Пример позиционирования маркера внутри и снаружи:

Свойство list-style-position

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        border: 1px solid #666;
        padding: 5px;
      }
      .inside {
        list-style-position: inside;
      }
      .outside {
        list-style-position: outside;
      }
    </style>
  </head>
  <body>
    <h2>List-style-position property example</h2>
    <p>Here the list-style is positioned "inside".</p>
    <ul class="inside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
    <p>Here the list-style is positioned "outside".</p>
    <ul class="outside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>
Попробуйте сами »

Атрибуты

АтрибутЗначениеОписание
type1, A, a, I, i, disc, square, circleОпределяет тип маркера для нумерованных или ненумерованных списков. Этот атрибут устарел в HTML5. Вместо него используйте CSS-свойства list-style-type или list-style-image.
valuenumberЗадаёт числовое значение элемента списка. Допускаются отрицательные значения. Работает только с элементом <li> внутри нумерованного списка.

Тег <li> поддерживает глобальные атрибуты и атрибуты событий.

Применение CSS к элементу <li>

Помимо маркера, можно стилизовать сам блок элемента, как и любой другой элемент. Используйте селектор типа li, чтобы охватить все элементы списка, или ограничьте область действия конкретным списком с помощью класса или селектора потомков:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      /* All list items on the page */
      li {
        padding: 8px;
        line-height: 1.6;
      }
      /* Only items inside lists with class "menu" */
      ul.menu > li {
        list-style: none;
        border-bottom: 1px solid #ddd;
      }
      /* Style the marker color separately */
      li::marker {
        color: #0a7cff;
      }
    </style>
  </head>
  <body>
    <ul class="menu">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </body>
</html>

Псевдоэлемент ::marker стилизует маркер или номер, не затрагивая текст элемента — это удобно для изменения цвета или размера маркеров.

Доступность

Программы чтения с экрана воспринимают списки как группу: они объявляют сам список, общее количество элементов и позицию каждого элемента (например, «список, 3 элемента, элемент 1»). Этот контекст помогает пользователям понять структуру, поэтому размещайте связанные элементы в одном <ul> или <ol>, а не имитируйте список с помощью <div> и переносов строк.

Внимание

Удаление маркеров с помощью list-style: none может привести к тому, что VoiceOver в Safari перестанет распознавать элемент как список, и количество элементов больше не будет объявляться. Если вы убираете маркеры для навигационных меню, добавьте атрибут role="list" обратно к элементу <ul>, чтобы сохранить семантику списка.

<ul role="list" style="list-style: none;">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Связанные теги

  • <ul> — ненумерованный (маркированный) список
  • <ol> — нумерованный (упорядоченный) список
  • <menu> — список команд или пунктов меню
  • HTML-списки — обзор всех типов списков

Практика

Практика
Что определяет HTML-тег li?
Что определяет HTML-тег li?
Практика
Что произойдёт в нумерованном списке, если задать value=5 для первого элемента li?
Что произойдёт в нумерованном списке, если задать value=5 для первого элемента li?
Was this page helpful?