Тег | HTML справочник
HTML тегиЗначение и применение
Каждый элемент списка начинается с тега <li> (сокращенное от английского list item — элемент списка). Данный элемент используется в нумерованных (упорядоченных) списках (<ol>), маркированных (неупорядоченных) списках (<ul>) и в контекстных меню(<menu>).
Допускается не использовать закрывающий тег (</li>) в том случае, если после элемента списка сразу же следует еще один элемент списка <li>, или если дальнейшее содержание в родительском элементе отсутствует.
Поддержка браузерами
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
type | 1 A a I i disc square circle | Не поддерживается в HTML5 . Указывает тип маркера, который будет использоваться. Используйте вместо данного атрибута CSS свойство list-style-type, либо для некоторых задач атрибут type к нумерованным (упорядоченным) спискам(<ol>). |
number | Задает значение для элемента списка, при этом значение следующих пунктов списка будет продолжено (инкрементировано). Значение должно быть целочисленным и может быть использовано только в нумерованных списках (<ol>). Допускается использование отрицательных значений. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута value HTML тега <li></title> </head> <body> <ol> <li value="10">Первый пункт</li> <!--указываем, что элемент списка начнётся со значения "10" --> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol> <li value="-5">Первый пункт</li> <!--указываем, что элемент списка начнётся со значения "-5" --> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "A"> <!--указываем, что список формируется в алфавитном порядке заглавными буквами --> <li value="2">Первый пункт</li> <!--указываем, что элемент списка начнётся с заглавной буквы "B" (вторая в алфавите) --> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>Пример использования атрибута value HTML тега <li>(задает значение для элемента списка).
Отличия HTML 4.01 от HTML 5
В HTML5 атрибут type больше не поддерживается. Атрибут value считался устаревшим в HTML4, но вновь введен в HTML5.Значение CSS по умолчанию
li { display: list-item; }
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML тегиТег — пункты списка
Поддержка браузерами
Описание
HTML тег <li>
(li сокращение от англ. list item — элемент списка) определяет пункты списка и может включать в себя любые другие HTML-элементы (списки, абзацы, изображения и др.). По умолчанию браузеры отображают пункты списка с небольшим отступом с левой стороны.
Тег <li>
может быть расположен в трех элементах: в нумерованных (<ol>) и маркированных (<ul>) списках, а также в меню (<menu>
). В каждом из этих элементов он будет отображаться по разному, например, в нумерованном списке, каждому элементу списка будет предшествовать порядковое значение в виде цифры или алфавитного символа.
Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения.
Обратите внимание, что тег <li>
относится к блочным элементам, то есть каждый элемент списка, определенный с его помощью, будет начинаться с новой строки и занимать всю доступную для него ширину.
Примечание: по стандарту HTML5 элемент <li>
не обязательно должен завершаться закрывающим тегом.
Атрибуты
- value:
- Значение, заданное в атрибуте, указывает текущий порядковый номер элемента в списке. Нумерация всех последующих элементов списка будет продолжаться от указанного значения.
Пример »
Примечание: работает только с нумерованными списками.
Тег <li> так же поддерживает Глобальные атрибуты и События
Стиль по умолчанию
li { display: list-item; }
Пример
<ol> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ol> <ul> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ul>
Результат данного примера в окне браузера:
| HTML | WebReference
Элемент <li> (от англ. list item — пункт списка) определяет отдельный пункт списка. Внешний элемент <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.
Синтаксис
<ul>
<li>элемент маркированного списка</li>
</ul>
<ol>
<li>элемент нумерованного списка</li>
</ol>
Закрывающий тег
Не обязателен.
Атрибуты
- type
- Устанавливает вид маркера нумерованного или маркированного списка.
- value
- Число, с которого будет начинаться нумерованный список.
Также для этого элемента доступны универсальные атрибуты и события.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>LI</title>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид маркированного списка в браузере
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
×Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
| Справочник HTML
Элемент <li> (от англ. «list item» ‒ «пункт списка») определяет отдельный пункт списка.
Данный элемент используется в нумерованных (упорядоченных) списках (<ol>), маркированных (неупорядоченных) списках (<ul>) и в контекстных меню(<menu>).
Примечание: Допускается не использовать закрывающий тег (</li>) в том случае, если после элемента списка сразу же следует еще один элемент списка <li>, или если дальнейшее содержание в родительском элементе отсутствует.
Примечание: Элемент <li> относится к блочным элементам, то есть каждый элемент списка, определенный с его помощью, будет начинаться с новой строки и занимать всю доступную для него ширину.
Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения.
Синтаксис
<(ul | ol | menu)>
...
<li> ... </li>
...
</(ul | ol | menu)>
Закрывающий тег
Не обязателен.
Атрибуты
- typeУстарел
- Определяет вид маркера для элемента списка.
- valueОсуждается в HTML4HTML5
- Определяет стартовое значение для числового маркера элементов списка.
Элемент поддерживает глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <li> со следующими значениями CSS по умолчанию:
li {
display: list-item;
}
Различия между HTML 4.01 и HTML5
В HTML5 атрибут type больше не поддерживается. Атрибут value считался устаревшим в HTML4, но вновь введен в HTML5.
Пример использования:
Один упорядоченный и один неупорядоченный HTML списки:
Пример HTML:
Попробуй сам<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Спецификации
Поддержка браузерами
Элемент | ||||||
<li> | 2+ | 1+ | 4+ | 1+ | 1+ | 1+ |
Элемент | ||||
<li> | 1+ | 1+ | 6+ | 1+ |
Попробуйте сами — Примеры
Применение атрибутов type и start
Создание списка внутри списка:
Вложенный список
Учебник HTML
HTML уроки: HTML Списки
HTML Элементы
Атрибут type | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает вид маркера. Тип маркера и его значение зависит от внешнего контейнера <ul> или <ol>.
Синтаксис
<li type="disc | circle | square">...</li>
<li type="A | a | I | i | 1">...</li>
Значения
Для маркированного списка (тег <ul>) маркеры могут принимать один из трех видов: круг, окружность и квадрат. Значения атрибута type и получаемый вид показан в табл. 1.
Код | Пример |
---|---|
<li type=»disc»> |
|
<li type=»circle»> |
|
<li type=»square»> |
|
Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега <ol>, который и используется для создания списка. В качестве маркеров могут быть следующие значения:
- заглавные латинские буквы;
- строчные латинские буквы;
- заглавные римские цифры;
- строчные римские цифры;
- арабские цифры.
В табл. 2 приведены различные значения атрибута type тега <li> и результат их применения.
Код | Пример |
---|---|
<ol> <li type=»A»> </ol> |
|
<ol> <li type=»a»> </ol> |
|
<ol> <li type=»I»> </ol> |
|
<ol> <li type=»i»> </ol> |
|
<ol> <li type=»1″> </ol> |
|
Значение по умолчанию
disc и 1
Аналог CSS
list-style-type
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег LI, атрибут type</title>
</head>
<body>
<ul>
<li type="square">Чебурашка</li>
<li>Крокодил Гена</li>
<li type="circle">Шапокляк</li>
</ul>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Разные маркеры в списке
Тег | HTML справочник
HTML тегиЗначение и применение
Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега <ol> (сокращенное от английского ordered list — упорядоченный список). Каждый элемент списка начинается с тега <li> (элемент списка).
Поддержка браузерами
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
compact | compact | Не поддерживается в HTML5. Указывает, что список должен быть меньше обычного размера (line-height: 80%). Используйте CSS вместо данного атрибута. |
reversed | reversed | Указывает, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge. |
start | number | Определяет начальное значение нумерованного (упорядоченного) списка. Значения должны быть целочисленными, допускается использование отрицательных значений. При использовании с буквами (type = «A» и type = «a»), число, указанное в значении атрибута является порядковым номером буквы в алфавите. Например, start = «4», будет соответствовать букве «D» и список начнётся именно с неё. При использовании значения start = «27» счетчик обнуляется, при этом список становится двухзначным («27» = «AA», «28» = «AB», «29» = «AC»…). |
type | 1(по умолчанию) A(большие) a(строчные) I(римские большие) i(римские маленькие) | Определяет тип маркера, который используется в построении нумерованного (упорядоченного) списка. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования тега <ol> </title> </head> <body> <ol> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>
Выглядеть на странице это будет соответственно так:
- Первый пункт.
- Второй пункт.
- Третий пункт.
Если вы хотите, чтобы список начинался с определённого номера (не с 1), то необходимо указать атрибут start для тега <ol>.
Например:<ol start = "101"> <!--список начнётся с номера 101-->
Ещё один интересный атрибут — type, который позволит Вам задать буквенную нумерацию («A» – большие, «a» – строчные), либо нумерацию из римских цифр («I» – в верхнем регистре, «i» – в нижнем регистре).
Рассмотрим пример в котором представлены все возможные значения атрибута type (отличные от значения по умолчанию):
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута type HTML тега <оl></title> </head> <body> <ol type = "A"> <!--указываем, что список формируется в алфавитном порядке заглавными буквами --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "a"> <!--указываем, что список формируется в алфавитном порядке строчными буквами --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "I"> <!--указываем, что список формируется римскими цифрами в верхнем регистре --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "i"> <!--указываем, что список формируется римскими цифрами в нижнем регистре --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>Виды нумерованных списков.
Обращаю Ваше внимание, что допускается формировать нумерованные (упорядоченные) списки, вложенные в другие нумерованные списки (внутри элемента списка <li>):
<!DOCTYPE html> <html> <head> <title>Пример нумерованного списка, вложенного в другой нумерованный список</title> </head> <body> <ol> <li>Первый пункт <ol> <!--открываем новый нумерованный список внутри элемента списка--> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>
Выглядеть на странице это будет соответственно так:
- Первый пункт.
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Второй пункт.
- Третий пункт.
Отличия HTML 4.01 от HTML 5
В HTML5 добавлен новый атрибут reversed, атрибут compact больше не поддерживается в HTML5 .Значение CSS по умолчанию
ol { display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; padding-left: 40px; }
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML тегиАтрибут type тега | HTML справочник
HTML тег <ol>Значение и применение
Атрибут type определяет тип маркера, который используется в построении нумерованного (упорядоченного) списка (HTML тег <ol>).
Поддержка браузерами
Синтаксис:
<ol type = "1 | A | a | I | i">
Значения атрибута
Значение | Описание |
---|---|
1 | Определяет список из десятичных чисел (1,2,3…). Это значение по умолчанию. |
A | Список формируется в алфавитном порядке заглавными буквами(A, B, C…). |
a | Список формируется в алфавитном порядке строчными буквами(a, b, c…). |
I | Список формируется римскими цифрами в верхнем регистре(I, II, III…). |
i | Список формируется римскими цифрами в нижнем регистре(i, ii, iii…). |
Отличия HTML 4.01 от HTML 5
Нет.Пример использования
Рассмотрим пример в котором представлены все возможные значения атрибута type (отличные от значения по умолчанию):
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута type HTML тега <оl></title> </head> <body> <ol type = "A"> <!--указываем, что список формируется в алфавитном порядке заглавными буквами --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "a"> <!--указываем, что список формируется в алфавитном порядке строчными буквами --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "I"> <!--указываем, что список формируется римскими цифрами в верхнем регистре --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "i"> <!--указываем, что список формируется римскими цифрами в нижнем регистре --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>Пример использования атрибута type HTML тега <оl>(определяет тип маркера, который используется в построении нумерованного(упорядоченного) списка).
Рассмотрим пример в котором список начинается с определённой буквы алфавита, для этого нам необходимо использовать атрибут start HTML тега <ol>:
<!DOCTYPE html> <html> <head> <title>Пример использования атрибутов type и start HTML тега <оl></title> </head> <body> <p>Нумерованный(упорядоченный) список(type="A" start="5"):</p> <ol type = "A" start = "5"> <!--указываем, что список начнётся с заглавной буквы "E" (пятая в алфавите) --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <p>Нумерованный(упорядоченный) список(type="a" start="27"):</p> <ol type = "a" start = "27"> <!--указываем, что список начнётся с двух строчных "a" (порядковый 27) --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>Пример использования атрибутов type и start HTML тега <оl>(тип маркера и начальное значение нумерованного (упорядоченного) списка).HTML тег <ol>