Открыть меню    

Структурные теги HTML5

Спецификация HTML5 добавила весьма ограниченное число тегов для структурирования вашей разметки. Эти теги могут заменить типичные div контейнеры в вашем коде. Итак, давайте приступим к изучению.

Тег section

Тег section группирует контент по тематике, или, другими словами, определяет раздел документа. Обычно предшествует header, может находиться в footer. Тег section может быть заключен внутрь другого тега section, если необходимо, и содержать любой объем разметки. В обычном html, как правило, вместо тега section используют div.

Тег header

Тег header (шапка) обычно содержит заголовок или группирует заголовки, но также может содержать информацию о секции.

Другими словами тег header определяет верхний колонтитул сайта (шапку сайта).

Тег footer

Тег footer (подвал) обычно содержит информацию о секции, например: автор статьи, дата, авторское право и т.д.

HTML

    <footer>
      <p>Copyright © 20011 All Rights</p>
    </footer>

Тег nav

Тег nav определяет навигационную область, обычно это список ссылок. Тег nav является родным братом основной section (секции), header (шапки) и footer (подвала).

HTML

    <nav>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Скачать</a></li>
        <li><a href="#">Архив</a></li>
        <li><a href="#">О Нас</a></li>
      </ul>
    </nav>

Элемент nav можно расположить также, например, в теге header.

Тег aside

Тег aside определяет контент, который расположен вокруг основного контента. Это может быть боковая панель (sidebar), содержащая ряд ссылок на статьи, на архив, на метки.

Тег article

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

Тег figure

Иногда бывает необходимо разместить изображение и прилагающийся к нему текст как единую иллюстрацию. Элемент figure указывает на то, что текст и изображение являются частями единого целого.

HTML

<figure>
    <legend>
        Тут я описываю изображение
    </legend>
    <img alt="" src="opa.png" />
</figure>

Тег dialog

Тег dialog – это та область, где отображается комментарии (беседа, разговор). Тег dialog состоит из следующих частей:

  • сам тег dialog, определяющий блок с комментариями
  • тег dt определят того кто говорит
  • тег dd определяет текст комментария

HTML

<dialog>
    <dt>
        Вася
    </dt>
    <dd>
        я тут был
    </dd>
    <dt>
        Петя
    </dt>
    <dd>
        я подтверждаю, все что написал Вася правда
    </dd>
</dialog>

Разметка на основе тегов HTML5

Итак, давайте объединим наши структурные теги на странице.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Обычный блог</title>
  </head>
  <body>

    <header>
      <h1><a href="#">Standard Blog</a></h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Скачать</a></li>
        <li><a href="#">Архив</a></li>
        <li><a href="#">О Нас</a></li>
      </ul>
    </nav>

    <section>

      <article>
          <h2><a href="#">Title</a></h2>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>

      <article>
          <h2><a href="#">Title</a></h2>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>

    </section>

    <footer>
      <p>Copyright © 20011 All Rights</p>
    </footer>

  </body>
</html>

Как вы можете видеть, сами теги более наглядны, чем, если бы вы использовали обычные идентификаторы (id) для тегов div. Также очевидно преимущество в использовании адекватных закрывающих тегов, таких как article. Например, разметка документа становится более понятной (и для поисковиков в том числе), если вместо непонятного блока с id="something",(где закрывающий тег еще надо поискать!) использовать тег article.

Стоит ли использовать структурные теги сейчас?

Фактически, да, если соблюдать несколько дополнительных моментов. Данные теги будут работать в современных браузерах и, вероятно, в IE6. Но есть несколько моментов, которые необходимо соблюдать, если мы захотим использовать структурные теги html5 сегодня.

Во-первых, так как большинство браузеров не понимает doctype HTML5, то они и не знают о новых тегах в HTML5. К счастью, браузеры довольно восприимчивы, что позволяет им иметь дело с неизвестными тегами. Единственная проблема в том, что неизвестные теги не имеют стилей по умолчанию, и такие теги рассматриваются как встроенные (inline) теги. Но наши новые теги HTML5 структурные и, очевидно, должны быть блочными элементами. Итак, когда мы стилизуем их в css, то нам необходимо включить объявление display:block.

Просто включите небольшую часть кода в ваш CSS и новые теги HTML5 готовы к работе. И, конечно, как только HTML5 окончательно распространиться, описание display:block можно удалить, поскольку это описание будет включено в стили по умолчанию.

Поддержка IE

Есть проблема, если вам требуется поддержка IE. Оказывается, движок IE будет работать с новыми тегами, но не будет признавать любой CSS стиль, примененный к ним. К счастью, исправить это можно, включив небольшой кусок JavaScript. Все что нам понадобится, это включить следующий код:

JavaScript

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('article');
</script>

Данный код можно включите непосредственно в head или подключить через внешний файл.

Заключение

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

Комментарии к статье