HTML тег <li>

Тег <li> определяет отдельные пункты HTML списка. Тип списка определяется соответствующими тегами: <ul> - маркированный список, <ol> - нумерованный список, <menu> - контекстное меню.

В браузере пункты списка имеют небольшой отступ с левой стороны.

Синтаксис

Тег <li> парный. В спецификации HTML5 закрывающий тег можно не использовать.

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <p>Нумерованный список:</p>
    <ol>
      <li>Закуски</li>
      <li>Основное блюдо</li>
      <li>Салаты</li>
    </ol>
    <p>Маркированный список</p>
    <ul>
      <li>Прохладительные напитки</li>
      <li>Горячие напитки</li>
      <li>Мороженое</li>
    </ul>
  </body>
</html>

Результат

Для стилизации тега <li> используйте CSS свойство list-style-type.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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>Свойство list-style-type</h1>
    <p>Маркированный список:</p>
    <ul class="a">
      <li>Кофе</li>
      <li>Чай</li>
      <li>Кока Кола</li>
    </ul>
    <ul class="b">
      <li>Кофе</li>
      <li>Чай</li>
      <li>Кока Кола</li>
    </ul>
    <p>Нумерованный список:</p>
    <ol class="c">
      <li>Кофе</li>
      <li>Чай</li>
      <li>Кока Кола</li>
    </ol>
    <ol class="d">
      <li>Кофе</li>
      <li>Чай</li>
      <li>Кока Кола</li>
    </ol>
  </body>
</html>

Результат

Атрибуты

Атрибут Значение Описание
type 1
A
a
I
i
disc
square
circle
Определяет тип маркера нумерованного или маркированного списка.
Атрибут больше не используется. Вместо него мы рекомендуем использовать CSS свойство list-style-type или list-style-image, с помощью которого вместо маркеров можно использовать изображения.
value number Указывает число, с которого будет начинаться нумерованный список. Могут быть использованы отрицательные значения.
Работает только с нумерованным списком.

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

Browser support




Related articles