Группирование контента в списки

HTML определяет несколько элементов, которые можно использовать для создания списков элементов контента. Вы увидите в следующих разделах, что можно создать упорядоченные, неупорядоченные и описательные списки.

Элемент ol

Элемент ol обозначает упорядоченный список. Элементы списка обозначаются при помощи элемента li, который описан в следующем разделе. В таблице 9-7 представлен элемент ol.

Таблица 9-7: Элемент ol

Элемент	`ol`
Тип элемента	Потоковый
Разрешенные родительские элементы	Любой элемент, который может содержать потоковые элементы
Локальные атрибуты	`start`, `reversed`, `type`
Содержание	Ноль или больше элементов `li`
Стиль тегов	Открывающий и закрывающий теги
Новый в HTML5	Нет
Изменения в HTML5	В HTML5 был добавлен новый атрибут `reversed`. Атрибуты `start` и `type`, которые считались устаревшими в HTML4, были восстановлены в HTML5, но с семантическим (а не с презентационным) значением. Атрибут `compact` сейчас считается устаревшим
Соглашение по стилям	`ol { display: block; list-style-type: decimal; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; padding-start: 40px; }`

В листинге 9-7 показано, как используется элемент ol для создания простого упорядоченного списка.

Листинг 9-7: Создание простого списка при помощи элемента ol

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	I like apples and oranges.
	I also like:
	<ol>
		<li>bananas</li>
		<li>mangoes</li>
		<li>cherries</li>
		<li>plums</li>
		<li>peaches</li>
		<li>grapes</li>
	</ol>
	You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>

Вы можете увидеть, как браузер отображает этот список, на рисунке 9-6.

Рисунок 9-6: Простой упорядоченный список

Вы можете управлять способом, которым представляются элементы в списке, при помощи атрибутов, определенных в элементе ol. Атрибут start используется для того, чтобы определить порядковый номер первого элемента в списке. Если этот атрибут не определен, первому элементу присваивается порядковый номер 1. Атрибут type используется для того, чтобы указать, какой маркер должен отображаться рядом с каждым элементом списка. В таблице 9-8 показаны поддерживаемые значения для этого атрибута.

Таблица 9-8: Поддерживаемые значения для атрибута type элемента ol

Значение	Описание	Пример
`1`	Десятичные числа (по умолчанию)	`1., 2., 3., 4.`
`a`	Строчные латинские буквы	`a., b., c., d.`
`A`	Заглавные латинские буквы	`A., B., C., D.`
`i`	Строчные римские числа (символы)	`i., ii., iii., iv.`
`I`	Заглавные римские символы (числа)	`I., II., III., IV.`

Если определен атрибут reversed, то список нумеруется в порядке убывания. Однако, когда я писал эту книгу, ни один из основных браузеров не поддерживал атрибут reversed.

Элемент ul

Элемент ul используется для обозначения неупорядоченных списков. Как и с элементом ol, единицы списка в элементе ul обозначаются при помощи элемента li, который описан далее. В таблице 9-9 представлен элемент ul.

Таблица 9-9: Элемент ul

Элемент	`ul`
Тип элемента	Потоковый
Разрешенные родительские элементы	Любой элемент, который может содержать потоковые элементы
Локальные атрибуты	Нет
Содержание	Ноль или больше элементов `li`
Стиль тегов	Открывающий и закрывающий теги
Новый в HTML5	Нет
Изменения в HTML5	Атрибуты `type` и `compact` считаются устаревшими
Соглашение по стилям	`ul { display: block; list-style-type: disc; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; padding-start: 40px; }`

Элемент ul содержит ряд элементов li. Этот элемент не определяет никаких атрибутов, и вы управляете представлением списка при помощи CSS. Вы можете видеть, как используется элемент ul, в листинге 9-8.

Листинг 9-8: Использование элемента ul

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	I like apples and oranges.
	I also like:
	<ul>
		<li>bananas</li>
		<li>mangoes</li>
		<li>cherries</li>
		<li>plums</li>
		<li>peaches</li>
		<li>grapes</li>
	</ul>
	You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>

Каждый элемент списка отображается с маркером. Вы можете управлять тем, какой стиль маркера используется, при помощи CSS свойства list-style-type, которое описано в главе 24. Стиль по умолчанию (который использует стиль маркера disc) представлен на рисунке 9-7.

Рисунок 9-7: Стиль по умолчанию для элемента ul

Элемент li

Элемент li обозначает элемент (пункт) списка. Вы можете использовать его с элементами ul, ol и menu (элемент menu на данный момент не поддерживается основными браузерами). В таблице 9-10 представлен элемент li.

Таблица 9-10: Элемент li

Элемент	`li`
Тип элемента	N/A
Разрешенные родительские элементы	`ul`, `ol`, `menu`
Локальные атрибуты	`value` (только если родительским элементом является `ol`)
Содержание	Потоковый контент
Стиль тегов	Открывающий и закрывающий теги
Новый в HTML5	Нет
Изменения в HTML5	Атрибут `value` считался устаревшими в HTML4, а в HTML5 он был восстановлен.
Соглашение по стилям	`li { display: list-item; }`

Элемент li очень простой. Он обозначает элемент списка в пределах его родительского элемента. Можно, однако, использовать атрибут value для создания непоследовательно упорядоченного списка, как показано в листинге 9-9.

Листинг 9-9: Создание непоследовательно упорядоченного списка

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	I like apples and oranges.
	I also like:
	<ol>
		<li>bananas</li>
		<li value="4">mangoes</li>
		<li>cherries</li>
		<li value="7">plums</li>
		<li>peaches</li>
		<li>grapes</li>
	</ol>
	You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>

Когда браузер встречает элемент li с атрибутом value, счетчик для элементов списка перемещается к значению этого атрибута. Результат вы можете увидеть на рисунке 9-8.

Рисунок 9-8: Создание непоследовательно упорядоченного списка

Создание описательных списков

Описательный список состоит из набора групп термин/описание (т. е. из числа терминов, каждый из которых сопровождается определением этого термина). Вы используете три элемента, чтобы определить описательный список: элементы dl, dt и dd. Эти элементы не определяют никаких атрибутов, и они не изменились в HTML5. В таблице 9-11 представлены эти элементы.

Таблица 9-11: Элементы описательного списка

Элемент	Описание	Соглашение по стилям
`dl`	Обозначает описательный список	`dl { display: block; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; }`
`dt`	Обозначает термин внутри описательного списка	`dt { display: block; }`
`dd`	Обозначает определение внутри описательного списка	`dd { display: block; margin-start: 40px; }`

Как используются эти элементы, можно увидеть в листинге 9-10. Обратите внимание, что несколько элементов dd могут быть использованы для одного элемента dt, что позволяет дать несколько определений для одного термина.

Листинг 9-10: Создание описательных списков

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	I like apples and oranges.
	I also like:
	<dl>
		<dt>Apple</dt>
		<dd>The apple is the pomaceous fruit of the apple tree</dd>
		<dd><i>Malus domestica</i></dd>
		<dt>Banana</dt>
		<dd>The banana is the parthenocarpic fruit of the banana tree</dd>
		<dd><i>Musa acuminata</i></dd>
		<dt>Cherry</dt>
		<dd>The cherry is the stone fruit of the genus <i>Prunus</i></dd>
	</dl>
	You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>

Создание пользовательских списков

HTML поддержка списков является более гибкой, чем это может показаться на первый взгляд. Вы можете создавать сложные механизмы списков с помощью элемента ul в сочетании с двумя свойствами CSS: значением counter и селектором :before. Я описываю значение counter и селектор :before (а также его парный селектор :after) в главе 17. Я не хочу слишком углубляться в CSS в этой главе, так что я представляю этот пример в качестве автономной демонстрации, чтобы вы вернулись к нему, когда прочтете главы о CSS далее в этой книге, или когда вам очень понадобятся продвинутые списки. В листинге 9-11 показан список, который содержит два вложенных списка. Все три списка нумеруются с использованием пользовательских значений.

Листинг 9-11: Вложенные списки с пользовательскими значениями

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<style>
		body {
			counter-reset: OuterItemCount 5 InnerItemCount;
		}

		#outerlist > li:before {
			content: counter(OuterItemCount) ". ";
			counter-increment: OuterItemCount 2;
		}

		ul.innerlist > li:before {
			content: counter(InnerItemCount, lower-alpha) ". ";
			counter-increment: InnerItemCount;
		}
	</style>
</head>
<body>
	I like apples and oranges.
	I also like:
	<ul id="outerlist" style="list-style-type: none">
		<li>bananas</li>
		<li>mangoes, including: </li>
		<ul class="innerlist">
			<li>Haden mangoes</li>
			<li>Keitt mangoes</li>
			<li>Kent mangoes</li>
		</ul>
		<li>cherries</li>
		<li>plums, including:
			<ul class="innerlist">
				<li>Elephant Heart plums</li>
				<li>Stanley plums</li>
				<li>Seneca plums</li>
			</ul>
		</li>
		<li>peaches</li>
		<li>grapes</li>
	</ul>
	You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>

Вы можете увидеть, как браузер отображает эти списки, на рисунке 9-9.

Рисунок 9-9: Пользовательские списки, созданные при помощи возможностей CSS

Есть несколько вещей из предыдущего примера, которые заслуживают нашего внимания. Все списки в HTML документе являются неупорядоченными и создаются при помощи элемента ul. Это объясняется тем, что я могу отключить стандартные маркеры (используя свойство list-style-type) и обратиться к содержанию, сгенерированному селектором :before.

Также стоит отметить, что нумерация внешнего списка (списка фруктов) начинается с 7 и идет с шагом в 2 (нечетные числа). Этого нельзя сделать при помощи стандартного элемента ol. Функция CSS counter немного неудобна в использовании, зато очень гибкая.

И, наконец, следует отметить, что нумерация внутренних списков (сорта манго и сливы) непрерывна. Подобного результата можно достичь, используя либо атрибут value элемента li, либо атрибут start элемента ol. Тем не менее, оба этих подхода требуют того, чтобы вы заранее знали, со сколькими элементами списка вы будете работать, что не всегда возможно при работе с веб приложениями.

9.8. Работа с фигурами

или RSS канал: