Заголовки
Дата публикации: 12.03.2011
Посмотрим на следующий код:
<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 — онлайн сервис, который позволяет тестировать разметку на правильность использования заголовков.
Куда дальше
- следующая — Статьи
- предыдущая — Длинное отступление о том, как браузеры отображают неизвестные теги
- содержание