Заголовки

Посмотрим на следующий код:

<div id="header">
	<h1>My Weblog</h1>
	<p class="tagline">A lot of effort went into making this effortless.</p>
</div>
	...
<div class="entry">
	<h2>Travel day</h2>
</div>
	...
<div class="entry">
	<h2>I'm going to Prague!</h2>
</div>

В такой разметке нет ничего особо нехорошего. Можно продолжать и дальше так верстать. С точки зрения HTML5 подобный код не будет содержать ошибок. Тем не менее, HTML5 вводит несколько новых семантических тегов для заголовков и секций.

Во-первых, давай избавимся от <div id=»header»> — этот контейнер ничего не значит, ведь <div> не имеет никакой смысловой нагрузки, и атрибут id, в этом смысле, ничем ему не поможет (ПА не в состоянии сделать вывод о назначении данного контейнера по id). Ты можешь написать так: <div id=»zagolovok»> — эффект будет такой же.

Для этих целей в HTML5 появился тег <header>. Спецификация HTML5 приводит ряд реальных примеров использования данного тега. Наш же код целесообразно будет заменить на такой:

<header>
	<h1>My Weblog</h1>
	<p class="tagline">A lot of effort went into making this effortless.</p>
...
</header>

Так уже лучше. Эта разметка объяснит каждому, что тут у нас заголовок. А как на счет слогана? Раньше не было способа его как-то обозначить. Это трудная задача для разметки. Слоган — это как подзаголовок, но он «не привязан» к основному заголовку. Т.е. это подзаголовок, который не создает собственный подраздел.

Заголовки вроде <h1> и <h2> структурируют страницы — разбивают страницу на части, что облегчает восприятие содержимого и навигацию по нему. Программы для чтения с экрана используют эти заголовки для перемещения по странице. Некоторые онлайн инструменты и дополнения к браузерам могут помочь визуализировать структуру документа.

В HTML4 заголовки <h1>-<h6> были единственным способом создать структуру документа. Пример подобной структуры:

My Weblog (h1)
|
+--Travel day (h2)
|
+--I'm going to Prague! (h2)

Вроде неплохо, но при таком раскладе нет никакой возможности обозначить наш слоган «A lot of effort went into making this effortless». Если попробовать обозначить его <h2> — мы добавим в нашу структуру левый узел:

My Weblog (h1)
|
+--A lot of effort went into making this effortless. (h2)
|
+--Travel day (h2)
|
+--I'm going to Prague! (h2)

Нам такая структура не подходит. Слоган не должен создавать подраздел. Он просто является подзаголовком.

Может разметить слоган как <h2>, а все последующие заголовки как <h3>? Станет еще хуже:

My Weblog (h1)
|
+--A lot of effort went into making this effortless. (h2)
|
+--Travel day (h3)
|
+--I'm going to Prague! (h3)

Теперь у нас целая фантомная ветка в структуре, благодаря которой «крадутся» дочерние элементы у корневого элемента. Вот это и есть главная проблема: HTML4 не дает возможности вставлять подзаголовки без добавления узлов в структуру документа. Именно поэтому, чтобы не нарушать структуру документа, наш слоган был заключен в бессмысленный (с точки зрения семантики) тег <p class=»tagline»>.

Для решения подобных проблем в HTML5 появился элемент <hgroup>. Это элемент выступает контейнером для двух и более связанных между собой заголовков. Что означает связанных? Это означает, что эти заголовки создают один узел в структуре документа.

Посмотри на эту разметку:

<header>
	<hgroup>
		<h1>My Weblog</h1>
		<h2>A lot of effort went into making this effortless.</h2>
	</hgroup>
...
</header>
...
<div class="entry">
	<h2>Travel day</h2>
</div>
...
<div class="entry">
	<h2>I'm going to Prague!</h2>
</div>

В этом случае создастся такая структура:

My Weblog (h1 of its hgroup)
|
+--Travel day (h2)
|
+--I'm going to Prague! (h2)

HTML5 Outliner — онлайн сервис, который позволяет тестировать разметку на правильность использования заголовков.

Куда дальше

• следующая — Статьи
• предыдущая — Длинное отступление о том, как браузеры отображают неизвестные теги
• содержание

По теме

• Заголовки в HTML