BITSPARK / Статьи / Дизайн и элементы сайта

Шапка сайта: что это и что в ней размещают

Коротко: шапка сайта - верхний блок, который повторяется на страницах сайта. По-английски это header, в разметке HTML ему соответствует элемент header верхнего уровня. На страницах MDN из списка источников и в стандарте HTML слова шапка нет, сопоставление сделано в статье через слова MDN global site header. Источники называют, что может стоять в шапке: логотип, название компании, поиск, глобальную навигацию, слоган. Ни одна из этих страниц не требует определённого состава, его решают заказчик и подрядчик. Фиксированная и липкая шапка - названия автора для значений fixed и sticky свойства position. Критерий 2.4.11 из WCAG 2.2 не допускает, чтобы элемент в фокусе клавиатуры был скрыт целиком, в том числе липкой шапкой.

Статья для владельца бизнеса или маркетолога, который заказывает сайт или переделывает существующий и слышит от дизайнера или подрядчика слова шапка, хедер, липкая шапка. Она разбирает страницы MDN, стандарта HTML, web.dev, W3C и Robokassa в редакциях на 10.10.2026 (список в конце статьи). Часть страниц английская: после каждой английской цитаты стоит перевод автора статьи, он не заменяет оригинал. Пример вымышленный: мастерская по ремонту велосипедов с сайтом example.ru.

Что такое шапка сайта и как она называется?

Коротко: шапка - верхний блок страниц сайта. Хедер - русская запись английского header. В разметке HTML этому блоку соответствует элемент header, не вложенный в раздел или статью. Равенство шапка = хедер = header верхнего уровня - сопоставление автора статьи: на страницах MDN из списка источников и в стандарте HTML слов шапка и хедер нет.

Слова шапка нет на русской странице MDN об элементе header, на странице MDN об устройстве документа, в стандарте HTML и на web.dev. Русская страница MDN называет элемент header словом заголовок. Английские страницы MDN называют верхний блок сайта global site header. Так страница о роли banner определяет эту роль:

"The banner role is for defining a global site header, which usually includes a logo, company name, search feature, and possibly the global navigation or a slogan. It is generally located at the top of the page."

Перевод автора статьи: роль banner нужна, чтобы обозначить глобальную шапку сайта (global site header), в которую обычно входят логотип, название компании, поиск и, возможно, глобальная навигация или слоган. Как правило, она расположена в верхней части страницы.

Ниже на той же странице MDN сказано, как этот блок называют внутри компании:

"The banner typically includes things such as a logo or corporate identity, or possibly a site-specific search tool, and is generally what your marketing team would call the "header" or "top banner" of the site."

Перевод автора статьи: banner обычно включает такие вещи, как логотип или фирменный знак и, возможно, поиск по сайту, и в целом это то, что ваша маркетинговая команда назвала бы "header" или "top banner" сайта.

Сопоставление автора статьи: то, что маркетинговая команда называет header или top banner, в русской речи называют шапкой или хедером. Слово хедер - русская запись английского header, в источниках его нет.

Слово заголовок в макете или смете может значить разное. На русской странице MDN об устройстве документа верхняя часть страницы названа «Заголовок (колонтитул)», и в ней, как сказано на странице, находится информация, одинаковая для всех страниц:

«Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.»

Заголовок H1 страницы - другой элемент: в примере MDN «Заголовок страницы» заголовок первого уровня и логотип лежат внутри header. Название страницы в теге title - третья вещь: в коде примера на странице MDN об устройстве документа title стоит внутри head, а header - внутри body. Та же страница просит не путать шапку с заголовками: «(постарайтесь не путать его с titles и headings)». Если в задании написано заголовок, переспросите, о чём речь: о шапке, о H1 или о названии страницы.

Чем шапка сайта отличается от шапки раздела или статьи?

Коротко: MDN приравнивает к роли banner, то есть к шапке всего сайта, элемент header, который не вложен в раздел, main или статью. Вложенный header - вводная группа своего раздела или статьи, он теряет статус landmark (ориентира). Различие описано в разделе Usage notes английской страницы MDN и на web.dev.

Одно слово header в HTML стоит и у шапки сайта, и у шапки статьи. Английская страница MDN об элементе header различает случаи в разделе Usage notes. Русская страница - перевод сообщества, изменена 15.04.2025, раздела с таким различием в ней нет (есть раздел «Примечание» с другим содержанием), английская изменена 24.04.2026.

"When not nested within sectioning content, <main>, or an element with the same ARIA role as these elements' implicit ARIA role, then the <header> element has an identical meaning to the site-wide banner landmark role."

Перевод автора статьи: если header не вложен в секционный контент, в main или в элемент с той же ARIA-ролью, что и неявная ARIA-роль этих элементов, то он означает то же, что роль banner (landmark) для всего сайта.

"Otherwise, when nested within said elements, it loses its landmark status and represents a group of introductory or navigational aids for the surrounding section."

Перевод автора статьи: в остальных случаях, когда header вложен в перечисленные элементы, он теряет статус landmark и представляет группу вводных или навигационных средств для окружающего раздела.

Landmark (по-русски ориентир, перевод автора статьи) - слово MDN и web.dev для блока страницы с собственной ролью. Такую роль распознают вспомогательные технологии, например программы чтения с экрана. Так же различает два случая web.dev:

"When the <header> is top level, it is the site banner, a landmark role (...). When a <header> is nested in <main>, <article>, or <section>, it just identifies it as the header for that section and isn't a landmark."

Перевод автора статьи: когда header стоит на верхнем уровне, это баннер сайта, роль landmark (...). Когда header вложен в main, article или section, он лишь обозначает шапку этого раздела и не считается landmark.

На example.ru у страницы статьи в блоге две шапки: верхняя шапка сайта и вторая внутри самой статьи. Шапку статьи с заголовком, датой публикации и именем автора показывает раздел Examples на английской странице MDN об элементе header.

Где стоит headerЧто сказано в источникахИсточник
На верхнем уровне страницы, не внутри секции, main или статьиглобальная шапка сайта (global site header), роль banner, landmarkMDN, Usage notes; web.dev
Внутри статьи, раздела или mainшапка этого раздела; роль landmark теряетсяMDN, Usage notes; web.dev
Внутри address, footer или другого headerрусская страница MDN: «не должен быть потомком» этих элементовMDN, страница об элементе header (русская)

О числе шапок сайта на одной странице пишет страница MDN о роли banner:

"Each page may have a banner landmark, but each page should generally be limited to a single element with the role of banner."

Перевод автора статьи: на каждой странице может быть landmark banner, но, как правило, каждой странице стоит ограничиваться одним элементом с ролью banner.

Что в шапке размещают по описанию MDN и стандарта HTML?

Коротко: MDN называет в шапке сайта логотип, название компании, поиск, глобальную навигацию и слоган, стандарт HTML - заголовок, оглавление раздела, форму поиска и логотипы. Определённого состава ни одна страница не требует: у MDN стоят слова "usually includes" (обычно включает; перевод автора статьи) и "possibly" (возможно), у стандарта - "not required" (не требуется).

Таблица составлена по пяти страницам, в каждой строке названо, где это сказано. В скобках после английских слов стоит перевод автора статьи.

СтраницаЧто названо внутри шапкиКак сформулирован состав
MDN, роль banner и Usage notes (английская)логотип, название компании, поиск, глобальная навигация, слоган"usually includes" (обычно включает), "possibly" (возможно)
MDN, элемент header (русская)другие элементы-заголовки, логотип, форма поиска, имя автора и другие элементы«Он может содержать»
Стандарт HTML, раздел 4.3.8 The header elementзаголовок (h1-h6 или hgroup), оглавление раздела, форма поиска, логотипы"usually contain" (обычно содержит), "not required" (не требуется)
MDN, устройство документа (русская)крупный заголовок и / или логотип, общая информация о сайте«Обычно это большая полоса вверху страницы»

Стандарт HTML определяет элемент одной фразой, а следом оговаривает, что заголовок в нём не требуется:

"The header element represents a group of introductory or navigational aids."

Перевод автора статьи: элемент header представляет группу вводных или навигационных средств.

"A header element is intended to usually contain a heading (...), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos."

Перевод автора статьи: header задуман так, что в нём обычно стоит заголовок (...), но это не требуется. Header можно использовать и для оглавления раздела, формы поиска или любых подходящих логотипов.

Вывод автора статьи: перечня, который нужно выполнить, в этих описаниях нет, состав шапки решают заказчик и подрядчик. Пример решения для мастерской example.ru: в задание записана шапка из пяти пунктов - логотип, название мастерской, меню из трёх разделов, телефон для связи и слоган. Ни одна из страниц в таблице такой набор не называет, это пример решения заказчика.

Слово шапка есть на странице Robokassa с требованиями к подключаемым сайтам. В разделе «Актуальные контакты» сказано:

«Контакты можно разместить в шапке, подвале сайта или на отдельной странице.»

Это условие одного платёжного сервиса к подключаемым сайтам. Остальные требования сервисов разобраны в статье Как подключить оплату на сайт: что просят ЮKassa и Robokassa. Сведения о владельце сайта по 149-ФЗ и место для них разобраны в статье Подвал сайта: что это и какие сведения о владельце называет закон, там же приведено описание подвала в стандарте HTML.

Входит ли меню в шапку?

Коротко: в примерах стандарта HTML и MDN меню стоит внутри шапки, а в описании глобальной шапки MDN называет глобальную навигацию возможной частью. Страница MDN об устройстве документа приводит мнение веб-дизайнеров, которые считают панель навигации частью шапки, и добавляет, что это не требование. Меню может быть частью шапки или отдельным блоком, это решение заказчика.

В примере шапки из стандарта HTML внутри header стоят заголовок h1 и блок nav с тремя ссылками: Games, Forum и Download. В примере MDN о роли banner в шапке лежат ссылка для пропуска, логотип, заголовок, подзаголовок и nav.

Русская страница MDN об устройстве документа описывает навигационное меню отдельным компонентом страницы и сообщает:

«Многие веб-дизайнеры считают панель навигации частью заголовка»

Дальше на той же странице сказано, что такое отнесение не требуется. Виды навигации - глобальную, локальную, хлебные крошки и карту сайта - разбирает статья Структура сайта: что это и что решить заказчику до дизайна. Место хлебных крошек относительно шапки описано в статье Хлебные крошки на сайте: что это и что проверить при приёмке.

Что такое фиксированная и липкая шапка?

Коротко: фиксированная и липкая шапка - названия автора статьи для двух значений свойства CSS position: fixed и sticky. MDN описывает свойство, слова шапка на странице нет. Фиксированный элемент остаётся на месте при прокрутке страницы. Липкий до порога ведёт себя как относительно позиционированный, затем считается фиксированным до границы своего родителя.

Русская страница MDN пишет: «CSS-свойство position указывает, как элемент позиционируется в документе.» Сопоставление автора статьи со значениями свойства такое:

Название шапки (сопоставление автора статьи)Значение positionЧто пишет русская страница MDN
фиксированная шапкаfixed«Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство.» Фиксированное позиционирование страница описывает как способ получить элемент, «который остаётся в том же положении независимо от прокрутки»
липкая шапкаsticky«Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования.»

Для липкого позиционирования страница описывает поведение подробнее:

«Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечёт заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя.»

Пример MDN для липкого позиционирования - заголовки в алфавитном списке: «Типичное использование для липкого позиционирования - для заголовков в алфавитном списке.» Про шапку сайта страница ничего не говорит.

В разделе про производительность страница предупреждает о прокрутке:

«Элементы прокрутки, содержащие fixed или sticky контент, могут вызвать проблемы с производительностью и доступностью.»

Отсюда в задание подрядчику можно записать вопрос: на каких устройствах проверена прокрутка страницы с фиксированной или липкой шапкой. Пункт для приёмки есть в конце статьи.

Что W3C пишет о шапке в критериях WCAG 2.2?

Коротко: WCAG 2.2 - рекомендация W3C. В статье разобраны два критерия, на страницах которых названа шапка. Критерий 2.4.11 (Level AA) не допускает, чтобы элемент в фокусе клавиатуры был скрыт целиком, и называет липкую шапку среди перекрывающих блоков. Критерий 2.4.1 (Level A) требует способа пропустить блоки, повторяющиеся на страницах; содержимое шапки страница называет в числе примеров.

WCAG 2.2 - Web Content Accessibility Guidelines, рекомендации W3C по доступности веб-содержимого (перевод автора статьи). На странице W3C стоит статус W3C Recommendation от 12 декабря 2024 года. Российский закон на этих страницах не разбирается, норм о доступности сайтов в статье нет. Страницы с разбором критериев открыты в редакторской версии на w3c.github.io, на странице техники F110 есть пометка:

"This is an unpublished editor's draft that might include content that is not finalized."

Перевод автора статьи: это неопубликованный черновик редактора, в нём может быть содержимое, которое ещё не окончательно.

Фокус клавиатуры - элемент, до которого пользователь дошёл клавишей Tab: F110 описывает такого пользователя как проходящего по ссылкам и элементам управления. Критерий 2.4.11 уровня AA начинается с одного предложения:

"When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content."

Перевод автора статьи: когда компонент интерфейса получает фокус клавиатуры, он не скрыт целиком содержимым, созданным автором.

Липкую шапку страница называет среди блоков, которые могут перекрыть элемент в фокусе:

"Typical types of content that can overlap focused items are sticky footers, sticky headers, and non-modal dialogs."

Перевод автора статьи: типичные виды содержимого, которое может перекрыть элементы в фокусе, - липкие подвалы, липкие шапки и немодальные диалоги.

Критерий запрещает только полное скрытие. Частичное перекрытие он допускает, и страница говорит об этом прямо, добавляя совет авторам:

"(...) this AA criterion allows for the component receiving focus to be partially obscured by other author-created content."

Перевод автора статьи: (...) этот критерий уровня AA позволяет, чтобы компонент в фокусе был частично закрыт другим содержимым, созданным автором.

"(...) authors should attempt to design interactions to reduce the degree and frequency with which the item receiving focus is partly obscured."

Перевод автора статьи: (...) авторам стоит стараться проектировать взаимодействие так, чтобы уменьшить степень и частоту частичного перекрытия элемента в фокусе.

Страница F110 описывает липкую шапку как пример сбоя, когда она закрывает элемент целиком:

"A web page has a sticky header, an element that stays visible at the top of the viewport as the user scrolls the page. The header is tall enough to completely cover the element in focus as a user tabs up the page."

Перевод автора статьи: на веб-странице есть липкая шапка, элемент, который остаётся видимым вверху области просмотра, пока пользователь прокручивает страницу. Шапка настолько высока, что целиком закрывает элемент в фокусе, когда пользователь клавишей Tab поднимается вверх по странице.

Процедуру проверки страница F110 описывает так:

"Tab through the links and controls on the page. Both progressing down through the page, and back up: Check whether the focused element is completely obscured by other content"

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

Среди достаточных техник критерия 2.4.11 страница называет C43: Using CSS scroll-padding to un-obscure content (перевод автора статьи: использовать CSS scroll-padding, чтобы открыть закрытое содержимое). Про ту же идею пишет MDN на странице о свойстве scroll-padding:

"A common use case for scroll-padding is to prevent scrolling content from being hidden by a fixed-position header."

Перевод автора статьи: распространённый случай использования scroll-padding - не дать прокручиваемому содержимому оказаться скрытым под шапкой с фиксированным положением.

Во втором критерии шапка названа среди повторяющихся блоков. Критерий 2.4.1 уровня A:

"A mechanism is available to bypass blocks of content that are repeated on multiple web pages."

Перевод автора статьи: есть механизм, позволяющий пропустить блоки содержимого, которые повторяются на нескольких веб-страницах.

Что такое повторяющийся блок, страница объясняет в разделе Intent:

"Examples of repeated blocks of content include but are not limited to navigation links, header content, and advertising frames."

Перевод автора статьи: примеры повторяющихся блоков содержимого включают, но не ограничиваются, навигационными ссылками, содержимым шапки (header content) и рекламными фреймами.

Среди достаточных техник страница называет ссылку вверху каждой страницы, которая ведёт сразу к области основного содержимого (G1), и использование ARIA landmarks для обозначения областей страницы (ARIA11); названия техник переведены автором статьи. Страница оговаривает, что есть и другие способы соответствовать критерию. В примере MDN о роли banner первой в шапке стоит ссылка Skip To main content (перевод автора статьи: перейти к основному содержимому). Как именно сайт пропускает шапку, спросите у подрядчика.

Что заказчику решить о шапке на шаге структуры?

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

На главной странице BITSPARK шаг процесса «Структура» описан так: «Собираем архитектуру: сценарии, страницы, контент и логику взаимодействия.» Шаг «Дизайн»: «Формируем характер проекта: типографику, композицию, движение и систему интерфейса.» Вопросы подрядчику о шапке:

  1. Что стоит в шапке? MDN называет логотип, название компании, поиск, глобальную навигацию и слоган, стандарт HTML - заголовок, оглавление, форму поиска и логотипы. Состав решает заказчик.
  2. Одинакова ли шапка на всех страницах? MDN в описании устройства документа относит к шапке общую информацию о сайте, которая не меняется от страницы к странице (цитата в первом разделе).
  3. Меню внутри шапки или отдельным блоком? Страница MDN об устройстве документа описывает меню отдельным компонентом и пишет, что отнесение его к шапке не требуется.
  4. Где контакты: в шапке, в подвале или на отдельной странице? Если сайт подключают к Robokassa, сервис допускает все три места.
  5. Шапка прокручивается вместе со страницей, фиксированная или липкая? Это значения fixed и sticky свойства position.
  6. Что произойдёт с началом раздела, когда посетитель нажмёт на ссылку меню, ведущую вниз по странице? MDN показывает такой случай на странице о scroll-padding.
  7. Как пользователь клавиатуры пропускает шапку? Критерий 2.4.1 называет содержимое шапки среди повторяющихся блоков.
  8. Нужна ли у статей и разделов собственная шапка? MDN и web.dev называют шапку статьи или раздела вложенным header.

Что проверить при приёмке шапки на компьютере и телефоне?

Коротко: основания пунктов - страницы MDN, W3C, Robokassa и главная страница BITSPARK; у каждого пункта названа страница. Для мастерской example.ru это семь действий: сравнить шапки на разных страницах, пройти страницу клавишей Tab вниз и вверх, нажать на ссылки меню, проверить прокрутку, найти ссылку пропуска, найти контакты и посмотреть сайт на телефоне.

Допустим, мастерская принимает сайт example.ru:

  1. Откройте главную и две-три внутренние страницы и сравните шапки. Основание - описание шапки в MDN: общая информация о сайте, не меняющаяся от страницы к странице. Если заказчик решил иначе для какого-то раздела, это записано в задании.
  2. Пройдите страницу клавишей Tab сначала вниз, затем вверх. Это процедура из описания сбоя F110 (W3C). Если шапка липкая, смотрите, не закрывает ли она элемент в фокусе целиком.
  3. Нажмите на ссылки меню, которые ведут к разделам той же страницы. MDN на странице о scroll-padding показывает шапку со ссылками на три раздела: шапка закреплена вверху и имеет высоту 60 пикселей, а отступ при прокрутке оставляет место под ней. Посмотрите, видно ли начало раздела.
  4. Прокрутите страницу на телефоне и на компьютере и спросите подрядчика, на каких устройствах проверена прокрутка с фиксированной или липкой шапкой. Основание - предупреждение MDN о fixed и sticky контенте.
  5. Нажимайте Tab с начала страницы и посмотрите, есть ли ссылка пропуска. В примере MDN это ссылка Skip To main content (перевод автора статьи: перейти к основному содержимому). Если ссылки нет, спросите, чем сайт даёт пропустить шапку: страница критерия 2.4.1 называет несколько способов и допускает другие.
  6. Найдите контакты, которые вы записали в задание, в том месте, которое выбрали: шапка, подвал или отдельная страница. Три места называет страница Robokassa, процитированная выше.
  7. Откройте сайт на телефоне. На главной странице BITSPARK шаг процесса «Запуск» описан так: «Проверяем desktop и mobile, скорость, формы и ключевые сценарии - затем запускаем.» Как сайт ведёт себя на разных экранах, разбирает статья Адаптивный сайт: что это и как проверить адаптив до приёмки.

Источники

Дата обращения к страницам: 10.10.2026. Страницы W3C с разбором критериев и техник открыты в редакторской версии на w3c.github.io.

Обсудить проект в Telegram: t.me/billioniks

Читайте по теме

Все статьи раздела «Дизайн и элементы сайта» →