Структурные теги в HTML5. Будущее рядом

28.04.2011

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

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

Рассмотрим типичную структуру современного сайта. Можно выделить несколько блоков, которые так или иначе присутствуют в коде — это “шапка” (header), панель навигации (navigation), боковая панель (sidebar), раздел основного контента (content), “подвал” сайта(footer) и некоторые другие. Если используется блочная верстка (а таблицы это прошлый век, я давно не видел табличной верстки в современных сайтах), то эти блоки выводятся с помощью тега div.

Структурные теги являются техническими эквивалентами этого тега, но они делают разметку более наглядной, простой для понимания и в будущем будут помогать поисковикам в индексации сайта, а также облегчат обработку при просмотре с мобильных устройств. По моему, достаточные причины если не для сиюминутного внерения — то для взятия “на заметку” уж точно.

section

Предназначен для обозначения раздела документа, который может включать в себя заголовки, шапку, подвал и собственно, текст. На мой взгляд, ближайший аналог — блок с классом wrapper (некоторые присваивают ему id, но это не принципиально), который используется как контейнер документа, содержит в себе блоки, привязанные к нему. Своего рода “обертка” для последующих блоков. Также допускается вложенность тега.

header

Обозначает “шапку” сайта или раздела, обычно там расположен заголовок. Ничем особенным не примечателен

nav

Как видно из названия — задает блок, в котором содержится навигация. Обычно это список ссылок на разделы или страницы сайта, оформленный должным образом. Тег может содержаться в тегах section, header и footer, о котором ниже.

footer

“Подвал” сайта или раздела. Полный аналог тега header

article

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

aside

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

Приведенный ниже код иллюстрирует применение структурных тегов HTML5.


<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>Lorem ipsum...</section>

</article>

<article>

<header>
<h1><a href="#">Второй заголовок</a></h1>
</header><section>Lorem ipsum...</section>

</article>

<article>

<header>
<h1><a href="#">Третий заголовок</a></h1>
</header>

<section>Lorem ipsum...</section>

</article>

</section>

<footer>Копирайты и все такое</footer>

Обратите внимание, все структурные теги требуют наличия закрывающего тега. Кстати, закрывающий тег /article например, гораздо более информативен, чем /div. Сразу видно, что где находится. Читать такой код намного легче. Хотя бы ради этого стоит внедрить в существующие проекты или запланировать в будущие.

Теперь о грустном — горячо любимый IE до 8 версии включительно не поддерживает данные теги, но отображает информацию между ними. Не применяются к ним стили CSS, если объекты не
созданы с помощью скрипта. Заставить его показывать документ как нужно поможет следующий код:


document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');

Скрипт создает DOM элементы и IE корректно отрабатывает с ними.
Небольшое дополнение — HTML5 по умолчанию интерпретирует любой скрипт как type=»text/javascript”, поэтому специально это указывать не нужно. Что опять же делает код проще и легче. Сплошные плюсы Остальные браузеры работают нормально, единственный Firefox полностью поддерживает теги с версии 4.0, но с версии 3 корректно с ними работает и отображает.
На сегодня все. Если стало интересно — “Контактная форма с помощью CSS3 и HTML5” тут я писал о применении новой спецификации на практике. Оставайтесь на связи — будет интересно.

Удачного дня

,

Комментариев: 10

  1. Alex

    Я не понял до конца в чём преимущество нового штмл5, на мой взгляд теги аналогичны как в старой версии

    Ответить
  2. Купить сайт - all4blogs.ru

    Кажется головняка больше, чем нужно — стоит ли париться? 
    Теги пусть даже информативнее, но думаю алгоритмы поисковиков и так понимают, что где… А тут хаки, кряки, напряги…

    Ответить