<header>

<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> блочные стили по умолчанию 🤓

На практике

Скопировать ссылку "На практике" Скопировано

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 Если придерживаться принципа, при котором в проекте каждый блок находится в отдельном файле, шапку можно реализовать один раз и вставлять уже готовый элемент на все страницы.