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

Последний из группирующих элементов относится к фигурам. HTML5 определяет фигуру как «единицу содержания, опционально с заголовком, которая является самодостаточной, на которую обычно ссылаются как на единое целое в основным потоке документа и которая может быть удалена из основного потока документа без ущерба для смысла документа». Это достаточно общее определение, выходящее за рамки имеющегося традиционного представления о фигуре, которая является некоторой формой иллюстрации или диаграммы. Фигура определяется при помощи элемента figure, который приводится в таблице 9-12.

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

Элемент	`figure`
Тип элемента	Потоковый
Разрешенные родительские элементы	Любой элемент, который может содержать потоковые элементы
Локальные атрибуты	Нет
Содержание	Потоковый контент и опционально один элемент `figcaption`
Стиль тегов	Открывающий и закрывающий теги
Новый в HTML5	Да
Изменения в HTML5	N/A
Соглашение по стилям	`figure { display: block; margin-before: 1em; margin-after: 1em; margin-start: 40px; margin-end: 40px; }`

Опционально элемент figure может содержать элемент figcaption, который обозначает заголовок фигуры. В таблице 9-13 представлен элемент figcaption.

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

Элемент	`figcaption`
Тип элемента	N/A
Разрешенные родительские элементы	`figure`
Локальные атрибуты	Нет
Содержание	Потоковый контент
Стиль тегов	Открывающий и закрывающий теги
Новый в HTML5	Да
Изменения в HTML5	N/A
Соглашение по стилям	`figcaption { display: block; }`

В листинге 9-12 показано, как вместе используются элементы figure и figcaption.

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

<!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.
	<figure>
		<figcaption>Listing 23. Using the code element</figcaption>
		<code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br>
			document.writeln("I like " + fruits.length + " fruits");
		</code>
	</figure>
	You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>

В этом примере я использовал элемент figure для создания фигуры вокруг элемента code. Чтобы добавить заголовок, я использовал элемент figcaption. Обратите внимание, что figcaption должен быть первым или последним дочерним элементом у figure. Вы можете увидеть, как браузер применяет стили для этих элементов, на рисунке 9-10.

Рисунок 9-10: Использование элементов figure и figcaption

9.9. Резюме

или RSS канал: