HTML - тег <li>


Пример

Один упорядоченный (<ol>) и один неупорядоченный (<ul>) HTML-список:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Другие примеры «Попробуйте сами» ниже.


Определение и использование

Тег <li>определяет элемент списка.

Тег <li>используется внутри упорядоченных списков ( <ol> ), неупорядоченных списков ( <ul> ) и в списках меню ( <menu> ).

В <ul> и <menu> элементы списка обычно отображаются с маркерами.

В <ol> элементы списка обычно отображаются цифрами или буквами.

Совет: используйте CSS для оформления списков .


Поддержка браузера

Element
<li> Yes Yes Yes Yes Yes

Атрибуты

Attribute Value Description
value number Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number

Глобальные атрибуты

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


Атрибуты события

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



Дополнительные примеры

Пример

Использование атрибута value в упорядоченном списке:

<ol>
  <li value="100">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
  <li>Juice</li>
  <li>Beer</li>
</ol>

Пример

Установите различные типы стилей списка (с помощью CSS):

<ol>
  <li>Coffee</li>
  <li style="list-style-type:lower-alpha">Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li style="list-style-type:square">Tea</li>
  <li>Milk</li>
</ul>

Пример

Создайте список внутри списка (вложенный список):

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Пример

Создайте более сложный вложенный список:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Связанные страницы

Учебник по HTML: HTML-списки

Справочник по HTML DOM: объект Li

Учебное пособие по CSS: списки стилей


Настройки CSS по умолчанию

Большинство браузеров будут отображать <li>элемент со следующими значениями по умолчанию:

li {
  display: list-item;
}