Тег <main>: основное содержимое
Как отделить основную часть страницы от повторяющегося меню и подвала.
Зачем нужен этот элемент
main содержит основную информацию конкретной страницы. Повторяющееся меню, общая шапка и общий подвал обычно находятся за его пределами. Вспомогательные технологии используют этот ориентир для быстрого перехода к содержимому.
На обычной странице оставьте один видимый main. Внутри него могут находиться статья, каталог, поиск или несколько разделов. Ссылка «К содержанию» в начале документа помогает пропустить длинную навигацию и перейти к этой области.
Синтаксис и пример
<a href="#content">К содержанию</a>
<header>Название проекта</header>
<main id="content">
<h1>Учимся HTML</h1>
<p>Основной материал страницы.</p>
</main>
<footer>Редакция справочника</footer>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| id | Цель для ссылки пропуска навигации. |
| Содержимое | Уникальная основная информация текущей страницы. |
| Ориентир | Встроенная семантика main не требует role="main". |
Частая ошибка
Не оборачивайте в main весь документ вместе с общей навигацией. Тогда смысл быстрого перехода к основной области теряется.
Небольшая практика
Добавьте ссылку на #content перед шапкой. Пройдите страницу клавишей Tab и убедитесь, что можно сразу перейти к статье.
Разберите также <header>, <footer>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.