Главная страница   /   10.2. Скрытие подзаголовков (Руководство по HTML5

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

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

Адам Фриман

10.2. Скрытие подзаголовков

Элемент hgroup позволяет обрабатывать несколько элементов заголовка как один элемент, не затрагивая контур вашего HTML документа. В таблице 10-4 представлен элемент hgroup.

Таблица 10-4: Элемент hgroup
Элемент hgroup
Тип элемента Потоковый
Разрешенные родительские элементы Любой элемент, который может содержать потоковый контент
Локальные атрибуты Нет
Содержание Один и более элементов заголовка (h1h6)
Стиль тегов Открывающий и закрывающий теги
Новый в 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, применяя стили, которые обрезают некоторые отступы у элементов заголовка и группируют элементы при помощи общего заднего фона.