Элемент <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"
, поэтому этот атрибут не надо указывать.
Элемент <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>
, когда нужно объединить содержимое элемента.