Чтобы сделать header, оберните вводную часть страницы в семантический тег <header>, положите внутрь логотип и навигацию <nav>, а раскладку постройте на Flexbox со justify-content: space-between. Для мобильных добавьте медиа-запрос и бургер-меню, для закрепления при прокрутке — position: sticky. Ниже — разбор структуры, готовый код и частые ошибки.
Что такое хедер и зачем нужен тег header
Хедер (шапка сайта) — верхняя часть страницы с вводным содержимым: логотипом, навигацией, контактами, кнопками действия. Тег <header> — это семантический элемент, который отделяет вводную часть от основного контента. В отличие от нейтрального <div>, он сообщает поисковым системам и скринридерам структуру страницы.
- Семантика вместо div.
<div class="header">для браузера — просто блок.<header>несёт смысл: это шапка раздела. - Роль banner. Если
<header>вложен напрямую в<body>, он автоматически получает ARIA-рольbanner— скринридеры используют её для быстрой навигации. Внутри<article>или<section>роль не назначается. - Хедеров может быть несколько. Один общий для страницы плюс по одному внутри секционных блоков (
<article>,<section>,<aside>) — например, как «шапка» отдельной карточки или статьи.
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
- Где и как применять? Потестируем модель после установки на разных задачах
- Как дообучить модель под себя?
Структура хедера
Шапка располагается в верхней части страницы и может содержать разные элементы в зависимости от целей и дизайна сайта. Основные компоненты:
- Логотип — визуальный символ бренда. Размещается слева и хорошо виден на фоне остальных элементов. Для вставки используется тег
<img>, обёрнутый в ссылку на главную. - Навигационное меню даёт доступ к разделам сайта. Размечается тегом
<nav>со списком<ul>и пунктами<li>. Тег<nav>часто кладут внутрь<header>, но это не обязательно — элементы независимы. - Контактные данные (телефон, адрес, почта) — для быстрого доступа. Телефон и почту оформляют ссылками
tel:иmailto:. - Дополнительные элементы — кнопки «Вход» и «Регистрация», поиск, переключатель языка, корзина.
AI-баттл: российские и зарубежные нейросети — кто справится лучше? Бесплатный вебинар + разбор инструментов. Смотреть
Семантическая разметка хедера: пример HTML
Базовая разметка шапки с логотипом и навигацией. Контейнер .container ограничивает ширину контента и центрирует его:
<header class="main-header">
<div class="container">
<a href="/" class="logo">
<img src="logo.svg" alt="Логотип компании">
</a>
<nav class="main-nav" aria-label="Основная навигация">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/services">Услуги</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
<button class="burger" aria-label="Открыть меню"><span></span></button>
</div>
</header>
Атрибут aria-label на <nav> помогает различать несколько навигаций на странице. Атрибут alt у логотипа обязателен для доступности.
Адаптивная вёрстка хедера на Flexbox
Flexbox — основной способ разложить шапку: логотип и меню встают в строку и распределяются по краям одним свойством. Это удобнее устаревшего float и проще выравнивается по вертикали.
.main-header {
background-color: #1f2937;
color: #fff;
}
.main-header .container {
max-width: 1200px;
margin: 0 auto;
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.main-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 24px;
}
.main-nav a {
color: #fff;
text-decoration: none;
}
.main-nav a:hover {
color: #a5b4fc;
}
.logo img { width: 120px; height: auto; }
.burger { display: none; }
display: flexвключает гибкую раскладку контейнера.align-items: centerвыравнивает логотип и меню по вертикали.justify-content: space-betweenприжимает логотип влево, меню вправо.gap: 24pxзадаёт равные отступы между пунктами безmarginна каждом.
Sticky-хедер: закрепляем шапку при прокрутке
Закреплённая шапка остаётся перед глазами пользователя при скролле. position: sticky — это поведение, когда блок едет со страницей, доезжает до заданной точки и «цепляется» за экран. Достаточно двух свойств:
.main-header {
position: sticky;
top: 0;
z-index: 100;
}
top: 0 задаёт точку прилипания у верхнего края, z-index держит хедер над остальным контентом. Важно: sticky работает, только если у родителя не задан overflow: hidden, а сам элемент не последний в контейнере.
Мобильное меню: медиа-запрос и бургер
На узких экранах горизонтальное меню не помещается — его прячут за иконкой-бургером. Медиа-запрос переключает раскладку, а небольшой скрипт показывает и скрывает меню по клику.
@media (max-width: 768px) {
.burger { display: block; }
.main-nav ul {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
gap: 0;
background-color: #1f2937;
}
.main-nav.is-open ul { display: flex; }
}
const burger = document.querySelector('.burger');
const nav = document.querySelector('.main-nav');
burger.addEventListener('click', () => {
nav.classList.toggle('is-open');
});
Класс is-open добавляется и снимается по клику на бургер — меню разворачивается вертикально под шапкой. Для доступности меняйте aria-expanded на кнопке.
header или div: когда что использовать
| Критерий | <header> | <div class=»header»> |
|---|---|---|
| Семантика | Несёт смысл «шапка раздела» | Нейтральный блок без смысла |
| SEO и поисковики | Помогает понять структуру | Не даёт сигналов |
| Доступность (ARIA) | Роль banner в body автоматически | Роль нужно задавать вручную |
| Скринридеры | Быстрый переход к шапке | Не распознаётся как ориентир |
| Когда применять | Всегда для вводной части | Только под чисто визуальную обёртку |
Принципы удобного дизайна шапки
Простота и чёткость — без перегруженности. Минимум элементов и сдержанная палитра дают чистый, понятный интерфейс.
Консистентность — единый стиль и структура на всех страницах, чтобы пользователю было легко ориентироваться.
Доступность — правильная HTML-структура, контрастные цвета, понятные alt и aria-label.
Баланс высоты — шапка должна вмещать нужные элементы, но не отнимать много места у основного контента.
Частые ошибки при вёрстке хедера
- Вкладывают header в header или footer. Тег
<header>нельзя класть внутрь другого<header>,<footer>или<address>. - Путают header и head.
<head>— служебная секция с мета-данными,<header>— видимая шапка внутри<body>. - Обходятся без nav. Навигацию заворачивают в
<div>вместо<nav>— теряются семантика и доступность. - Логотип без alt. Картинка-логотип без
altнедоступна скринридерам и хуже индексируется. - Sticky не работает из-за
overflow: hiddenу родителя или забытогоtop. - Меню не адаптируется. Без медиа-запроса горизонтальное меню ломается на мобильных.
Бесплатный вебинар: как стать промпт-инженером с нуля. Инструменты, навыки, первые шаги в профессии будущего. Участвовать
Частые вопросы
Чем тег header отличается от div?
<header> — семантический тег: он сообщает браузеру, поисковикам и скринридерам, что это вводная часть раздела. <div> — нейтральный блок без смысла. Для шапки сайта используйте <header>.
Сколько тегов header может быть на странице?
Сколько угодно. Один общий хедер страницы плюс по одному внутри секционных блоков (<article>, <section>, <aside>). Роль banner получает только тот, что вложен напрямую в <body>.
Как закрепить хедер при прокрутке?
Задайте шапке position: sticky; top: 0; z-index: 100. Убедитесь, что у родительского контейнера нет overflow: hidden.
На чём верстать раскладку хедера — float или flexbox?
На Flexbox. Он проще выравнивает элементы по вертикали и распределяет их одним свойством justify-content. float сегодня считается устаревшим способом.
Заключение
Вёрстка хедера — важный этап создания страницы, который задаёт первое впечатление и обеспечивает удобную навигацию. Используйте семантический тег <header> с вложенным <nav>, стройте раскладку на Flexbox, закрепляйте шапку через sticky и прячьте меню в бургер на мобильных. Соблюдая простоту, консистентность и доступность, вы получите шапку, которая хорошо выглядит на любых устройствах и работает на узнаваемость бренда.
- Освой нейросеть Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
- УЧАСТВОВАТЬ ЗА 0 РУБ.
- Расскажем, как получить подписку
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросеть DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
