Li в html – Списки html: теги ul, ol, li, dl, dd, dt | Создание сайтов и заработок в сети

Содержание

Тег | HTML справочник

HTML теги

Значение и применение

Каждый элемент списка начинается с тега <li> (сокращенное от английского list item - элемент списка). Данный элемент используется в нумерованных (упорядоченных) списках (<ol>), маркированных (неупорядоченных) списках (<ul>) и в контекстных меню(<menu>).

Допускается не использовать закрывающий тег (</li>) в том случае, если после элемента списка сразу же следует еще один элемент списка <li>, или если дальнейшее содержание в родительском элементе отсутствует.

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

Атрибуты

АтрибутЗначениеОписание
type1
A
a
I
i
disc
square
circle
Не поддерживается в HTML5 .
Указывает тип маркера, который будет использоваться.
Используйте вместо данного атрибута CSS свойство list-style-type, либо для некоторых задач атрибут type к нумерованным (упорядоченным) спискам(<ol>).
valuenumberЗадает значение для элемента списка, при этом значение следующих пунктов списка будет продолжено (инкрементировано). Значение должно быть целочисленным и может быть использовано только в нумерованных списках (<ol>). Допускается использование отрицательных значений.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования атрибута value HTML тега <li></title>
</head>
<body>
<ol> 
	<li value="10">Первый пункт</li&gt  <!--указываем, что элемент списка начнётся со значения "10" --> 
	<li>Второй пункт</li>
	<li>Третий пункт</li>
</оl>
<ol> 
	<li value="-5">Первый пункт</li&gt  <!--указываем, что элемент списка начнётся со значения "-5" --> 
	<li>Второй пункт</li>
	<li>Третий пункт</li>
</оl>
<ol  type = "A">  <!--указываем, что список формируется в алфавитном порядке заглавными буквами --> 
	<li value="2">Первый пункт</li&gt <!--указываем, что элемент списка начнётся с заглавной буквы "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>

Результат данного примера в окне браузера:

Пример использования тега <li>

| 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

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

| Справочник 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+

Попробуйте сами - Примеры

Как сделать, чтобы список начинался с номера, отличного от 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.

Табл 1. Параметры маркированного списка
Код Пример
<li type="disc">
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
<li type="circle">
  • Чебурашка
  • Крокодил Гена
  • Шапокляк
<li type="square">
  • Чебурашка
  • Крокодил Гена
  • Шапокляк

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега <ol>, который и используется для создания списка. В качестве маркеров могут быть следующие значения:

  • заглавные латинские буквы;
  • строчные латинские буквы;
  • заглавные римские цифры;
  • строчные римские цифры;
  • арабские цифры.

В табл. 2 приведены различные значения атрибута type тега <li> и результат их применения.

Табл 2. Параметры нумерованного списка
Код Пример
<ol> <li type="A"> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type="a"> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type="I"> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type="i"> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol> <li type="1"> </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк

Значение по умолчанию

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> (элемент списка).

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

Атрибуты

АтрибутЗначениеОписание
compactcompactНе поддерживается в HTML5.
Указывает, что список должен быть меньше обычного размера (line-height: 80%).
Используйте CSS вместо данного атрибута.
reversedreversedУказывает, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge.
startnumberОпределяет начальное значение нумерованного (упорядоченного) списка. Значения должны быть целочисленными, допускается использование отрицательных значений. При использовании с буквами (type = "A" и type = "a"), число, указанное в значении атрибута является порядковым номером буквы в алфавите. Например, start = "4", будет соответствовать букве "D" и список начнётся именно с неё. При использовании значения start = "27" счетчик обнуляется, при этом список становится двухзначным ("27" = "AA", "28" = "AB", "29" = "AC"...).
type1(по умолчанию)
A(большие)
a(строчные)
I(римские большие)
i(римские маленькие)
Определяет тип маркера, который используется в построении нумерованного (упорядоченного) списка.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <ol> </title>
	</head>
	<body>
		<ol> 
			<li>Первый пункт</li&gt
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</оl>
	</body>
</html>

Выглядеть на странице это будет соответственно так:

  1. Первый пункт.
  2. Второй пункт.
  3. Третий пункт.

Если вы хотите, чтобы список начинался с определённого номера (не с 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&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
	<ol type = "a"> <!--указываем, что список формируется в алфавитном порядке строчными буквами --> 
		<li>Первый пункт</li&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
	<ol type = "I"> <!--указываем, что список формируется римскими цифрами в верхнем регистре --> 
		<li>Первый пункт</li&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
	<ol type = "i"> <!--указываем, что список формируется римскими цифрами в нижнем регистре --> 
		<li>Первый пункт</li&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
</body>
</html>
Виды нумерованных списков.

Обращаю Ваше внимание, что допускается формировать нумерованные (упорядоченные) списки, вложенные в другие нумерованные списки (внутри элемента списка <li>):

<!DOCTYPE html>
<html>
<head>
<title>Пример нумерованного списка, вложенного в другой нумерованный список</title>
</head>
<body>
	<ol> 
		<li>Первый пункт
			<ol>  <!--открываем новый нумерованный список внутри элемента списка--> 
				<li>Первый пункт</li&gt
				<li>Второй пункт</li>
				<li>Третий пункт</li>
			</оl>
		</li&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
</body>
</html>

Выглядеть на странице это будет соответственно так:

  1. Первый пункт.
    1. Первый пункт.
    2. Второй пункт.
    3. Третий пункт.
  2. Второй пункт.
  3. Третий пункт.

Отличия 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&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
	<ol type = "a"> <!--указываем, что список формируется в алфавитном порядке строчными буквами --> 
		<li>Первый пункт</li&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
	<ol type = "I"> <!--указываем, что список формируется римскими цифрами в верхнем регистре --> 
		<li>Первый пункт</li&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
	<ol type = "i"> <!--указываем, что список формируется римскими цифрами в нижнем регистре --> 
		<li>Первый пункт</li&gt
		<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&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
	<p>Нумерованный(упорядоченный) список(type="a" start="27"):</p>
	<ol type = "a" start = "27">  <!--указываем, что список начнётся с двух строчных  "a" (порядковый 27) --> 
		<li>Первый пункт</li&gt
		<li>Второй пункт</li>
		<li>Третий пункт</li>
	</оl>
</body>
</html>
Пример использования атрибутов type и start HTML тега <оl>(тип маркера и начальное значение нумерованного (упорядоченного) списка).HTML тег <ol>

Отправить ответ

avatar
  Подписаться  
Уведомление о