<li>

<li> — отдельный элемент списка <ol>, <ul> или <menu>.

        
          
          <ul>  <li>Пушкин</li>  <li>Есенин</li>  <li>Бунин</li></ul>
          <ul>
  <li>Пушкин</li>
  <li>Есенин</li>
  <li>Бунин</li>
</ul>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

<li> — сокращение от list item.

<li> нельзя использовать отдельно. Его родителем обязательно должен быть упорядоченный список <ol>, неупорядоченный список <ul> или <menu>.

Можно установить номер пункта <li>, с которого начнётся нумерация списка (только для <ol>).

Значением value может быть любое целое положительное число:

        
          
          <ol>  <li value="3">Белка</li>  <li>Лиса</li>  <li>Ёж</li></ol>
          <ol>
  <li value="3">Белка</li>
  <li>Лиса</li>
  <li>Ёж</li>
</ol>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

С помощью атрибута type можно установить вид маркера. Значение будет зависеть от внешнего контейнера <ol> или <ul>.

        
          
          <ul>  <li type="disc">Белка</li>  <li type="circle">Лиса</li>  <li type="square">Ёж</li></ul><ol>  <li type="A">Правила</li>  <li>Тесты</li>  <li>Ответы</li></ol>
          <ul>
  <li type="disc">Белка</li>
  <li type="circle">Лиса</li>
  <li type="square">Ёж</li>
</ul>

<ol>
  <li type="A">Правила</li>
  <li>Тесты</li>
  <li>Ответы</li>
</ol>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Для нумерованного списка <ol> атрибут type может иметь значения: "a", "i", "I".

👆 Для изменения стиля отображения маркера лучше все-таки использовать CSS, а именно list-style-type

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

        
          
          <ul>  <li>      <a href="#">Главная страница</a>  </li>  <li>      <a href="#">Корзина</a>  </li>  <li>      <a href="#">Отзывы</a>  </li></ul>
          <ul>
  <li>
      <a href="#">Главная страница</a>
  </li>
  <li>
      <a href="#">Корзина</a>
  </li>
  <li>
      <a href="#">Отзывы</a>
  </li>
</ul>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 <li> по умолчанию имеет блочные стили, поэтому пункты будут располагаться друг под другом. Это поведение легко меняется с помощью CSS.

На практике

Скопировать ссылку "На практике" Скопировано

Ольга Рунова советует

Скопировать ссылку "Ольга Рунова советует" Скопировано

🛠️ Для тега <li> браузеры добавляют псевдоэлемент ::marker, который выводит маркер или цифру, в зависимости от типа списка. По умолчанию, в неупорядоченном списке <ul> это маркер в виде точки (disc), в упорядоченном списке <ol> — арабская цифра с точкой (decimal).

Чтобы стилизовать маркер, можно применить стили к ::marker, а CSS-свойство list-style-type поможет поменять тип маркера или убрать его вовсе (none).

Свойство list-style-position позволяет задать положение маркера относительно контента.

А для придания списку большей изюминки маркер можно заменить на картинку с помощью list-style-image.

👆 Чтобы свойства применились ко всем элементам <li> в списке, достаточно задать их внешнему контейнеру (<ul> или <ol>).

+ Развернуть