Новые теги

Влад Мержевич

В HTML5 для структуры кода введено несколько новых тегов: <article>, <aside>, <footer>, <header>, <nav>, которые заменяют в некоторых случаях привычный <div>. Хотя кажется, что особой разницы между тегами <div class="header"> и <header> нет, между ними лежит огромная пропасть. Теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующих код. Машины или роботы не понимают <div class="header">, для них это типовой тег разметки — замени его на <div class="abrakadabra"> и смысл не поменяется. Другое дело <header>, робот, обнаружив этот тег, воспринимает его именно как шапку сайта или раздела.

Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются семантикой и позволяют представить данные в удобном для роботов виде.

Давайте для начала сделаем шапку сайта с помощью тега <header> (пример 6.2).

Пример 6.2. Использование <header>

<header>
 <div class="header-bg">
  <img src="images/header-title.png" alt="Как поймать льва в пустыне" />
 </div>
</header>

Попытка добавить в стилях фон к тегу <header> ни к чему не привела, фон в некоторых браузерах отображаться не желает. Все новые теги следует сделать вначале блочными через свойство display, тогда они начнут корректно выводиться (пример 6.3).

Пример 6.3. Шапка сайта

HTML5CSS 2.1IE 7+IE 9+CrOpSaFx

<style>
 header {
  display: block;
  background: #00B0D8 url(images/header-gradient.png) repeat-x;
 }
</style>

Данный пример будет работать во всех браузерах, кроме IE7 и IE8. Internet Explorer не добавляет стиль к элементам, которые не понимает. Это недоразумение можно исправить, если создать фиктивный элемент с помощью JavaScript. Для этого включим в <head> такой код.

<script>
  document.createElement("header");
</script>

Если на странице встречается один тег, этот скрипт вполне подойдёт для работы. Но не хочется повторять строку десять раз для десяти разных тегов, поэтому автоматизируем этот процесс через цикл. Сами теги указываются списком, разделяясь запятой (пример 6.4).

Пример 6.4. Скрипт для IE

<!--[if lt IE 9]>
 <script>
  var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',');
  for (var i = 0; i < e.length; i++) {
    document.createElement(e[i]);
  }
 </script>
<![endif]-->

Сам скрипт заключается в условные комментарии, чтобы выполнялся только для IE версии 8.0 и ниже. В IE9 поддержка новых тегов HTML5 уже включена.

Пример выше не обязательно вставлять к себе на сайт, можно воспользоваться общедоступным скриптом написанным Реми Шарпом и распространяемым по лицензии MIT. Для этого достаточно указать на него ссылку, как показано в примере 6.5.

Пример 6.5. Скрипт для IE

<!--[if lt IE 9]> 
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

Все указанные скрипты должны располагаться в коде перед CSS.

Таким образом, для полноценного использования тегов HTML5 во всех браузерах достаточно выполнить три условия:

  1. установить доктайп <!DOCTYPE html>;
  2. включить скрипт из примера 6.4 или 6.5;
  3. в стилях для новых тегов установить display: block.

Теперь рассмотрим некоторые теги HTML5 более подробно, чтобы понять область их применения.

<article>

Задаёт содержание сайта вроде новости, статьи, записи блога, форума или др. В примере 6.6 показано добавление тега <article>.

Пример 6.6. Использование тега <article>

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>article</title>
 </head> 
 <body>
  <header><h1>Следы невиданных зверей</h1></header>
  <article>
    История о том, как возле столовой появились загадочные розовые 
    следы с шестью пальцами, и почему это случилось. 
  </article>
 </body> 
</html>

<aside>

Определяет блок, который не относится к основному контенту, для размещения рубрик, ссылок на архив, меток и другой информации (пример 6.7). Такой блок, если он располагается сбоку, называется, как правило, «сайдбар» или «боковая панель».

Пример 6.7. Использование <aside>

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>aside</title>
  <script>
   document.createElement('aside');
   document.createElement('article');
  </script>
  <style>
   aside {
    background: #f0f0f0; /* Цвет фона */
    padding: 10px; /* Поля */
    width: 200px; /* Ширина сайдбара */
    float: right; /* Обтекание слева */
   }
   article {
    margin-right: 240px; /* Отступ справа */
    display: block; /* Блочный элемент */
   }
  </style>
 </head> 
 <body>
  <aside>
   <p>Экономьте электричество</p>
   <p>Хороший язык</p>
   <p>Чья палка больше</p>
  </aside>
  <article>
   История о том, как приходилось экономить электричество, 
   какие меры для этого принимались, и куда оно на самом деле уходило.
  </article>
 </body> 
</html>

<figure>

Используется для группирования любых элементов, например, изображений и подписей к ним (пример 6.8).

Пример 6.8. Использование <figure>

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>figure</title>
  <script>
   document.createElement('figure');
   document.createElement('figcaption');
  </script>
  <style>
   figure {
    background: #5f6a72; /* Цвет фона */
    padding: 10px; /* Поля вокруг */
    display: block; /* Блочный элемент */
    width: 150px; /* Ширина */
    float: left; /* Блоки выстраиваются по горизонтали */
    margin: 0 10px 10px 0; /* Отступы */
    text-align: center; /* Выравнивание по центру */
   }
   figcaption {
    color: #fff; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <article>
   <figure>
    <p><img src="images/thumb1.jpg" alt=""></p>
    <figcaption>Софийский собор</figcaption>
   </figure>
   <figure>
    <p><img src="images/thumb2.jpg" alt=""></p>
    <figcaption>Польский костёл</figcaption>
   </figure>
  </article>
 </body>
</html>

<figcaption>

Содержит описание для тега <figure>. Тег <figcaption> должен быть первым или последним элементом в группе.

<footer>

Задаёт «подвал» сайта или раздела, в нем обычно располагается имя автора, дата документа, контактная и правовая информация (пример 6.9).

Пример 6.9. Использование <footer>

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>footer</title>
 </head> 
 <body>
  <header>
    <h1>Персональный сайт Кристины Ветровой</h1>
  </header>
  <article>
    <h2>Добро пожаловать!</h2>
    <p>Рада приветствовать вас на своем сайте.</p>
  </article>
  <footer>
    Copyright Кристина Ветрова
  </footer>
 </body> 
</html>

<header>

Определяет «шапку» сайта или раздела.

<hgroup>

Используется для группирования заголовков веб-страницы или раздела (пример 6.10).

Пример 6.10. Использование <hgroup>

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>hgroup</title>
 </head> 
 <body>
  <hgroup>
    <h1>Кристина Ветрова</h1>
    <h2>Персональный сайт</h2>
  </hgroup>
 </body> 
</html>

<nav>

Задаёт навигацию по сайту (пример 6.11). Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.

Пример 6.11. Использование <nav>

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nav</title>
 </head> 
 <body>
  <header>
    <h1>Чебурашка и крокодил Гена</h1>
  </header>
  <nav><a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> |
       <a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a></nav>
  <article>
    <h2>Добро пожаловать!</h2>
  </article>
 </body> 
</html>

<section>

Определяет раздел документа, который может включать в себя заголовки, шапку, подвал и текст (пример 6.12). Допускается вкладывать один тег <section> внутрь другого.

Пример 6.12. Использование <section>

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>section</title>
 </head> 
 <body>
  <section>
   <h2>Съёмки фильма Полипропилен</h2>
   <p>История о том, как снимали фильм, где герои отдыхали на пляже, 
   потом пришёл антагонист, избил протагонистов, сбросил их в бассейн, 
   и что из этого получилось.</p>
  </section>
  <section>
   <h2>Хороший язык</h2>
   <p>История о том, как проходила студия изучения языка эсперанто, 
   в то время, как над ней, на веранде велась студия приколистов, 
   где травились анекдоты, и что из этого получилось.</p>
  </section>
 </body>
</html>

<time>

Помечает текст внутри тега <time> как дата, время или одновременно дата и время. Может указываться непосредственно внутри контейнера <time>, либо задаваться через атрибут datetime (пример 6.13).

Дата и время задается в международном формате ISO 8601. Примеры оформления приведены в табл. 6.1.

Табл. 6.1. Форматы даты и времени
Значение Формат Пример
Год ГГГГ 2012
Месяц и год ГГГГ-ММ 2012-12
Полная дата ГГГГ-ММ-ДД 2012-12-23
Дата и время с минутами ГГГГ-ММ-ДДTчч:мм 2004-07-24T18:18
Дата и время с секундами ГГГГ-ММ-ДДTчч:мм:сс 2004-07-24T18:18:18
Дата и время с часовым поясом ГГГГ-ММ-ДДTчч:мм:сс±чч:мм 2004-07-24T18:18:18+04:00

Для каждой единицы существует своя заданная форма и ограничения.

  • Год — задается четырьмя цифрами (1860).
  • Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
  • День — две цифры от 01 до 31.
  • Час — две цифры от 00 до 23.
  • Минуты — две цифры от 00 до 59.
  • Секунды — две цифры от 00 до 59.
  • Часовой пояс — часы и минуты с указанием знака плюс или минус.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.

Пример 6.13. Использование <time>

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>time</title>
 </head> 
 <body>
  <article>
   <p>Опубликовано: 
      <time datetime="2012-12-23T08:23:11+07:00">сегодня</time></p>
   <p><time>1957-10-04</time> запущен первый искусственный спутник Земли.</p>
   <p><time>1960-08-19</time> первый полёт собак в космос.</p>
   <p><time>1961-04-12</time> первый полёт человека в космос.</p>
   <p><time>1963-06-16</time> первый полёт женщины-космонавта.</p>
   <p><time>1969-07-21</time> высадка человека на Луну.</p></article>
 </body> 
</html>

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.