Главная страница   /   9.6. Добавление тематических разрывов (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

9.6. Добавление тематических разрывов

Элемент hr представляет собой тематический разрыв на уровне абзаца. Это еще один странный термин, который возник из необходимости отделить представление от семантики. В HTML4 элемент hr представлял собой горизонтальную линию (буквально, линию по ширине страницы). В HTML5 элемент hr представляет собой переход к отдельной, но связанной теме. Стилем для этого элемента в HTML5 является линия по ширине страницы. В таблице 9-6 представлен элемент hr.

Таблица 9-6: Элемент hr
Элемент hr
Тип элемента Потоковый
Разрешенные родительские элементы Любой элемент, который может содержать потоковые элементы
Локальные атрибуты Нет
Содержание Потоковый контент
Стиль тегов Тег пустого элемента (void)
Новый в HTML5 Нет
Изменения в HTML5 В HTML4 элемент hr имел только презентационный смысл; в HTML5 он получил семантическое значение, которое было описано ранее, а презентационный смысл был понижен. Кроме того, локальные атрибуты align, width, noshade, size и color устарели в HTML5.
Соглашение по стилям
hr { display: block; margin-before: 0.5em;
margin-after: 0.5em; margin-start: auto;
margin-end: auto; border-style: inset;
border-width: 1px; }

Спецификация HTML5 дает неопределенную информацию о том, что представляет собой правильное использование элемента hr, но два примера все же приведены: смена сцены в сказке или рассказе (повести) или переход к другой теме внутри раздела в справочнике. В листинге 9-6 показано, как элемент hr применяется к содержимому.

Листинг 9-6: Использование элемента hr
<!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>
	<p>
		I like apples and oranges.
	I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
	You can see other fruits I like <a href="fruitlist.html">here</a>.
	</p>
	<p>
		My favorite kind of orange is the mandarin, properly known
	as <i>citrus reticulata</i>.
	Oranges at my local store cost <s>$1 each</s> $2 for 3.
	</p>
	<blockquote cite="http://en.wikipedia.org/wiki/Apple">
		The apple forms a tree that is small and deciduous, reaching 3 to 12 metres
	(9.8 to 39 ft) tall, with a broad, often densely twiggy crown.
		<hr>
		The leaves are alternately arranged simple ovals 5 to 12 cm long and 3–6
	centimetres (1.2–2.4 in) broad on a 2 to 5 centimetres (0.79 to 2.0 in) petiole
	with anacute tip, serrated margin and a slightly downy underside. Blossoms are
	produced in spring simultaneously with the budding of the leaves.
		<hr>
		The flowers are white with a pink tinge that gradually fades, five petaled,
	and 2.5 to 3.5 centimetres (0.98 to 1.4 in) in diameter.
	The fruit matures in autumn, and is typically 5 to 9 centimetres (
	2.0 to 3.5 in) in diameter.
		<hr>
		The center of the fruit contains five carpels arranged in a five-point star,
	each carpel containing one to three seeds, called pips.
	</blockquote>
	<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>
	<p>
		The
		<abbr title="Florida Department of Citrus">FDOC</abbr>
		regulates the
	Florida citrus industry.
	</p>
	<p>
		I still remember the best apple I ever tasted.
	I bought it at <time datetime="15:00">3 o'clock</time>
		on <time datetime="1984-12-7">December 7th</time>.
	</p>
</body>
</html>

В этом примере я добавил несколько элементов hr в blockquote, чтобы придать документу некоторую структуру. Вы можете увидеть, как это повлияло на внешний вид HTML, на рисунке 9-5.

Рисунок 9-5: Добавление элементов hr в элемент blockquote