1.11. HTML5 семантические элементы

html5HTML5 семантические элементы доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div id="header">). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.

Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div id="header">, стало <header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны ‎глобальные атрибуты.

Новые HTML5 элементы

1. Секционные элементы

1.1. Элемент <header>

Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип, группировать основной заголовок или группу заголовков, которые в свою очередь могут быть обернуть элементом <hgroup>. В html-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.

Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.

1.2. Элемент <hgroup>

Используется для группировки элементов <h1> - <h6> в случае, когда заголовок имеет сложную структуру, например, уточняющие подзаголовки, альтернативные заголовки и т.п.

1.3. Элемент <nav>

Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.

В качестве элементов панели навигации можно использовать не только элементы списков:

Также можно добавлять заголовки внутрь элемента:

1.4. Элемент <article>

Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>.

1.5. Элемент <section>

Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое, не используется многократно и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты.

<article> внутри <section>

Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>

1.6. Элемент <aside>

Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.

1.7. Элемент <footer>

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

В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.

2. Группировка контента

2.1. Элемент <address>

Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.

2.2. Элемент <main>

Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).

Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

2.3. Элементы <figure> и <figcaption>

Элемент <figure> представляет автономный контент, возможно с заголовком <figcaption>, являющийся самостоятельным элементом потока. Элемент может быть перемещен из основного контента документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять заметки к иллюстрациям, фотографиям, диаграммам, фрагментам кода.

Элемент <figure> — блочный, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin: margin-left: 40px; margin-right: 40px; margin-top: 1em; margin-bottom: 1em.

Элемент <figcaption> — блочный, по ширине равен ширине элемента <figure>, высота равна 18px.

3. Семантика для текстового содержимого

3.1. Элементы для поддержки языков Восточной Азии <rp>, <rt> и <ruby>

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

Тег <rt> добавляет аннотацию, объясняя написание символов Восточной Азии заключенных в контейнер <ruby>.

Тег <ruby> объясняет написание символов.

3.2. Элемент <time>

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

Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

3.3. Элемент <mark>

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

3.4. Элемент <bdi>

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

3.5. Элемент <wbr>

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

  • Спасибо за статейку, очень хорошо расписали.
    Даже на хабре как-то не так понятно.

  • Отличная информация. Зарубил себе на носу.

  • Рздел section — поставлено с ног на голову. Section делит статью на разделы (главы) и является подчиненным, вложенным в статью Article, а не наоборот, как указано у Вас.

    Для примера см. спецификацию: https://html.spec.whatwg.org/multipage/semantics.html#the-section-element

    • Спасибо за комментарий, на самом деле вопрос спорный. В спецификации нет никаких жестких правил относительно использования и вложенности элементов и . Предлагаю ознакомиться http://html5doctor.com/the-article-element/ и http://www.standardista.com/html5-section-v-article

      • Создание Сайтов

        я видел как сектион используют вместо сайтбара

        • тема семантических элементов достаточно сложна для понимания, поэтому не исключены примеры некорректного использования html5-элементов

          • Создание Сайтов

            Для русского интернета все корректно — пиши как считаешь правильным, не на выставку код пишется. Главное чтобы работало, остальное трава не расти.

  • Fktrctq

    Подскажите? Если страница выстроена следующим образом: article — заголовок — немного текста — пост — пост — пост — постраничная навигация — основной текст — /article

    можно ли так размещать текст вокруг постов? можно ли туда размещать постраничную навигацию? следует ли навигацию обернуть тегом section?

    • 1) Постраничную навигацию можно оборачивать элементом nav, хотя на практике обычно используют div. Для элемента section обязательным является наличие заголовка.
      2) Основной текст вокруг постов размещать нелогично, так как посты разрывают его
      3) Постраничную навигацию располагают вне элемента article

      • Fktrctq

        2) Основной текст вокруг постов размещать нелогично, так как посты разрывают его

        А если основной текст в свой подзаголовок h2 Посты тоже со своими заголовками h2 А до постов Заголовок h1 с небольшим описанием Все обернуть article и внутри каждый подзаголовок с h2 и текст (пост) тоже обернуть article Разве будет разрыв!? Единственное смущает постраничная навигация Может её скрыть можно!?

        • Пришлите мне ссылку на страницу, посмотрю вживую (публиковать коммент со ссылкой не буду).

  • Danil Degtyaryov

    Спасибо за статью, я бы без неё курсач за 2 часа не написал. :DD

    • Пожалуйста. Надеюсь, вы ссылку на источник не забыли указать 🙂

  • Сапожник без сапог?)

    • Уточните, о чем это?

      • К тому что у вас разметка отсутствует.

        • Спасибо за замечание. Времени не хватает, чтобы заняться шаблоном.

        • Создание Сайтов

          это болезнь, которая и меня мучает — никак не напишу себе тему.

  • >>Элемент используется как контейнер для изображения, а текст подписи (или ссылка) помещается внутрь элемента :

    неточно.

    читайте спецификацию.

    • Спасибо за замечание, вы правы, в спецификации предполагается более широкое использование этого элемента, но на практике я встречала только этот вариант.

  • Dmytro Petrychenko

    Очень расписали. Спасибо Большое. Для наглядности попрошу Вас добавить (будьте добры) несколько схем разных вариантов разбивки страницы на разделы. Очень удобный и грамотный сайт) Буду брать пример))) Если не против)))

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

      Насчёт брать примеры — копировать информацию для размещения на стороннем ресурсе или использовать примеры в работе?

      • Dmytro Petrychenko

        в работе

      • Очень хотелось бы правильную схему, а то я путаюсь где нужен article а где section, внутри или снаружи, ну и т.д.

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

          Следовательно, section является контейнером для более мелких элементов — article. Для примера возьмём газету. В ней есть рубрики (section), например, экономика, политика, происшествия, которые состоят из статей (article). То есть рубрика тематическая и она одна такая во всей газете, а article в данном случае многократно используется для группировки статей , являясь контейнером для заголовка, даты публикации, автора, картинки и самого текста.

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

          Изучая разметку зарубежных сайтов, обычно встречаю использование article без section. Вероятно, люди еще не привыкли к этим элементам, хотя из их названий логично совместное использование. Или же section просто дублирует обертку основного содержимого (что-то типа div class=»container», div class=»wrapper»), поэтому он не используется.

    • Пример разбивки страницы с использованием html5 элементов https://uploads.disquscdn.com/images/d44519af7acc702676199beb03a1693a6a8668a3132f49381cc0c2b88c03f26c.png

      • Логично, но вот куда делся тег main, который обычно ставят на место section в данном макете?

        • Согласна, по идее не хватает обёртки для элементов section. Но с тегом main какая-то неоднозначность, даже в Notepad++ он не подсвечивается. И мало кто его использует.

  • Dmytro Petrychenko

    Пример с HTML5.0x HTML5 Introduction EDX

    • В этом примере надо помнить про неоднозначность <article> и <section>

    • Alexander Inkognito

      Элемент body выкидываем?

  • Artur Loginov

    Спасибо за статью. Изучив также тему в других источниках, я обнаружил что у вас не описаны теги «details» и «summary»

  • Сергей Семушин

    > «Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом .»
    Увидел только на этом сайте, хотелось бы знать, откуда такая инфа)

    • Посыл такой: данный тег распространяет (тиражирует) контент, то есть предназначен для многоразового использования на веб-странице. Статья, запись в блоге и т.д. Если не предполагается повторно использовать такой формат на странице, значит не стоит использовать и данный тег.

      • Сергей Семушин

        Где-то читал, что если тег находится вне , то он обозначает заголовок всего документа, если внутри — этой статьи. Так ли это?)

        • Спасибо за вопрос! Не совсем так. Элемент header представляет вводное содержимое для своего ближайшего предка — раздела, или секции (article, aside, nav, section) или секционного корневого элемента (body, blockquote, fieldset, figure, details, td).
          Если ближайшим предком раздела или секционного корневого элемента является элемент body, то элемент header представляет вводное содержимое для всей страницы.
          То есть элемент header находится внутри раздела или секционного корневого элемента, для которых ближайший предок — элемент body.

  • Евгений

    В 1.5 исправьте ошибку — «содержит две блока»

    • Исправила. Благодарю за внимательность!

      • Евгений

        там же, в 1.5, еще одна ошибка: — «Можно сделать на этом акцент, поместив каждый статьи одной тематики»

  • Alexander Inkognito

    Поправьте меня если я не прав, но большинство семантических тегов нафиг не нужны. Чем лучше тег mark от div class=»mark»? Или тег section от div class=»section» и тд и тп

    • Лично для меня плюсы семантических элементов следующие:
      1) меньше кода;
      2) удобнее стилизовать элементы;
      3) разметка приобретает большую осмысленность, в ней проще ориентироваться, так как в глаза бросаются разные названия тегов, в отличие от сплошных дивов.
      Правда возникают некоторые недопонимания, в каких случаях использовать тот или иной семантический элемент.
      Также, спецификация изначально может быть избыточной, со временем от редко используемых тегов отказываются. Почему их вообще ввели в стандарт: были проведены исследования, какие классы чаще всего используют для структурных элементов и на уровне текста, и на основе этих данных ввели эти элементы, которые заменяли подобное нагромождение, потому что вместо div class=»footer» удобнее писать просто footer.
      И немного вас поправлю: тег mark инлайновый, поэтому нужно писать span class=»mark».

    • Roman Yurchenko

      забей в гугле. зачем нужна семантика
      говнокод конечно проще