Шапка страницы

Шапка — первое, что видит посетитель, и место, куда он возвращается взглядом, когда ищет навигацию. По ней он понимает, на каком сайте оказался и чем компания занимается, а также находит главное действие: телефон, корзину, кнопку записи. Логотип в шапке по сложившемуся соглашению ведёт на главную страницу.

Элемент <header> появился в HTML5 вместе с другими тегами семантической разметки. На странице их может быть несколько: у статьи или карточки бывает собственный заголовочный блок. Но ориентиром «баннер», по которому экранный диктор перескакивает к шапке сайта, становится только тот header, что не вложен в article, section, main и подобные элементы.

Пример разметки и закреплённой шапки

<header class="site-header">
  <a href="/" class="logo"><img src="/logo.svg" alt="Компания-пример"></a>
  <nav aria-label="Основное меню">…</nav>
  <a href="tel:+70000000000" class="phone">+7 000 000-00-00</a>
</header>

.site-header { position: sticky; top: 0; z-index: 10; background: #fff; }
html { scroll-padding-top: 72px; }

position: sticky оставляет шапку на месте при прокрутке, не вырывая её из потока, как это делает fixed. Строка с scroll-padding-top решает частую проблему: при переходе по якорю заголовок раздела иначе прячется под закреплённой шапкой.

Что мешает пользоваться шапкой

• Шапка на пол-экрана телефона. Закреплённая шапка с логотипом, двумя телефонами и баннером отнимает место у содержимого. На мобильных её делают компактной или прячут при прокрутке вниз.
• Скачок при загрузке. Если высота шапки меняется, когда подгружаются шрифт, логотип без размеров или уведомление о cookie, вся страница сдвигается вниз — это ухудшает показатель CLS.
• Меню только по наведению. Выпадающие пункты должны открываться и тапом, и с клавиатуры.
• Телефон картинкой. Номер должен быть текстом и ссылкой tel:, чтобы по нему можно было позвонить в одно касание.

Где лежит шапка в CMS

В классических темах WordPress шапка находится в файле header.php и подключается в шаблонах функцией get_header(); в блочных темах это часть шаблона parts/header.html, которую правят в редакторе сайта. В 1С-Битрикс начало страницы вместе с шапкой описано в header.php шаблона сайта, обычно в папке /local/templates/. Если шапку нужно перевёрстать под макет, это типичная задача вёрстки сайта.