Добавление тематических разрывов
Элемент 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. |
| Соглашение по стилям | |
Спецификация 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
