Структурированные теги HTML5

29-07-2010

В HTML5 добавили несколько интересных и полезных тегов для структурирования вашей разметки. Многие из этих тегов заменят типичные элементы div которые мы часто используем. Начнем перечисление тегов:

<section></section>

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

<header></header>

Используется для указания заголовка для section (разделов), также для группировки заголовков, но может также содержать дополнительную информацию о разделе.

<footer></footer>

footer обычно содержит информацию о разделе, ссылки на похожие документы, копирайты и т.д.

<nav></nav>

Определяет область навигации, как правило список ссылок. nav как правило должен располагаться между section, header и footer

<article></article>

Независимая запись в блоге, журнале и т.д.

<aside></aside>

Указывает вторичную информацию о записи, пояснение что ли.

Использование

Давайте теперь попробуем использовать эти теги для построения обычной страницы блога:

<!DOCTYPE html>
<html>
  <head>
    <title>Стандартный блог</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Стандартный блог</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>
        <header>
          <h1><a href="#">Заголовок</a></h1>
        </header>
        <section>
          <p>Тут текст...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Заголовок</a></h1>
        </header>
        <section>
          <p>Тут текст...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Заголовок</a></h1>
        </header>
        <section>
          <p>Тут текст...</p>
        </section>
      </article>
    </section>
    <footer>
      <p>Copyright © 2008 All Rights<p>
    </footer>
  </body>
</html>

Этот пример достаточно многозначен но хорошо показывает места применения нужных тегов.

ct7.30.2010 01:07
интересная заметка, но вот было бы неплохо помимо кода примера и сам пример где-нибудь разместить, чтобы посмотреть код, так сказать, в действии
    Aleks Revo3.25.2012 02:03
    Например, в блокноте? )))
Блогер Xstroy7.30.2010 03:07
Удивляет простота и лаконичность. А когда это чудо будет поддерживаться всеми браузерами, кто знает?
    admin7.30.2010 04:07
    это все уже поддерживается всеми нормальными браузерами..
      Денис8.1.2010 10:08
      нормальными это opera и firefox?) А "всеми любимый" IE как относится к html 5? И по сей день это важно..
      admin8.2.2010 09:08
      почему, chrome и safari забыл =)) IE кстати нормально тож это дело открывает...
      Webchester8.2.2010 08:08
      Мне кажется, что такие теги как header и footer просто не приживутся у вебмастеров. И поддерживается HTML5 не всема нормальными браузерами, а только последние версии браузеров.
      admin8.2.2010 09:08
      а это и есть нормальные, для меня по крайней мере)
      Aleks Revo3.25.2012 02:03
      Это и называется "все нормальные" ;-)
duncan5.1.2012 05:05
так я не понял -- блок "div" уже вообще можно не использовать?
duncan5.1.2012 12:05
но эти теги, которые Вы перечислили, не являются обязательными? будет ли ошибкой использования вместо какого-нибудь из них тега "div" или использования этих же тегов, но не на их месте? например, вместо "nav" использовать "articles"
    dzantiev5.18.2012 03:05
    можно работать будет, но это не правильно...
Yohoho6.3.2012 08:06
duncan, можно использовать как угодно. Тут дело в семантике. Правильное использование помогает поисковым системам. При использовании html5 тегов сразу ясно где у вас статья, где меню, а где вторичной важности ссылки. Кроме того, есть ридеры для слабо видящих, используя верную разметку, вы облегчите им задачу.
oneng11.1.2012 01:11
хмм согласно этой статье http://habrahabr.ru/post/124993/ если есть одиночный H1 - то обрамлять тегом не нужно...
    dzantiev11.1.2012 03:11
    а здесь обратное утверждается?
      oneng11.2.2012 08:11
      по крайней мере в примере: Заголовок Тут текст... согласно статье, если бы было два заголовка или заголовок и тег даты то тогда уже и оборачивать в тег header, а так нет необходимости...
      oneng11.2.2012 08:11
      Не утверждаете но и не предупреждаете! имею ввиду что хорошо бы было это в статью вписать чтобы люди не делали ошибок. вот и все
      dzantiev11.2.2012 11:11
      это все формальные правила нигде не прописанные, на сколько мне известно.
ОСТАВИТЬ КОММЕНТАРИЙ