`<header>`

Надень на контент шапку, а то поисковый робот заругает.

Время чтения: 6 мин

Кратко

Скопировано

<header> — это семантичный элемент, который нужен для отделения вводного содержимого или навигации от основного содержимого целой страницы или секционного блока. Например, «шапка» с навигацией для всего сайта или имя автора и дата публикации в превью статьи или новости.

Пример

Скопировано

Пример поста в блоге:

        
          
          <article>  <header>    <h2>Мой самый первый блог пост</h2>    <p>3 дня назад</p>  </header>  <p>Сегодня я начал изучать вёрстку. Это очень увлекательно.</p>  <footer>    <a href="?comments=1">Все комментарии</a>  </footer></article>
          <article>
  <header>
    <h2>Мой самый первый блог пост</h2>
    <p>3 дня назад</p>
  </header>
  <p>Сегодня я начал изучать вёрстку. Это очень увлекательно.</p>
  <footer>
    <a href="?comments=1">Все комментарии</a>
  </footer>
</article>

Вот как можно использовать <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>  <ul class="portfolio-articles">    <li>      <article class="card-article">        <h2 class="card-article__title">Работа номер 1</h2>        <div class="portfolio-work portfolio-work_color_orange-1"></div>        <p class="card-article__description">          Тут описываем какой мы сделали замечательный проект,          причём в одиночку. Все эти бессонные ночи наедине с монитором          и клавиатурой.        </p>        <header class="card-article__header">          Авторы: Ольга Сасквоч        </header>      </article>    </li>  </ul></main>
          <!-- Начало шапки страницы -->
<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>

  <ul class="portfolio-articles">
    <li>
      <article class="card-article">
        <h2 class="card-article__title">Работа номер 1</h2>
        <div class="portfolio-work portfolio-work_color_orange-1"></div>
        <p class="card-article__description">
          Тут описываем какой мы сделали замечательный проект,
          причём в одиночку. Все эти бессонные ночи наедине с монитором
          и клавиатурой.
        </p>
        <header class="card-article__header">
          Авторы: Ольга Сасквоч
        </header>
      </article>
    </li>
  </ul>
</main>

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

Как понять

Скопировано

Каждый секционный элемент (<article>, <aside>, <nav>, <section>) может содержать элемент <header>. Этот семантичный тег отделяет часть контента, которая напрямую связана с основным контентом секционного блока, но сама по себе не является основным контентом этого блока.

Классический пример — «шапка» сайта. В «шапке» может находиться навигация, лого, поисковая строка и так далее. Это содержимое страницы сайта только «обслуживает» основное, но не является основной темой страницы.

То же самое происходит в меньших масштабах — внутри любого вложенного секционного блока. Допустим, наш сайт продаёт велосипеды. На главной странице есть секция с каталогом. В начале каталога располагается меню с хлебными крошками к разным типам велосипедов. Меню лучше поместить в <header> секции. Меню, очевидно, связано с каталогом, но это не основной контент. Основной контент — это карточки товаров в каталоге.

Ещё масштаб меньше — карточка товара <article>. Тоже может иметь свой <header>. В нём можно разместить любую информацию, которая будет связана с самим товаром, но не будет основной. Например, количество доступных товаров или иконка «Акция». Иконка «Акция» связана с товаром, но не основное содержимое карточки. Основной контент тут — фото и описание товара.

Важно не связывать <header> только с «шапкой» сайта. Это семантичный тег, который отделяет основной контент секции от неосновного. В вёрстке он может располагаться в любом месте секционного блока, а не обязательно сверху. Лучше воспринимать <header> как типографский колонтитул.

Как пишется

Скопировано

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

        
          
          <header>  <h2>Моя первая свёрстанная страничка</h2>  <p>3 дня назад</p></header>
          <header>
  <h2>Моя первая свёрстанная страничка</h2>
  <p>3 дня назад</p>
</header>

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

Атрибуты

Скопировано

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

Подсказки

Скопировано

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

💡 <header> может содержать заголовок, а может не содержать. Если заголовок h1-h6 указан в <header>, то он будет формировать семантическую раскладку Outline страницы. Outline — это все заголовки всех уровней в виде дерева вложенности (как оглавление):

        
          
          <!DOCTYPE HTML><html lang="ru">  <head>    <title>Блог великого программиста Васи</title>  </head>  <body>    <h1>Блог Васи</h1>    <section>      <header>        <nav>          <a href="?t=-1d">Вчера</a>;          <a href="?t=-7d">Прошлая неделя</a>;          <a href="?t=-1m">Прошлый месяц</a>        </nav>        <h2>Я прочитал всю спецификацию EcmaScript!</h2>      </header>      <p>        Сегодня я закончил последнюю главу спецификации.        Теперь я точно знаю весь JavaScript!      </p>    </section>  </body></html>
          <!DOCTYPE HTML>
<html lang="ru">
  <head>
    <title>Блог великого программиста Васи</title>
  </head>
  <body>
    <h1>Блог Васи</h1>
    <section>
      <header>
        <nav>
          <a href="?t=-1d">Вчера</a>;
          <a href="?t=-7d">Прошлая неделя</a>;
          <a href="?t=-1m">Прошлый месяц</a>
        </nav>
        <h2>Я прочитал всю спецификацию EcmaScript!</h2>
      </header>
      <p>
        Сегодня я закончил последнюю главу спецификации.
        Теперь я точно знаю весь JavaScript!
      </p>
    </section>
  </body>
</html>

Поисковый робот увидит раскладку страницы так:

        
          
          1. Блог Васи1. Я прочитал всю спецификацию EcmaScript!
          1. Блог Васи
1. Я прочитал всю спецификацию EcmaScript!

Верхний уровень — «Блог Васи», следующий по вложенности — «Я прочитал всю спецификацию EcmaScript!».

💡 Как структурируется содержимое страницы удобно проверять в валидаторе HTML от W3C.

💡 Семантический вес для скринридеров тег <header> имеет только в случае, если он напрямую вложен в тег <body>. То есть когда выступает в роли обычной «шапки» страницы. В этом случае у <header> будет ARIA-роль banner. Благодаря этой роли пользователи скринридеров могут быстро перемещаться к этой области с помощью специальных клавиш. Во всех остальных случаях <header> не будет иметь семантического значения для скринридеров.

На практике

Скопировано

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

Скопировано

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

Кратко

Пример

Как понять

Как пишется

Атрибуты

Подсказки

На практике

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

Читайте также

<main>

Селектор по тегу

<head>

`<main>`

`<head>`