Скрытие подзаголовков
Элемент hgroup позволяет обрабатывать несколько элементов заголовка как один элемент, не затрагивая контур вашего HTML документа. В таблице 10-4 представлен элемент hgroup.
Таблица 10-4: Элемент hgroup| Элемент | hgroup |
| Тип элемента | Потоковый |
| Разрешенные родительские элементы | Любой элемент, который может содержать потоковый контент |
| Локальные атрибуты | Нет |
| Содержание | Один и более элементов заголовка (h1–h6) |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Да |
| Изменения в HTML5 | N/A |
| Соглашение по стилям | hgroup { display: block; } |
Наиболее распространенной задачей, которую решает hgroup, является работа с подзаголовками. Представьте себе, что я хочу создать раздел в моем документе под названием «Фрукты, которые мне нравятся» с подзаголовком «Как я научился любить цитрусовые». Я мог бы использовать элементы h1 и h2, как показано в листинге 10-2.
Листинг 10-2: Использование элементовh1иh2для создания заголовка и подзаголовка
<!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>
<h1>Fruits I Like</h1>
<h2>How I Learned to Love Citrus</h2>
I like apples and oranges.
<h2>Additional fruits</h2>
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
<h3>More information</h3>
You can see other fruits I like <a href="fruitlist.html">here</a>.
<h1>Activities I Like</h1>
<p>
I like to swim, cycle and run. I am in training for my first triathlon,
but it is hard work.
</p>
<h2>Kinds of Triathlon</h2>
There are different kinds of triathlon - sprint, Olympic and so on.
<h3>The kind of triathlon I am aiming for</h3>
I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</body>
</html>
Проблема здесь заключается в том, что вы не сможете отличить элемент h2, который является подзаголовком, от элемента h2, который является заголовком более низкого уровня. Если вы напишете скрипт, который проходит через весь документ, чтобы выстроить его структуру, основываясь на элементах h1-h6, вы получите искаженный результат, как этот:
Fruits I Like
How I Learned to Love Citrus
Additional fruits
More information
Activities I Like
Kinds of Triathlon
The kind of triathlon I am aiming forСоздается впечатление, что «Как я научился любить цитрусовые» – это заголовок раздела, а не подзаголовок. Эту проблему можно решить с помощью элемента hgroup, как показано в листинге 10-3.
Листинг 10-3: Использование элемента hgroup<!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>
h1, h2, h3 {
background: grey;
color: white;
}
hgroup > h1 {
margin-bottom: 0px;
}
hgroup > h2 {
background: grey;
color: white;
font-size: 1em;
margin-top: 0px;
}
</style>
</head>
<body>
<hgroup>
<h1>Fruits I Like</h1>
<h2>How I Learned to Love Citrus</h2>
</hgroup>
I like apples and oranges.
<h2>Additional fruits</h2>
I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
<h3>More information</h3>
You can see other fruits I like <a href="fruitlist.html">here</a>.
<h1>Activities I like</h1>
<p>
I like to swim, cycle and run. I am in training for my first triathlon,
but it is hard work.
</p>
<h2>Kinds of Triathlon</h2>
There are different kinds of triathlon - sprint, Olympic and so on.
<h3>The kind of triathlon I am aiming for</h3>
I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</body>
</html>
Позиция в иерархии h1-h6 элемента hgroup определяется первым дочерним элементом заголовка внутри hgroup. Например, hgroup в листинге эквивалентен элементу h1, потому что это первый дочерний элемент. Только первый элемент h1-h6 включается в структуру документа, что дает нам структуру, подобную этой:
Fruits I Like
Additional fruits
More information
Activities I Like
Kinds of Triathlon
The kind of triathlon I am aiming forБольше нет путаницы с элементом подзаголовка h2 – элемент hgroup говорит нам, что мы должны его игнорировать. Теперь нам нужно сделать так, чтобы подзаголовок визуально отличался от обычного элемента h2. Вы видите, что я применил в листинге несколько простых стилей, результат чего отображен на рисунке 10-2. Узнать, как работают CSS селекторы в листинге, можно в главе 17.
Рисунок 10-2: Наглядное визуальное оформление отношений между элементами в hgroup
Я не предлагаю вам перенимать такой резкий стиль, но вы видите, что вы можете визуально представить отношения между элементами в элементе hgroup, применяя стили, которые обрезают некоторые отступы у элементов заголовка и группируют элементы при помощи общего заднего фона.
