Кратко
Скопировано<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>
.
Атрибуты
Скопированоvalue
СкопированоМожно установить номер пункта <li>
, с которого начнётся нумерация списка (только для <ol>
).
Значением value
может быть любое целое положительное число:
<ol> <li value="3">Белка</li> <li>Лиса</li> <li>Ёж</li></ol>
<ol> <li value="3">Белка</li> <li>Лиса</li> <li>Ёж</li> </ol>
type
СкопированоС помощью атрибута 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
Подсказки
Скопировано💡 Внутрь тега <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>
браузеры добавляют псевдоэлемент :
, который выводит маркер или цифру, в зависимости от типа списка. По умолчанию, в неупорядоченном списке <ul>
это маркер в виде точки (disc
), в упорядоченном списке <ol>
— арабская цифра с точкой (decimal
).
Чтобы стилизовать маркер, можно применить стили к :
, а CSS-свойство list
поможет поменять тип маркера или убрать его вовсе (none
).
Свойство list
позволяет задать положение маркера относительно контента.
А для придания списку большей изюминки маркер можно заменить на картинку с помощью list
.
👆 Чтобы свойства применились ко всем элементам <li>
в списке, достаточно задать их внешнему контейнеру (<ul>
или <ol>
).