HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main

HTML5 новые тэги time, figure, video, audio, canvas

Продолжаем рассматривать новый язык разметки веб-сайтов — HTML5. Если вы еще ничего не слышали о нем, то вэлкам во Введение в HTML5 и первые шаги в HTML5.

Сегодня поговорим о новых тэгах в HTML5. И для начала рассмотрим наиболее глобальные: section, article, header, footer, nav, aside, main и hgroup.

Тэги header и footer

Как уже отмечалось ранее, HTML5 во многом более семантически правильный стандарт. Отдельные характерные части веб-сайта названы, наконец, своими унифицированными именами, дабы в дальнейшем не возникало никакой путаницы: header — верхняя секция сайта, footer — нижняя, nav — блок навигации и т.д.

По сути, это избавляет от необходимости использовать нейтральный тэг DIV для обозначения данных частей сайта.

Можно, например, типичную запись:

<div id="header">
<h1><a href="http://www.examplesite.com/">Самый сайт</a></h1>
</div>

переписать по-новому так:

<header>
<h1><a href="http://www.examplesite.com/">Самый сайт</a></h1>
</header>

И в файле стилей CSS соответственно прописать набор правил непосредственно для тэга header.

Однако в этом есть одна закавыка. Дело в том, что большинство браузеров пока еще не знают, что эти новые тэги являются блочными элементами и считают их строковыми, как те же тэги ссылок <a> или картинок <img>, например. Поэтому в файле стилей CSS для таких тэгов необходимо принудительно прописывать их блочный характер:

header, footer, nav, article {display: block;}

Окей! Если с семантикой тэгов header, footer все более менее понятно, то остальные тэги стоит рассмотреть более внимательно.

Тэг nav

nav — служит для создания панели навигации. На странице этих элементов может быть несколько. Например, блок ссылок на основные страницы сайта и блок навигации по рубрикам.

Тэг aside

aside — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.).

Тэг section

section — также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей (например, выделить и, тем самым, обособить от шапки и подвала центральную часть с контентом и сайдбаром), либо разделять на отдельные секции (читай параграфы) непосредственно статью на странице.

Тэг article

article — служит для разбивки страницы на отдельные статьи.

Оба тэга section и article обладают рядом интересных особенностей.

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

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

<section>
<article>
<section></section>
<section></section>
</article>
<article>
<section></section>
<section></section>
</article>
</section>

Тэг hgroup

hgroup — тэг призван группировать заголовки страницы в одну логическую единицу.

Например, главный заголовок всей страницы h1 и описание к ней, оформленное тэгом h3. На странице в дальнейшем еще несколько раз могут использоваться тэги h3 для других целей. Чтобы логически отделить описание страницы от других тэгов h3, мы его объединяем с главным тэгом h1 в группу, которая и обозначается тэгом hgroup:

<hgroup>
<h1>Название сайта</h1>
<h3>Здесь описание сайта</h3>
</hgroup>

UPD 24.02.2017: Значительно позже написания данной статьи появился еще один тег — main. Сначала дадим его общее определение, а потом расскажу подробнее, зачем он нужен и нужен ли вообще.

Тэг main

main — представляет собой основное содержимое документа, или иначе — основной контент. Отличие этого тэга от старого доброго body в том, что body включает ВСЕ содержимое страницы, тогда как main — основное, то есть уникальное.

Верстальщики сайтов и раньше использовали для выделения блока с основным контентом тэг div с идентификатором типа main или content. Видимо создатели HTML5 решили поддержать это дело и придумали такой вот новый тэг main.

В силу того, что он должен содержать только уникальный контент, сюда не входят ни шапка сайта, ни сайдбар(ы), ни подвал, ни вообще что-либо повторяющееся на сайте. Сказано — уникальный, значит уникальный!

Тэг main не является структурным тэгом и никак не влияет на разметку страницы!

Он также не может входить в состав других структурных тэгов: article, aside, footer, header или nav в силу своей уникальности.

И так же, как и другие новые тэги, он не воспринимается браузерами, как блочный элемент, поэтому это свойство ему нужно задавать принудительно в файле CSS:

main {display:block;}

Пример использования тэга main:

<body>
<header>
</header>
<main>
Основное, уникальное содержимое страницы сайта.
</main>
<aside>
</aside>
<footer>
</footer>
</body>

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

Из уникальности тэга main следует, что использовать его на сайте достаточно сложно. Ну, сами представьте себе такой сайт, где на каждой странице нужно выделить уникальную часть. Представили? Лично я вижу лишь простенький сайт-визитку на 5 – 6 страниц, где содержимое каждой страницы уникально и не повторяется нигде больше на сайте.

А взять, к примеру, любой блог на WordPress. Как выделить уникальное содержимое, если на главной страницы присутствуют анонсы статей, в архиве тоже есть выдержки? Какая уж тут уникальность! Разве что на статичных страницах типа «О сайте» или «Контакты».

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

Рекомендую почитать статью Избегаем распространенных ошибок в HTML5 разметке, где наглядно показано, что не стоит необдуманно менять старые добрые div-ы на новые теги. Ключевая фраза оттуда:

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

Продолжение следует…

HTML5 Введение
HTML5 первые шаги
HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main
HTML5 новые тэги time, figure, video, audio, canvas

Похожие записи:

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

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

  2. Игорь Квентор | 17.11.2015

    Это дааа… Хотя, полагаю, до сих пор существуют махровые верстальщики, тайком пописывающие таблицы и втюхивающие их наивному обывателю :) Но время бежит. Скоро и адаптивная верстка станет вчерашним днем. То-то еще будет!

  3. $SMax$ | 26.11.2015

    ссылка «HTML5 новые тэги time, figure, video, audio, canvas» — неверная

  4. Игорь Квентор | 26.11.2015

    Точно. Спасибо!

  5. Максим | 08.03.2016

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

  6. Александр | 11.08.2016

    А про main забыли?

  7. Игорь Квентор | 24.02.2017

    Александр, тэг main появился значительно позже написания данной статьи. Но я добавил его описание, хотя и не вижу в нем особого смысла. В статье я указал причину такого моего отношения. Вэлкам! :)

  8. regprog24 | 11.11.2017

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

  9. Игорь Квентор | 12.11.2017

    Спасибо за вопрос! Подробный ответ здесь. Если одним словом, то это — семантика. Из-за того, что устройств для отображения стало больше, чем просто монитор настольного компа, то приходится учитывать это обстоятельство и как-то все упорядочивать. Вот семантика как раз для этого и предназначена.

  10. regprog24 | 12.11.2017

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

    Поясню.

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

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

    Это плохо для всех сайтов. Для публичных интересно выдать в поисковик только положительные сведения о себе в правильном, с точки зрения рекламы, виде.

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

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