Краткий курс HTML 5

11. Разметка веб-страницы

В предыдущих главах мы с вами научились форматировать текст, добавлять в документ ссылки, изображения, списки и таблицы. Но этого недостаточно для создания полноценных веб-страниц, которые обычно состоят из нескольких логически независимых частей. Так, на страницах сайта, помимо основной информации, обычно присутствует шапка, нижний колонтитул, главное меню и прочие навигационные блоки.

HTML 4 и более ранние версии языка применялись в первую очередь для визуального оформления документа. Для создания каркаса страницы было достаточно всего двух тегов: блочного <div> и строчного <span>, которые сами по себе не влияют на отображение текста (кроме стандартных «блочных» свойств <div>), но позволяют использовать глобальные атрибуты class и id. А уже с их помощью задать стили отображения в CSS — не проблема. Тем более, что многие теги стандарта HTML 4 поддерживали целый набор атрибутов для визуального оформления.

Вместе с появлением HTML 5 изменилась сама идеология составления документа. Большинство атрибутов визуального оформления теперь не поддерживаются, а теги предназначены только для логической разметки, что привело к необходимости разнообразить список элементов и обновить их значение.

Но сначала следует упомянуть, что теги <div> и <span> по-прежнему поддерживаются и могут быть применены в целях стилевого оформления или для удобства скриптования, когда лексическая разметка не имеет значения. Кроме того, поддерживается и знакомый многим тег <style>, позволяющий определять стили CSS непосредственно в документе. Как и прежде, элемент <style> располагается внутри <head> и содержит в себе прямые инструкции на языке CSS. Он поддерживает атрибуты type и media, описанные ранее в главе «Ссылки», с той лишь разницей, что здесь type может принимать только значение text/css. В HTML 5 добавлен еще и атрибут scoped="scoped". Элемент <style> с таким атрибутом может располагаться в любом месте документа, а находящиеся в нем инструкции CSS будут распространяться только на элемент-родитель, в котором находится этот <style>, и вложенные в него дочерние элементы.

<style type="text/css" media="screen" scoped="scoped">
   .status{color:red}
   #download{font-weight:bold;}
</style>
<div id="download">Cкачивание файла: <span class="status">завершено</span></div>

Для разметки веб-страницы HTML 5 предлагает несколько тегов с различным лексическим значением. В них можно помещать главы, колонтитулы и прочие структурные единицы.

Верхний и нижний колонтитулы обозначаются тегами <header> и <footer> соответственно. Верхний (шапка) может содержать заголовок, вводную информацию о документе, навигационные ссылки (см. элемент <nav> ниже), форму поиска, логотип и т п. Аналогичным образом нижний колонтитул включает информацию, размещаемую в конце документа. Например, данные об авторе, дату составления и прочее. Если вы хотите добавить контактную информацию, то не забудьте поместить ее в элемент <address>.

Элемент <section> предназначен для тематического группирования содержимого. С его помощью можно обозначать главы, вкладки диалоговых окон и т. п. Документ, например, может быть разделен на введение, параграфы и контактную информацию. Вообще говоря, рекомендуется применять этот тег для тех частей документа, которые целесообразно обозначать и в его содержании. В случаях, когда содержимое <section> заимствовано, можно указать URL источника в атрибуте cite.

Часто, если информация была заимствована из внешних источников или предполагается ее распространение вовне, то имеет смысл помещать ее в элемент <article>. Это может быть запись на форуме, статья газеты или блога, комментарий пользователя, виджет или любая другая независимая единица содержимого, которая каким-либо образом может быть использована отдельно от всего документа. Как и <section>, этот элемент поддерживает атрибут cite для указания источника. Кроме того, можно обозначить дату публикации содержимого в атрибуте pubdate. Некоторые элементы <article> могут располагаться внутри других <article>, что обычно означает непосредственную связь между ними. Например, так можно обозначать комментарии пользователей (дочерние элементы) к статье (<article>-родитель).

Кстати, <header> и <footer> могут быть использованы не только в качестве колонтитулов документа, но и выполнять аналогичную роль для отдельных его разделов, если это необходимо.

Части документа, содержащие навигационные ссылки помещаются в элемент <nav>. Это могут быть блоки со ссылками «назад»–«вперед», выбором страницы и тому подобное.

<article pubdate="2010-03-04">
   <header>
      <h1>Разметка веб-страницы</h1>
      <p>Вместе с появлением HTML 5 изменилась идеология…</p>
   </header>
   <section cite="http://www.exlab.net/html/markup.html">
      <p>…</p>
      <p>…</p>
   </section>
   <nav>
      <a href="previous.html">Назад</a>
      <a href="index.html">Содержание</a>
      <a href="next.html">Вперед</a>
   </nav>
   <footer>2010 © www.exlab.net</footer>
</article>

Обратите внимание на заголовок документа, который вы сейчас читаете. Он состоит из названия курса (более крупным шрифтом) и главы (более мелким). Для подобного группирования тегов <h1><h6>, являющихся частями одного заголовка, предназначен тег <hgroup>.

<hgroup>
   <h1>Краткий курс HTML 5</h1>
   <h2>Разметка веб-страницы</h2>
</hgroup>

Еще одним группирующим элементом является <figure>. Обычно в него помещается самодостаточная информация, отсутствие или перенос которой в другое место не исказит смысл документа. Чаще всего это иллюстрации, диаграммы, фотографии с кратким комментарием или без него. Такой информационный блок можно озаглавить с помощью тега <figcaption>, который должен располагаться внутри <figure> в качестве первого или последнего дочернего элемента.

<figure>
   <img src="collider.gif" alt="Синхрофазотрон" />
   <figcaption>
      <h4>Синхрофазотрон</h4>
      <p>На схеме 1 изображен принцип действия…</p>
   </figcaption>
</figure>

Элемент <aside> представляет собой часть документа с информацией, также связанной с близлежащим содержимым, однако способной восприниматься отдельно от него. В печатной типографии такая информация обычно помещается в отдельной колонке или выделяется рамкой. На сайте тегом <aside> можно обозначить, например, боковые колонки веб-страницы (т. н. sidebar).

<p>Вчера мы были в Лувре.</p>
<aside>
   <h4>Лувр</h4>
   <p>Лувр — один из крупнейших художественных музеев мира.</p>
</aside>

Еще одним элементом, предназначенным для пояснительной информации является <details>. В отличие от предыдущих, он интерактивен и способен скрывать и отображать содержимое (т. н. spoiler). По умолчанию он «закрыт», но указав элементу атрибут open="open", можно заставить его «раскрыться». Заголовок блока задается в элементе <summary>, который размещается сразу за открывающим тегом <details>. При отсутствии <summary>, заголовок устанавливается по усмотрению браузера.

<details open="open">
   <summary>HTML 5</summary>
   В этом курсе есть все, что нужно знать об HTML.
</details>

Большинство приведенных выше тегов на момент создания курса не поддерживаются браузерами в полной мере. Прежде чем использовать их, рекомендуем ознакомиться с главой «Обратная совместимость».

7 комментариев

Нужно переходить на новые технологии. Спешу сделать свой сайт лучшим из лучших.

Игроман @ 6 мая 2011

Сайт очень приятен внешне, юзабелен. Я, кажется, влюбился.

chase @ 28 августа 2011

Спасибо :)

Алексей @ 28 августа 2011

Необходимая, для меня, "крупица" информации для целостного представления HTML5.

palem @ 30 августа 2011

Молодцы! Прогресс нужно двигать самим. Я вот специально создаю сайты на HTML5 и CSS3 побуждая пользователей использовать новейшие браузеры.

powerglory @ 8 ноября 2011

Не следует злоупотреблять элементом <header>. Если у вас один единственный заголовок, то <header> не нужен.

Если в элементе <figure> находится описание картинки, то сама картинка должна находится внутри элемента. А все описание должно находится внутри <figcaption>.

<figure>
<img>
<figcaption>
<h4>Синхрофазотрон</h4>
<p>На схеме 1 изображен...</p>
</figcaption>
</figure>

Владимир @ 26 ноября 2011

Владимир, спасибо за уточнение. W3C все еще в поиске семантического значения некоторых элементов, поэтому полезно периодически заглядывать в спецификацию.

Алексей @ 26 ноября 2011

Оставить комментарий