Тег <header> обозначает вводную часть страницы или отдельного её раздела - ту, где обычно находятся логотип, название сайта, меню и форма поиска. Это парный тег: закрывающий </header> обязателен, пропустить его нельзя. Своих атрибутов у него нет, только глобальные вроде class и id.
В этой статье
Для чего нужен тег header в HTML
Визуально <header> не делает ничего - он ведёт себя как обычный блочный элемент, точно так же, как <div>. Разница только в смысле: браузер, поисковый робот и скринридер понимают, что внутри вводная часть, а не случайный контейнер. Именно поэтому семантическую вёрстку и предпочитают сплошным <div>.
<header>
<a href="/">Мой сайт</a>
<nav>
<a href="/blog">Блог</a>
<a href="/contacts">Контакты</a>
</nav>
</header>Строгого списка того, что должно быть внутри, спецификация не задаёт. На практике в шапку страницы прописывают логотип со ссылкой на главную, название сайта, меню в теге <nav>, форму поиска, переключатель языка или кнопку входа. Заголовок <h1>-<h6> внутри желателен, но не обязателен: шапка с одним логотипом и меню тоже валидна.
Пример: как выглядит страница с шапкой
Чем тег header отличается от head
Эти два тега путают чаще всего - названия почти одинаковые, а задачи у них противоположные. Короткое правило: <head> читает браузер, <header> читает посетитель.
| Тег | Где прописывается | Что внутри | Видно на странице |
|---|---|---|---|
<head> |
Внутри <html>, перед <body> |
Кодировка, title, мета-теги, подключение CSS | Нет |
<header> |
Внутри <body> или внутри раздела |
Логотип, название, меню, поиск | Да |
Подробный разбор служебной части документа - на отдельных страницах шпаргалки про тег head и тег body.
Header страницы и header раздела
Один и тот же тег означает разное в зависимости от того, где он прописан. Прямо в <body> это шапка всего сайта. Внутри <article> или <section> - шапка только этого раздела: заголовок статьи, дата, автор. Переключите режим и посмотрите, как меняется разметка и смысл.
Как выбрать первый ноутбук
<body>
<header>
<a href="/">Мой сайт</a>
<nav>...</nav>
</header>
</body>Это шапка всего сайта. Неявная роль для скринридеров: banner.
<article>
<header>
<h2>Как выбрать первый ноутбук</h2>
<p>14 марта, автор: Анна</p>
</header>
<p>Текст статьи...</p>
</article>Это шапка одной статьи. Роли banner здесь нет - для скринридера это обычный блок.
Разметка в обоих случаях одна и та же, меняется только её место в документе. Это и есть суть семантики: тег получает значение от контекста, а не от набора классов.
Сколько раз header можно использовать на странице
Ограничений нет: <header> можно применять столько раз, сколько на странице разделов с собственной вводной частью. Обязательным он тоже не является - страница без единого <header> проходит валидацию.
Практическое правило простое: один <header> прямо в <body> - шапка сайта, и по одному внутри тех <article> или <section>, у которых есть свой заголовок с датой или автором. Оборачивать каждый мелкий заголовок отдельным <header> смысла нет: тег перестаёт что-либо обозначать, если им помечено всё подряд.
Куда header вкладывать нельзя
Спецификация запрещает три сочетания, и все три касаются вложенности. Внутрь <header> нельзя прописывать другой <header> и <footer>. Сам <header> нельзя прописывать внутрь <footer>, <address> и другого <header>.
<footer>
<header>Контакты</header>
</footer>
<header>
<header>Вложенная шапка</header>
</header><footer>
<h2>Контакты</h2>
<address>info@example.com</address>
</footer>Браузер такую разметку всё равно покажет - он не ломается на неправильной вложенности. Но валидатор W3C выдаст ошибку, а скринридер получит структуру, которой в документе нет.
Роль banner и скринридеры
Тут кроется деталь, которую пропускает большинство руководств. Скринридер воспринимает <header> как ориентир banner - блок с общей для всего сайта информацией, к которому пользователь может перейти одной командой. Но получает эту роль только тот <header>, который является прямым потомком <body>.
Как только тег прописан внутри <article>, <section>, <aside>, <nav> или <main>, роль banner не назначается, и для скринридера это просто группа элементов. Это не ошибка - так и задумано, иначе в списке ориентиров оказалась бы шапка каждой статьи в ленте.
Атрибут role="banner" вручную прописывать не нужно: у корневого <header> эта роль уже есть, а дублирование встроенной семантики считается плохой практикой.
Частые ошибки
Все четыре ошибки ниже собраны из реальных разборов чужой вёрстки - три из них браузер покажет без единой жалобы, поэтому замечают их обычно уже на этапе валидации или тестирования со скринридером.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Мета-теги прописаны в <header> вместо <head> |
Мета-теги не работают, а их содержимое может появиться прямо на странице | Перенести всё служебное в <head>, в <header> оставить видимую шапку |
<header> прописан внутри <footer> или другого <header> |
Валидатор W3C выдаёт ошибку, структура документа перестаёт быть корректной | Заменить внутренний тег на <div> или просто на заголовок <h2> |
Вручную добавлен role="banner" |
Роль дублируется, разметка засоряется без всякой пользы | Убрать атрибут - у корневого <header> эта роль уже встроена |
Каждый заголовок обёрнут в свой <header> |
Тег теряет смысл, структура документа становится шумной | Оставить шапку сайта и шапки статей, остальное размечать заголовками |
