header и footer - теги для вводной и завершающей части страницы (или отдельной статьи), а main - для по-настоящему главного, уникального содержимого. В отличие от div они дают программам для незрячих реальные ориентиры (landmarks): можно сразу перейти к main, минуя повторяющиеся шапку и меню, одной горячей клавишей.
Обрати внимание: внутри main есть отдельная статья article, а у неё свой собственный header - это не ошибка, а нормальная вложенность. Попробуй убрать внешний header сайта и посмотри, что структура страницы всё равно останется понятной.
Роль страницы в HTML: теги header и footer
header и footer можно использовать НЕСКОЛЬКО раз на одной странице - не только для всего сайта целиком, но и отдельно внутри каждой статьи article для её собственного заголовка или подписи. Но у этой гибкости есть важная деталь: роль-ориентир для скринридеров (banner у header, contentinfo у footer) появляется только у header/footer ВЕРХНЕГО уровня - если вложить их внутрь article, aside, main, nav или section, эта роль-landmark пропадает.
<body><header>Шапка сайта</header>...<article><header>Заголовок статьи</header>...</article></body> - два header на одной странице, оба на своих законных местах.
<div id="header">Шапка сайта</div> - визуально то же самое, но div не даёт скринридеру никакого ориентира: пользователь не сможет перейти сразу к шапке или, наоборот, пропустить её одной командой.
Главный контент страницы в HTML: тег main
main отмечает по-настоящему уникальное содержимое страницы - то, ради чего человек сюда пришёл, без повторяющихся меню, шапки и подвала. На странице должен быть только ОДИН видимый main - остальные допустимы лишь со специальным атрибутом hidden. Кроме того, main нельзя вкладывать внутрь article, aside, header, footer или nav - он должен идти на верхнем уровне страницы.
<body><header>...</header><main>...</main><footer>...</footer></body> - main на верхнем уровне, ровно один видимый на странице.
<header><main>...</main></header> - main вложен внутрь header, что запрещено спецификацией: header не может быть его родителем.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Использовать div вместо header/main/footer там, где смысл реально подходит | Пропадает landmark-навигация - скринридер не может предложить перейти сразу к шапке, главному содержимому или подвалу | Использовать семантические теги вместо div, когда контент реально играет эту роль |
| Вкладывать main внутрь article, aside, header, footer или nav | Невалидная структура - main теряет смысл "главного" контента страницы | Держать main на верхнем уровне, как прямого потомка body |
| Делать несколько ВИДИМЫХ main на одной странице | Скринридеры и валидаторы не понимают, какой из main действительно главный | Оставлять только один видимый main, остальные - только со скрывающим атрибутом hidden |
| Ожидать landmark-роль у любого header/footer на странице | header/footer, вложенные в article, aside, main, nav или section, теряют роль banner/contentinfo | Помнить: роль-ориентир есть только у header/footer верхнего уровня |
Шпаргалка
| Тег | Роль и особенности |
|---|---|
| header | Роль banner (только вне article/aside/main/nav/section); можно использовать несколько раз на странице |
| footer | Роль contentinfo (та же оговорка); относится к ближайшему секционному предку или ко всей странице |
| main | Роль main; только ОДИН видимый на странице; нельзя вкладывать в article/aside/header/footer/nav |
| Landmark-навигация | Скринридеры дают горячие клавиши для перехода между ориентирами напрямую |
Коротко: отвечаем на вопросы
Можно ли использовать несколько header и footer на одной странице?
Да. Помимо header/footer всего сайта, у каждой отдельной article может быть свой собственный header (заголовок и дата статьи) и footer (например, подпись автора) - это описано прямо в спецификации как обычный случай.
В чём разница между header и div id="header"?
Визуально - никакой, если стили одинаковые. Но header (вне article/aside/main/nav/section) даёт роль-ориентир banner, которую понимают скринридеры, а div id="header" - это просто div: никакой встроенной роли у него нет, id тут не более чем текст для CSS и JS.
Может ли main быть внутри div?
Да, div не входит в список запрещённых родителей для main. Под запретом только article, aside, header, footer и nav - если main оказался внутри одного из них, это ошибка структуры.
Обязательно ли header должен быть визуально в самом верху страницы?
Нет. header - это смысловая роль (вводная или навигационная часть), а не требование к раскладке. С помощью CSS его можно разместить где угодно на странице - это никак не повлияет на его семантику.
