HTML-тег <li>
Тег HTML <li> определяет отдельные элементы в списке HTML. Теги <ul> и <ol> определяют маркированный и нумерованный списки соответственно. Тег <menu> определяет контекстное меню. Элементы списка обычно отображаются с помощью маркеров (буллитов) в меню и маркированных списках. В нумерованных списках они обычно отображаются с номером или буквой слева.
Синтаксис
Тег <li> используется парами. Содержимое записывается между открывающим (<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> внутри нумерованного списка. Обратите внимание, что в современном HTML5 для управления начальным номером списка предпочтительнее использовать атрибут start у элемента <ol>.
DANGER
Значение атрибута value должно быть допустимым целым числом.
Пример использования атрибута value:
HTML-тег <li> со свойством list-style-type | Пример | W3Docs
<!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://www.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>
.inside {
list-style-position: inside;
}
li {
border: 1px solid #666;
padding: 5px;
}
.outside {
list-style-position: outside;
}
li {
border: 1px solid #666;
padding: 5px;
}
</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>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
type | 1, A, a, I, i, disc, square, circle | Определяет тип маркера для нумерованного или маркированного списка. Этот атрибут устарел в HTML5. Вместо него используйте свойства CSS list-style-type или list-style-image. |
value | number | Указывает числовое значение элемента списка. Можно использовать отрицательные значения. Работает только с элементом <li> внутри нумерованного списка. |
Тег <li> поддерживает глобальные атрибуты и атрибуты событий.
Как стилизовать HTML-тег <li>
{
"tag_name": "li"
}Практика
Что определяет HTML-тег <li>?