Области заголовка и нижнего колонтитула
Через элементы header и footer можно определить области заголовка и нижнего колонтитула. Для определения области заголовка используется элемент head. Кстати, это необязательно должна быть область заголовка всей страницы. Также элемент head можно использовать для области заголовка других элементов, таких как секции и статьи.
Внимание: не путайте элемент header с известным элементом head, через который определяется область заголовка HTML-документов, который содержит заголовок документа, вызовы таблиц стилей и JavaScript.
Для всего документа использование элемента header выглядело бы следующим образом:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Примененный к элементу section, образуется следующее представление:
<section>
<header>
<h1> Создание веб-приложений (Часть 09): jQuery mobile (1)</h1>
<p> jQuery безусловно один из самых известных JavaScript-фреймворков.</p>
</header>
<p>
Поэтому на "классических" веб-сайтах jQuery уже используется тысячи раз. Для использования в веб-приложениях был создан смежный фреймворк jQuery mobile (jQM). Этот фреймворк поможет вам сделать ваше веб-приложение похожим на настоящее приложение моментально. Весомой причиной является проведение детального рассмотрения jQM.
</p>
<footer>
<p>Авторское право PSD-Tutorials.de</p>
</footer>
</section>Обратите внимание, что элементы footer и header не должны содержать дополнительные элементы header и footer.
Группировка заголовков
В контексте разделов появляются заголовки. Эти заголовки могут в первую очередь быть классическими элементами h1 до h6. Кроме того, в HTML5 допускается использование элемента hgroup. Внутри элементов hgroup могут содержаться несколько заголовков.
Сначала взглянем на классический HTML-документ, в котором "обычная" структура определяется с помощью элементов hx.
<h1>
Книга
</h1>
<h2>
Глава 1
</h2>
<h2>
Глава 2
</h2>
<h3>
Подглава 2.1
</h3>
<h3>
Подглава 2.2
</h3>
<h2>
Глава 3
</h2>
Это определение означает следующую структуру:
Книга
Глава 1
Глава 2
Подглава 2.1
Подглава 2.2
Глава 3
Однако в браузере заголовки не выравниваются.
Элемент hgroup особенно интересен в контексте журналистских текстов. Они часто состоят из двухчастного заголовка, состоящего из основного заголовка и верхнего или нижнего подзаголовка. Пример поможет понять этот аспект.
<hgroup> <h1>Облачная ОС</h1> <h2>Веб в качестве операционной системы</h2> </hgroup> <p>Здесь начинается содержание статьи …</p>
На этом примере ясно видно, что нижний подзаголовок не является отдельным разделом внутри статьи. Это скорее часть заголовка статьи. Точно такой же аспект можно сгруппировать с помощью элемента hgroup.
Внутри элемента hgroup разрешены элементы h1 до h6.
Концепция контура
Кроме того, в HTML5 вводится концепция контура, в которой сочетаются элемент section с различными элементами hx. В этой концепции, как и прежде, заголовки разделяются от элемента h1 до h6 на разные уровни. Элемент h1 соответствует верхнему уровню, в то время как элемент h6 представляет собой самый низкий уровень. Здесь нет изменений по сравнению с ранее. Теперь элементы hx могут быть определены внутри элементов section. При этом счет начинается заново, но всегда на один уровень ниже.
Концепция контура выглядит довольно сложной в спецификации HTML5, но идея лежащая в ее основе довольно проста. Фактически, это позволяет определить краткое содержание, которое делает структуру документа машинно-читаемой.
Также приведем пример:
<h1>
Глава 1
</h1>
<section>
<h1>
Глава 2
</h1>
<section>
<h1>
Глава 3
</h1>
</section>
</section>
С помощью концепции Outline в HTML5 получается следующая структура:
1. Глава 1
- Глава 2
- Глава 3
- Глава 3
Другой пример поможет проиллюстрировать эффект. Здесь сначала снова исходный документ.
<section>
<h1>Установка и настройка</h1>
<section>
<h2>Установка</h2>
<p>Все о установке
</section> <section>
<h2>Настройка</h2>
<p>Здесь вы найдете все о настройке
</section>
<aside>
<p>Интересные книги по теме...
</aside>
</section>
<footer>
<p>(c) от PSD-Tutorials.de
</footer>
</section>
Полученная структура выглядит следующим образом:
1. Раздел (Установка и настройка)
1.1 Раздел (Установка)
1.2 Раздел (Настройка)
1.3 Раздел (боковая панель)
- Раздел (подвал)
Еще один пример:
<body>
<h1>Установка и настройка</h1>
<h2>Установка</h2>
<p>Все о теме установки
...больше контента...
<section>
<h3>Предварительные требования</h3>
<p>Все о предварительных требованиях к установке
...больше контента...
<h3>Подготовка</h3>
<p>Все о подготовке
...больше контента...
<h2>Настройка</h2>
<p>Все о настройке
...больше контента...
</section>
</body>
Структура результата выглядит следующим образом:
1. Установка и настройка
1.1 Установка
1.1.1 Предварительные требования
1.1.2 Подготовка
1.2 Настройка
Таким образом, внутреннее нумерование начинается с 1 каждый раз заново. От концепции Outline затрагиваются только эти элементы:
• article
• aside
• nav
• section
При этом элементы header и footer остаются в стороне.
Обратите внимание, что концепция Outline в настоящее время еще не поддерживается браузерами.
Однако это только вопрос времени, когда производители браузеров начнут действовать здесь. Преимущества концепции Outline слишком велики. Подумайте, например, о автоматически созданных навигационных панелях. Но даже сейчас: даже если браузеры в настоящее время игнорируют структурирование в указанной форме, попробуйте уже сейчас логически структурировать ваши документы. Таким образом, вы сразу же получите определенную гарантию будущего для ваших веб-сайтов.
