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

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

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

Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:

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

Основной поток — большинство элементов, используемых в теле документа.

Секционный контент — элементы, содержащие заголовки и нижние колонтитулы (возможно).

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

Текстовое содержимое — элементы, являющиеся контейнером для текста на уровне документа, а также элементы, обрамляющие текст внутри параграфов.

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

Интерактивный контент — содержимое, которое предполагает взаимодействие с пользователем.

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

Описание HTML5 элементов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9. Элемент <figure>

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

Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:

10. Элемент <figcaption>

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

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

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

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

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

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

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

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

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

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

15. Элементы для описания Восточно-Азиатских символов

Категории контента: основной поток, текстовое содержимое, видимый контент.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.

Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.

Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.

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

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

  • Рздел 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

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

  • Rudy

    Вместо «символов Восточной Азии»-Иероглифы

  • Святослав

    на сколько актуальны семантические элементы? потому что некоторые браузеры, типа FireFox еще не поддерживают все эти элементы, и придется прописывать роли, а не проще пока использовать старый, добрый и проверенный div? и на сколько я знаю каждый месяц HTML5 пополняют все большим количеством тегов, если я в чем то не прав, поправьте меня и объясните пожалуйста)

    • В принципе, с 2013 года основные настольные браузеры поддерживают семантические секционные элементы. Частичная поддержка наблюдается у main, подробнее вы можете посмотреть http://caniuse.com/#search=semantic%20elements. Чтобы открыть все версии браузеров, нажмите кнопку Showing all перед таблицей.

      Роли прописывают для элементов с целью сделать сайт доступным для людей с ограниченными возможностями, например, слабовидящих. HTML5 семантические элементы обладают уже заложенными ролями, поэтому можно использовать nav вместо div без добавления элементу role=»navigation». Проверить предустановленные роли элементов вы можете https://www.w3.org/TR/html-aria/#docconformance.

      Новые теги каждый месяц не добавляются, просто некоторые элементы относятся к экспериментальной технологии и поэтому поддерживаются малым количеством браузеров или не поддерживаются вовсе. Поэтому прежде чем включать их в свою разметку, проверяйте поддержку на сервисе Can I use.

  • Паша Скуменко

    Спасибо за статью, она очень полезна.
    Небольшая поправка: Элемент hgroup устарел, страница с ним не будет валидной…

  • Елена, здравствуйте!

    Почитал статью, спецификации, хочу вывод сделать…

    —————————————-

    (body)

    (header)
    Логотип, форма поиска
    (nav)Основная навигация(/nav)
    (/header) — [ // h1 в header не обязателен ]

    (div)
    (section)
    (h1)Название статьи(/h1)
    (article)
    (nav)Навигация по статье(/nav)
    Текст статьи с иерархией заголовков h2-h6
    Метки, автор, какие-либо данные
    (/article) — [ // в статье footer и header не обязателены или стоит использовать? ]
    (section)Блоки: «похожие статьи» и прочее, каждый в теге section с заголовком h2(/section)
    (/section)
    (aside)
    Блоки боковой колонки, каждый из которых: (section)(h2)Заголовок(/h2)(/section)
    (/aside)
    (/div)

    (footer)
    (nav)Подвальная навигация(/nav)
    Текст о копирайтах
    (/footer)

    (div)Какие-нибудь дополнительные мелочи или скрипты(/div)

    (/body)

    ————————————

    Вижу такой шаблон хорошим. Поправьте, если в чём-то не прав.

    Спасибо за статью, более, чем полезно.

    • Здравствуйте.
      1) раздел header — верно;
      2) h1 перед section;
      3) nav в footer может использоваться, но не обязательно.
      Главное правило: семантические элементы — не просто обёртки для других элементов, поэтому их присутствие на странице в таком количестве не обязательно.

      • 1) С header понял.
        2) Вы говорите «h1 перед section» — вероятно, опечатались, или я не правильно Вас понимаю… Заголовок должен быть внутри section, а не перед

        Это выше я приводил код, который выводит тема bootstrap для drupal 8.
        Получается, что основная часть в div-е, в котором идёт большой section с заголовком h1, внутри которого на одном уровне:
        — статья без заголовка (article)
        — блоки после статьи (вложенные section с заголовками h2)
        — боковая колонка (aside) с вложенными в неё блоками (section с заголовками h2)
        Как-то не логично шаблон выводит…. по-моему… Заголовок статьи h1, но озаглавливает section, а не article

        (пример — ссылка на мой сайт на странице в disqus, правда там у меня на странице есть 3 section явно лишних без заголовка — это уберу, только вчера про семантическую разметку заинтересовался)

        Отсюда, ещё 2 вопроса позволю себе, если можно:

        1. Стоит ли этот большой section, который я выше описал, заменить div-ом, а заголовок h1 перенести в статью внутрь article ?
        2. Стоит ли section, в которых выводятся блоки, заменить div-ми?

        • Небольшое отступление: без понимания, что за содержимое в каждом блоке невозможно дать правильную рекомендацию.
          1) Если у вас несколько section на странице, то почему вы помещаете заголовок в h1, а в другой в h2? Для заголовков должна соблюдаться иерархия, каждый последующий должен дополнять предыдущий.
          2) Section и article обычно включают в себя заголовки, то есть не обязательно. И в принципе, я не видела section в разметке в таком количестве, максимум один на странице.
          3) Article — это статья, если у вас на сайте действительно есть список статей с краткой аннотацией, то можно каждую обернуть этим тегом. Если одна на странице, то этот тег не нужен.
          4) Пропустила (section)Блоки: «похожие статьи» и прочее, каждый в теге section с заголовком h2(/section). Контент внутри не уникальный, поэтому это только aside
          5) Section внутри aside тоже не вариант. Вы невнимательно читали описание каждого тега, и одного вечера недостаточно, потому что это сложная и неоднозначная тема.
          6) Заголовок h2 в aside — что у вас в этой колонке? Я где-то видела споры насчёт заголовков в боковых колонках вообще, максимум h3, а так по возможности помещать описание в строчные контейнеры.

          • Чем дальше развивается тема, тем больше вопросов появляется ))) Но, думаю, это уже будет злоупотребление Вашим временем.

            Спасибо за консультацию, простите, что бесплатную 🙂

          • Пожалуйста. Почитайте все комментарии к этой главе, там есть много полезной информации. Весь код приведён как пример, это не значит, что в вашем случае нужно делать именно такую разметку.

          • Здравствуйте, ув. Елена, ещё раз 🙂

            В спецификации написано:

            «Когда главное содержимое страницы (т. е. исключая футеры, хедэры, блоки навигации и боковые панели) целиком представляет собой самостоятельную композицию, содержимое следует размечать с использованием элемента main, можно также с помощью article, но в данном случае это технически избыточно (поскольку очевидно, что страница – единая композиция, так как это единственный документ).»

            Вы пишите:

            «Когда главное содержимое страницы (т. е. исключая футеры, хедэры, блоки навигации и боковые панели) целиком представляет собой самостоятельную композицию, содержимое следует размечать с использованием элемента main, можно также с помощью article, но в данном случае это технически избыточно (поскольку очевидно, что страница – единая композиция, так как это единственный документ).»

            Если правильно, понимаю, то Ваши слова и слова спецификации — это одно и тоже?

            Спецификация как-то написана таким образом, что не понятно, или main можно опустить, или article.

            То есть получается при разметке статья размещается в main и будет следующая конструкция?

            (main role=»main» itemscope itemtype=»http://schema.org/Article»)
            Заголовок статьи
            Текст
            Комментарии
            (/main)

          • Здравствуйте. Уточните, пожалуйста, где я так пишу?

          • Ой, слова из спецификации по ошибке приписал Вам. Не то скопировал. Ваши слова имел в виду эти:

            «3) Article — это статья, если у вас на сайте действительно есть список
            статей с краткой аннотацией, то можно каждую обернуть этим тегом. Если
            одна на странице, то этот тег не нужен.»

          • Ещё раз напомню про семантические элементы — это не теги-обёртки, поэтому их присутствие на странице должно быть продиктовано смысловой необходимостью. Примеры разметки с использованием тега main можете посмотреть по этой ссылке.
            Я редко встречаю микроразметку на сайтах и вряд ли её удобно добавлять вручную и не для всей информации на сайте она нужна.
            Роли для элементов прописываются, если вы делаете ресурс для людей с ограниченными возможностями. В остальных случаях, думаю, в них нет необходимости, так как семантические элементы по умолчанию уже имеют соответствующие роли.
            К вашему вопросу об article. Статья — жанр журналистики, она может встречаться в газетах, журналах и прочих изданиях. Может ли в газете быть одна статья? Нет. Поэтому и нет необходимости использовать этот тег, если статья (или блок текста, претендующий на статью) на сайте одна.
            И еще добавлю: вы пытаетесь разобраться с примерами разметки без содержимого, мне кажется, это бестолковое занятие. Семантика в первую очередь опирается на содержимое, а не на то, какой тег в какой вкладывать.

          • Да, про то, что семантические теги имеют смысловую нагрузку, я уже уяснил.

            Просто, куда не посмотришь, везде по-разному…
            Например, сайт html5 doctor использует внутри тега main, как основной текст публикации с комментариями, так и сайдбар, и об этом пишет, что так надо, но сайдбар повторяется по большей части на каждой странице, а спецификация говорит, что в main должно входить только уникальное содержимое конкретной страницы (то есть в моём понимании — это статья и комментарии к ней без сайдбара). В спецификации говорится, что в main не должны входить логотипы, форма поиска и прочее, про сайдбар не упоминается… но ведь сайдбар тоже неуникален (ну, если там, конечно, нет генерируемого содержимого, разного для каждой страницы).

            Вот и как тут понимать 🙂
            Спасибо, посмотрю по ссылке примеры.

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

            В общем, пока склоняюсь к такому варианту:

            (body)

            (header)(div)Название, слоган сайта(/div) (nav)навигация по сайту вцелом(/nav)(/header)

            (main)
            (h1)Заголовок статьи(/h1)
            (nav)Навигация внутри статьи(/nav)
            (h2)Подзаголовки статьи(/h2)
            (h3)Под-подзаголовки статьи(/h3)
            (section)(h4)Список похожих статей(/h4)(/section)
            (section)(h4)Комментарии(/h4)(article)Отдельный комментарий(/article)(/section)
            (/main)

            (aside)
            (section)(h6)Заголовок блока, не относящегося к статье(/h6)
            (/aside)

            (footer)Копирайты(/footer)

            (/body)

            Одобряете или полная фигня?

          • Честно, я не видела идеальной семантической разметки на сайтах, и мне кажется причиной является то, что слишком много вариантов использования этих элементов и это сбивает с толку. На сайтах, описывающих спецификацию, могут быть рекомендации, а разметка сайта может не придерживаться их. У меня, например, разметка далеко не идеальная, шаблон старый, а времени заняться им нет.
            Насчёт вашей разметки:
            Навигацию внутри статьи на мой взгляд лучше поместить в ul, а не напрямую в nav.
            Как-то странно, вы хотите разместить практически три заголовка подряд?
            Отдельный комментарий — это не статья, лучше оформить списком, так будет видно иерархию в случае ответа на комментарий.
            Section внутри aside — нет. h6 внутри aside тоже нет, лучше дальше h3 в вашем случае не опускаться.
            Не забывайте про divы, их еще никто не отменял и не бойтесь использовать их в разметке.

          • Нет, подзаголовки не подряд. Имел в виду, что есть название статьи, потом навигация по статье (содержание), а эти подзаголовки — это пункты содержания. Под каждым подзаголовком, конечно же, текст, относящийся к нему.

            Хорошо, спасибо за Ваши советы 🙂

          • Ага, поняла. Пожалуйста!