Исполняемые доки HTML: Тег header

Q: Чем head отличается от header в HTML?

это невидимая часть документа с , тегами и ссылками на стили, и он ровно один. это видимое содержимое внутри , и на странице их может быть несколько.

Q: Может ли на странице быть несколько элементов header?

Да. Обычно у страницы одна шапка сайта, а у каждого или может быть собственный для заголовка и метаданных. Ориентиром banner для программ чтения с экрана считается только header, который не находится внутри article, aside, main, nav или section.

Q: Как закрепить шапку вверху при прокрутке?

Задайте ей position: sticky; top: 0;, цвет фона и z-index, чтобы содержимое прокручивалось под ней. Sticky работает, только пока родитель шапки выше самой шапки, а предок с overflow: hidden не дает ей закрепиться относительно страницы.

Как сделать шапку сайта в HTML

Оберните верх страницы (логотип, название сайта, главное меню) в элемент <header>. Это блок без стилей по умолчанию, поэтому несколько строк CSS превращают его в панель:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site header</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    .site-header {
      display: flex; align-items: center; gap: 16px;
      padding: 12px 20px; background: #111827; color: #fff;
    }
    .logo { font-weight: 700; font-size: 20px; margin-inline-end: auto; }
    .site-header a { color: #e5e7eb; text-decoration: none; }
    .site-header a:hover { color: #fff; text-decoration: underline; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="logo">Acme</div>
    <nav>
      <a href="#">Products</a>
      <a href="#">Pricing</a>
      <a href="#">Blog</a>
    </nav>
    <a class="cta" href="#">Sign up</a>
  </header>
  <main style="padding: 20px;">
    <h1>Welcome</h1>
    <p>The page content starts here.</p>
  </main>
</body>
</html>

margin-inline-end: auto у логотипа отталкивает меню и кнопку в дальний конец панели. Удалите элемент <style>, и шапка все равно останется шапкой: ее делает такой тег, а не темный фон.

header, head и h1

Три похожих названия, которые делают разную работу:

Элемент	Где	Виден	Сколько
`<head>`	Прямо внутри `<html>`, перед `<body>`	Нет: содержит `<title>`, `<meta>`, `<link>`	Ровно один
`<header>`	Внутри `<body>`	Да: вступительное содержимое страницы или раздела	Сколько угодно
`<h1>`...`<h6>`	Где угодно в `<body>`	Да: заголовок	Сколько угодно

<head> ниже задает заголовок страницы, который браузер показывает на вкладке. Все, что видно в превью, берется из <body>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>This text is in the head</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <header style="border: 2px solid #2563eb; padding: 0 12px;">
    <h1>This h1 is inside a header</h1>
    <p>The header is visible content.</p>
  </header>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title from the head: ' + document.title;
  </script>
</body>
</html>

Шапка часто содержит заголовок, но не обязана, а заголовку не нужна обертка header.

Шапки внутри статей

<header> открывает ближайшую статью или раздел, а не только страницу. Список записей блога, где у каждой записи своя шапка, корректен и распространен:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article headers</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    article header { border-bottom: 1px solid #e5e7eb; }
    article h2 { margin: 12px 0 4px; }
    .meta { color: #6b7280; font-size: 14px; margin: 0 0 10px; }
  </style>
</head>
<body>
  <article>
    <header>
      <h2>Why tabs beat spaces</h2>
      <p class="meta">By Sam, <time datetime="2026-09-20">Sep 20</time></p>
    </header>
    <p>A short argument.</p>
  </article>
  <article>
    <header>
      <h2>Why spaces beat tabs</h2>
      <p class="meta">By Lee, <time datetime="2026-09-22">Sep 22</time></p>
    </header>
    <p>A shorter reply.</p>
  </article>
</body>
</html>

Для программ чтения с экрана ориентиром banner становится только шапка уровня страницы (та, что не находится внутри article, aside, main, nav или section). Шапки статей это обычные группы, поэтому несколько banner на странице не появится.

Закрепленная шапка

position: sticky держит шапку вверху, пока содержимое под ней прокручивается. Прокрутите блок ниже:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .viewport { height: 220px; overflow-y: auto; border: 2px solid #e5e7eb; }
    header {
      position: sticky; top: 0; z-index: 1;
      background: #2563eb; color: #fff; padding: 10px 14px; font-weight: 600;
    }
    .content p { margin: 0; padding: 14px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="viewport">
    <header>I stay at the top</header>
    <div class="content">
      <p>Row 1</p><p>Row 2</p><p>Row 3</p><p>Row 4</p>
      <p>Row 5</p><p>Row 6</p><p>Row 7</p><p>Row 8</p>
    </div>
  </div>
</body>
</html>

Работу обеспечивают три детали: top: 0 (без смещения sticky ничего не делает), цвет фона (иначе сквозь шапку видны строки) и z-index, чтобы позиционированное содержимое не рисовалось поверх нее. На настоящей странице прокручивается сама страница, поэтому шапка стоит прямо в <body>.

Шапка с position: fixed тоже остается на месте, но выпадает из потока страницы, поэтому содержимое заезжает под нее, и ему нужен отступ сверху. Sticky сохраняет свое место в раскладке.

Шапка может содержать почти любое содержимое: заголовки, картинку логотипа, <nav>, форму поиска, кнопку. Она не может содержать другой <header> или <footer> и не может находиться внутри <footer>, <address> или другого <header>.

<header>
  <a href="/"><img src="logo.svg" alt="Acme home"></a>
  <nav aria-label="Main">...</nav>
  <form role="search">...</form>
</header>

Когда логотип это ссылка на главную страницу, его текст alt должен говорить, куда ведет ссылка («Acme home»), потому что именно его объявляет программа чтения с экрана.

Частые ошибки

Путаница между <header> и <head>. Метаданные идут в <head>; видимое содержимое туда никогда не попадает.
<header> для каждого заголовка. Одному заголовку обертка не нужна. Используйте <header>, когда есть группа вступительного содержимого.
Закрепленная шапка без фона. Текст страницы заметно прокручивается сквозь нее. Задайте background.
Sticky, который не закрепляется. Предок с overflow: hidden или overflow: auto становится для sticky прокручиваемым блоком, поэтому шапка закрепляется внутри этого блока (или не закрепляется вовсе). Проверьте предков.
Меню сайта в <div> внутри шапки. Используйте <nav>, чтобы пользователи программ чтения с экрана могли к нему переходить.

Часто задаваемые вопросы

Что такое тег header в HTML?

<header> это семантический элемент для вступительного содержимого: логотип и меню сайта вверху страницы или заголовок и подпись автора в начале статьи. Это обычный блок без стилей по умолчанию.

Чем head отличается от header в HTML?

<head> это невидимая часть документа с <title>, тегами <meta> и ссылками на стили, и он ровно один. <header> это видимое содержимое внутри <body>, и на странице их может быть несколько.

Может ли на странице быть несколько элементов header?

Да. Обычно у страницы одна шапка сайта, а у каждого <article> или <section> может быть собственный <header> для заголовка и метаданных. Ориентиром banner для программ чтения с экрана считается только header, который не находится внутри article, aside, main, nav или section.

Нужно ли класть nav внутрь header?

Можно, и так часто делают, когда главное меню стоит вверху страницы. Поместить <nav> вне <header> тоже корректно; выбирайте то, что подходит вашей раскладке.

Как закрепить шапку вверху при прокрутке?

Задайте ей position: sticky; top: 0;, цвет фона и z-index, чтобы содержимое прокручивалось под ней. Sticky работает, только пока родитель шапки выше самой шапки, а предок с overflow: hidden не дает ей закрепиться относительно страницы.

Связанные концепции