Элемент <header>

Элемент <header> (от англ. header — верхний колонтитул, заголовок) служит контейнером для вводной информации и навигации. На практике он используется для выделения самой верхней части веб-страницы или любого другого раздела веб-страницы. Русскоязычные разработчики часто называют его шапкой сайта или просто хедер.

Термин «вводная информация» в описании используется для обозначения всего того, что пользователь видит перед основным содержимым.

Внутри элемента <header> обычно располагаются:

название и логотип сайта;
навигационные ссылки;
поисковая форма (поле ввода);
корзина, если это интернет-магазин;
иконки соцсетей;
элементы заголовков (<h1>-<h6>);
контактные данные.

Категории	Потоковое содержимое, явное содержимое.
Синтаксис	`<header>...</header>`
Опускание тегов	Начальный и конечный теги обязательны.
Модель содержимого	Потоковое содержимое, но не допускаются в качестве потомков элементы `<header>`, `<footer>` и `<main>`.

Атрибуты

Для элемента <header> доступны глобальные атрибуты и события.

Стиль по умолчанию

Стиль по умолчанию для элемента <header>, определённый в спецификации HTML:

header { display: block; }

Пример

body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #ffcc00;
  color: #333;
  padding: 15px;
  text-align: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin: 0 15px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

nav ul li a:hover { color: #ff6600; }

footer { text-align: center; }

<body>
  <header>
    <h1>Кулинарный блог PuzzleWeb.ru</h1>
    <nav>
      <ul>
        <li><a href="#home">Главная</a></li>
        <li><a href="#recipes">Рецепты</a></li>
        <li><a href="#about">Обо мне</a></li>
        <li><a href="#contact">Контакты</a></li>
      </ul>
    </nav>
    <p>Добро пожаловать в мой кулинарный блог, где я
      делюсь своими любимыми рецептами и кулинарными
      советами!</p>
  </header>

  <article>
    <h2>Рецепт: Шоколадный торт</h2>
    <p>Этот шоколадный торт — идеальное угощение
      для любого праздника. Он получается очень
      сочным и насыщенным.</p>
    <p><a href="#read-more">Продолжить чтение...</a></p>
  </article>

  <footer>
    <p>Copyright © 1991 PuzzleWeb.ru</p>
  </footer>
</body>

Результат

Кулинарный блог PuzzleWeb.ru

Добро пожаловать в мой кулинарный блог, где я делюсь своими любимыми рецептами и кулинарными советами!

Рецепт: Шоколадный торт

Этот шоколадный торт — идеальное угощение для любого праздника. Он получается очень сочным и насыщенным.

Продолжить чтение...