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

Элемент <nav> обычно используется для разделов, содержащих основные навигационные блоки веб-сайта. Он может включать ссылки на другие части веб-страницы (например, якоря для оглавления) или полностью на другие страницы.

Ниже показан встроенный набор гиперссылок

<nav>
    <a href="https://google.com">Google</a>
    <a href="https://www.yandex.ru">Yandex</a>
    <a href="https://www.bing.com">Bing</a>
</nav>

Если содержимое навигации представляет собой список элементов, используйте элемент списка, чтобы показать это и улучшить работу пользователя. Обратите внимание на role="navigation", подробнее об этом ниже.

Элементы <footer> могут содержать список ссылок на другие части сайта (FAQ, "Правила и условия" и т. д.). В этом случае достаточно одного элемента нижнего колонтитула, и не нужно обертывать ваши ссылки с помощью элемента <nav> в <footer>.

<!-- элемент <nav> не требуется в  <footer> -->
<footer>
    <nav>
        <a href="#">...</a>
    </nav>
</footer>
<!-- достаточно нижнего колонтитула  -->
<footer>
    <a href="#">...</a>
</footer>

Не допускается в элемент <nav> вкладывать элементы <main>. Добавление role="navigation". Для элемента <nav> рекомендуется использовать атрибут role ARIA, чтобы помогать браузерам (особенно голосовым), которые не поддерживают HTML5, и для представления большего контекста.

<nav role="navigation"></nav>

Cкринридер (Screen reader) - программное обеспечение, которое позволяет слепым или слабовидящим пользователям перемещаться по сайту. Cкринридеры могут по-разному интерпретировать элемент <nav> в зависимости от потребности.

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

Официальная документация по элементу nav

Элемент <article> содержит отдельный контент: статьи, сообщения в блогах, комментарии пользователей или интерактивный виджет, распространяющийся вне контекста страницы (например, RSS). Если элементы article вложены в элемент article , то содержимое вложенных элементов должно быть связано с внешним элементом. Блог (section ) с несколькими сообщениями (article ) и комментариями (article ) может выглядеть примерно так.

<section>
<!-- Каждый отдельный пост в блоге - это  <article> -->
    <article>
        <header>
            <h1>Сообщение в блоге</h1>
            <time datetime="2016-03-13">13th March 2016</time>
        </header>
        <p>Элемент article представляет собой самостоятельную статью или документ.</p>
        <p>Элемент section служит для группировки содержимого.</p>
        <section>
            <h2>Комментарии к <small>"Сообщение в блоге"</small></h2>
            <!-- Связанный комментарий также является отдельной статьей -->
            <article id="user-comment-1">
                <p>Отлично!</p>
                <footer><p>...</p><time>...</time></footer>
            </article>
        </section>
    </article>
    <!-- ./повторить: <article> -->
</section>
<!-- Содержимое, не связанное с блогом или сообщениями, должно находиться вне раздела. -->
<footer>
    <p>Этот контент должен быть не связан с блогом.</p>
</footer>

Если основное содержание страницы (исключая заголовки, нижние колонтитулы, панели навигации и т. д.) - это просто одна группа элементов, то лучше опустить <article> в пользу элемента <main>.

<article>
    <p>Не имеет смысла, эта статья не имеет реального «контекста». </p>
</article>

Вместо этого замените <article> элементом <main>, чтобы указать, что это основной контент для этой страницы.

<main>
<p>Это основной контент, он не должен принадлежать к статье. </p>
</main>

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

<section role="main">
    <p>Этот раздел содержит главный контент на странице.</p>
</section>

В элементе <article> не допускаются элементы <main>

Официальная документация по элементу article

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

Элемент main должен использоваться только один раз на одной странице.

Элемент main не должен быть потомком элементов article, aside, footer, header или nav. В следующем примере мы показываем одну запись в блоге (и соответствующую информацию: ссылки и комментарии).

<body>
<header>
    <nav>...</nav>
</header>
<main>
    <h1>Отдельная запись в блоге</h1>
    <p>Введение для публикации.</p>
    <article>
        <h2>Ссылки</h2>
        <p>...</p>
    </article>
    <article>
        <h2>Комментарии</h2> 
        ...
    </article>
</main>
<footer>...</footer>
</body>

Запись в блоге содержится в элементе <main>, чтобы указать, что это основной контент для этой страницы (и, следовательно, уникальный на веб-сайте).
Элементы <header> и <footer> являются сестринскими для элемента <main>.

Спецификация HTML5 определяет элемент <main> как элемент группирования, а не секционный элемент.

Разрешенные значения атрибута роли ARIA: main (по умолчанию - не задано) или presentation.

Для помощи браузерам, не поддерживающим HTML5, рекомендуется в элементы, предназначенные для использования в качестве основного контента атрибут role="main". Элемент <main> по умолчанию имеет role="main", поэтому этот атрибут не надо указывать.

Официальная документация по элементу main

Элемент <header> представляет собой вступительный контент для ближайшего содержимого в разделе предка или корневого элемента. Элемент <header> обычно содержит группу начальных или навигационных средств.

Элемент header не относится к содержимому секции, он не начинает новый раздел.

<header>
    <p>Добро пожаловать на</p>
    <h1>Yocton!</h1>
</header>

В этом примере <article> содержит <header>.

<article>
    <header>
        <h1>Руководство по HTML5</h1>
    </header>
    <p>Здесь должно было быть руководство по HTML5, но нам было лень.</p>
</article>

Официальная документация по элементу header

Элемент <footer> содержит нижнюю часть страницы. Например, элемент <footer> содержит абзац:

<footer>
    <p>All rights reserved</p>
</footer>

Официальная документация по элементу footer

Элемент <section> представляет собой объединяющий раздел для тематически сгруппированного содержимого. Как правило, каждый раздел должен быть озаглавлен с помощью соответствующего элемента, являющегося дочерним к элементу <section>.

Вы можете использовать элемент <section> в <article> и наоборот.
Каждая секция должна иметь тему (элемент заголовка, определяющий этот раздел).
Не используйте элемент <section> как контейнер для стилевого оформления, для этого используйте элемент <div>. В следующем примере мы показываем одну запись в блоге с несколькими главами, каждая глава представляет собой раздел (section) (озаглавленный набор тематически сгруппированного контента).
```
<article>
<header>
    <h2>Запись в блоге</h2>
</header>
<p>Введение</p>
<section>
    <h3>Глава 1</h3>
    <p>...</p>
</section>
<section>
    <h3>Глава 2</h3>
    <p>...</p>
</section>
<section>
    <h3>Комментарии</h3> ...
 </section>
</article>
```
Раздел (section) является частью чего-то. Статья (article) - это отдельная вещь. На практике ответ на вопрос: "что использовать section или article ?" - зависит от намерения автора. Например, в главе «Бабушка Смит», может быть раздел: «Эти сочные зеленые яблоки прекрасно подходят для начинки пирогов», потому что будет много других глав (и возможно) других видов яблок. С другой стороны, можно было представить себе твитовую или газетную рекламу, которая содержала «Бабушка Смит. Эти сочные зеленые яблоки прекрасно подходят для начинки пирогов», и это было бы статьей, т.к. не содержало бы иного контента. Комментарии к статье не являются частью статьи, которую они комментируют, но они связаны с ней, поэтому могут содержаться в их собственном элементе article.

Разработчики должны использовать элемент <section>, когда нужно объединить содержимое элемента.

Официальная документация по элементу section