<header>

Надень на страницу шапку, а то она голову простудит.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

<header> предназначен для создания «шапок» — всего сайта или какой-то части контента, например, статьи.

Пример

Секция статьи "Пример"

Вот как будет выглядеть <header> на странице портфолио:

        
          
          <!-- Шапка --><header>  <img src="logo.svg" width="200" height="120" alt="Лого">  <nav>    <a href="#">Мои работы</a>    <a href="#">Мои навыки</a>    <a href="#">Контакты</a>  </nav></header><!-- / Шапка --><main>  <h1>Портфолио Ольги Сасквоч</h1>  <p>Добро пожаловать!</p>  <p>Рада приветствовать вас на своём сайте...</p></main><footer>  <p>Ольга Сасквоч</p>  <p>2021</p></footer>
          <!-- Шапка -->
<header>
  <img src="logo.svg" width="200" height="120" alt="Лого">
  <nav>
    <a href="#">Мои работы</a>
    <a href="#">Мои навыки</a>
    <a href="#">Контакты</a>
  </nav>
</header>
<!-- / Шапка -->
<main>
  <h1>Портфолио Ольги Сасквоч</h1>
  <p>Добро пожаловать!</p>
  <p>Рада приветствовать вас на своём сайте...</p>
</main>
<footer>
  <p>Ольга Сасквоч</p>
  <p>2021</p>
</footer>

        
        
          
        
      
Открыть демо в новой вкладке

Как это понять

Секция статьи "Как это понять"

Контейнер <header> чаще всего используется для создания шапки сайта. Шапка сайта — это блок с вводной информацией, там обычно находятся логотип, строка поиска, меню, кнопки соцсетей или другие ключевые элементы.

Как правило, шапка находится сверху и выглядит одинаково на всех страницах сайта. Она помогает вернуться на главную страницу или попасть в нужный раздел, если в ней есть кнопки меню.

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

Как пишется

Секция статьи "Как пишется"

Тег <header>...</header> — парный, он всегда закрывается.

На странице может быть несколько тегов <header>. Но их нельзя помещать в контейнеры <footer>, <address> или другой <header>.

Атрибуты

Секция статьи "Атрибуты"

Можно применить любые глобальные атрибуты.

Подсказки

Секция статьи "Подсказки"

💡 У <header> блочные стили по умолчанию 🤓

На практике

Секция статьи "На практике"