<header>
- 25 января 2023
Что делает тег
Тег <header>
— это контейнер для вводной части сайта или набора навигационных ссылок. Обычно он размещается в верхней части веб-страницы или раздела, к которому принадлежит.
Синтаксис тега <header>
<header>
<h1>Заголовок страницы</h1>
<nav>
<ul>
<li><a href="#">Дома</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакт с нами</a></li>
</ul>
</nav>
</header>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <header>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Создание шапки сайта с заголовком страницы:
<header>
<h1>Добро пожаловать на мой сайт</h1>
</header>
Добавление навигационных ссылок в шапку:
<header>
<h1>Добро пожаловать на мой сайт</h1>
<nav>
<ul>
<li><a href="#">Дома</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакт с нами</a></li>
</ul>
</nav>
</header>
Добавление логотипа:
<header>
<img src="logo.png" alt="Логотип моего сайта">
<h1>Добро пожаловать на мой сайт</h1>
<nav>
<ul>
<li><a href="#">Дома</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакт с нами</a></li>
</ul>
</nav>
</header>
Добавление фонового изображения:
<header style="background-image: url(header-bg.jpg);">
<h1>Добро пожаловать на мой сайт</h1>
<nav>
<ul>
<li><a href="#">Дома</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакт с нами</a></li>
</ul>
</nav>
</header>
Создание «липкого» заголовка:
<header style="position: sticky; top: 0;">
<h1>Добро пожаловать на мой сайт</h1>
<nav>
<ul>
<li><a href="#">Дома</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакт с нами</a></li>
</ul>
</nav>
</header>
Для чего использовать тег <header>
- Создать шапку веб-страницы или всего сайта.
- Создать шапку или заголовок раздела.
- Сделать фиксированную шапку. Она останется неподвижной в верхней части страницы, даже когда пользователь прокрутит страницу вниз.
Атрибуты тега <header>
У тега <header>
нет специфических атрибутов.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Тег <header>
следует использовать только для разметки верхней части веб-страницы или раздела документа. Он не должен использоваться для разметки других типов содержимого: изображений, абзацев или списков.
Нюансы
- Если на странице несколько заголовков, каждый нужно выделить отдельным тегом
<header>
. - Если
<header>
содержит несколько разделов или уровней содержимого, каждый раздел или уровень выделяется соответствующими тегами HTML, например,<nav>
или<h2>
.
Поддержка браузерами
Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
Тег <header>
обычно используется для выделения верхней части веб-страницы, но есть и другие теги, которые можно использовать вместо него: <div>
и <section>
.
Чем заменить тег
- Использовать тег
<div>
или<section>
с соответствующими именами классов и стилями CSS. - Использовать другие HTML-теги, такие как
<h1>
или<nav>
, в зависимости от конкретного содержания и расположения раздела заголовка.
Актуальность
Тег <header>
актуален и широко используется.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023