Код #Статьи

25 августа, 2025

Тег header в HTML: что это, для чего нужен и как его применять / Skillbox Media

Не путать с head! Знакомимся с тегом и учимся верстать шапку сайта.

Содержание:

Курс с трудоустройством: «Профессия Фронтенд-разработчик»

Узнать больше

Верхняя часть многих сайтов состоит из логотипа, меню, строки поиска и других подобных элементов. Обычно эти элементы собраны в один блок, который называется шапкой сайта. Чтобы сделать шапку сайта нужен HTML-тег

.

Тег

появился в HTML5 — это современная версия языка гипертекстовой разметки. До этого шапку сайта верстали с помощью тега

. Сейчас такая практика устарела, и из статьи вы узнаете почему. Мы познакомимся с хедером и сверстаем две шапки сайта для закрепления теории. Исходники для вёрстки сможете найти ниже. Можете их скачать и попрактиковаться с нами.

Содержание

  • Пример реализации
  • Предназначение тега
  • Атрибуты
  • Как сделать шапку сайта
  • Первый кейс: шапка сайта с логотипом и меню
  • Второй кейс: шапка сайта с меню, фоновым изображением и текстом

Пример реализации

Шапку сайта можно оформить по-разному. Её вид будет зависеть от элементов, которые разработчик добавит внутрь парного тега

. Какие конкретно это будут элементы — зависит от индивидуальных предпочтений разработчика.

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

Пример шапки сайта с логотипом и меню:

Тег

не нужно путать с созвучным тегом . Тег

создаёт шапку сайта и находится внутри тега . Тег отвечает за видимую часть страницы — то есть содержит весь HTML-код, который отобразит браузер.

Тег стоит перед . Он содержит служебную информацию, которая помогает отображать страницу в браузере. Пользователи такой код не видят.

Пример страницы с тегами и

:

Обычно тег

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

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

и сделать шапкой страницы.

На странице может находиться множество хедеров. Однако для сохранения структуры документа их не стоит вкладывать в

,

и другой тег

. Иначе страница может непредсказуемо отображаться в браузерах.

Пример страницы с шапкой сайта и шапкой каталога:

Заменим каталог товаров на блог. У каждой записи будет заголовок, подзаголовок и содержимое. Заголовок и подзаголовок можно объединить в теге

и использовать как шапку для части страницы — то есть для всех записей в блоге.

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

Схема использования тега
для всего сайта и для части страницыИзображение: Майя Мальгина для Skillbox Media

Предназначение тега

HTML-теги делятся на блочные и строчные. Тег

относится к блочным тегам и появился в HTML5. Ранее шапку верстали с помощью блочного тега

.

Если взять любой HTML-документ и заменить

на

, то с вёрсткой ничего не случится. Сайт будет корректно отображаться во всех браузерах. Дело в том, что

и

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

В современной вёрстке

не заменяют на

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

Семантика превратила

в

. Появились и другие семантические теги, которые ранее были обёрнуты в

. Например, с помощью тега

Схема слева — HTML4: чтобы не запутаться в
, разработчикам приходилось добавлять id или class. Схема справа — HTML5: по названию тегов понятно, какую часть сайта они представляютИзображение: Майя Мальгина для Skillbox Media

Атрибуты

Для тега

нет специальных атрибутов, но к нему можно применить глобальные атрибуты — общие для всех HTML-элементов. Например, с помощью глобального атрибута «title» можно любому тегу добавить всплывающую подсказку.

Из всех глобальных атрибутов к тегу

чаще всего применяют атрибут «class». В нём пишут имя, по которому можно обратиться к тегу в таблице стилей.

Добавим на страницу три шапки для записей в блоге. Присвоим каждой класс с именем и через таблицу стилей изменим цвет фона. Сделаем фон первой шапки красным, фон второй — жёлтым, а фон третьей — зелёным.

Тегам можно присваивать любые имена классов — HTML-спецификация позволяет. Однако есть рекомендация: давать имена классам по названию семантических элементов. Если элемент

, то и класс желательно называть «header». Есть даже сайты со списками слов, которыми часто называют классы. Например, Common words.

Общепринятые названия имён классов делают код понятным и единообразным. Для наглядности зададим классу произвольное имя, например «top-of-page-content». Альтернатива: «header». Понятное имя, которое не нужно расшифровывать.

Пример часто используемых имён классов для названий блоков страницыСкриншот: GitHub / Skillbox Media

При совместной разработке не всегда получается давать классам общепринятые имена. Нужны специфические названия, которые предотвращают конфликт имён между частями проекта. Для этого созданы разные методологии, например БЭМ от компании «Яндекс». Вёрстка по БЭМ предполагает добавление имён ко всем тегам. Если на странице несколько тегов

, то каждому необходим class.

Имена классов должны соответствовать набору правил, которые сейчас мы рассматривать не будем. Подробно про БЭМ у нас есть отдельная статья. Однако суть подхода в том, чтобы раздробить код на самодостаточные блоки с понятными названиями. В следующем разделе мы попрактикуемся и углубимся в объяснение.

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

Методология БЭМ: что это такое и как она упрощает жизнь разработчикам

Схема разметки шапки сайта по БЭМИзображение: «БЭМ» / «Яндекс»

Как сделать шапку сайта

Вы уже знаете, что каждый разработчик на своё усмотрение выбирает элементы для шапки сайта. На процесс вёрстки это не влияет. Однако могут появиться вложенные блоки, которые вместе с БЭМ-неймингом иногда путают новичков.

Мы сверстаем две шапки сайта и разберёмся, какой блок зачем нужен. В первой шапке будет логотип и меню. Во второй — меню и фоновое изображение с коротким текстом. Если захотите попрактиковаться — можете скачать исходники или на своё усмотрение подобрать макет. Для подбора рекомендует freepik.com.

В этом разделе: план вёрстки, схема и код с комментариями.

План вёрстки:

  • Создаём тег
    . В нём будет находиться всё содержимое нашей шапки.
  • В тег
    вкладываем тег

    с классом «container». Этот блок нужен для ограничения ширины контента на странице — чтобы на широкоформатных мониторах сайт не растягивался. Контейнер относится к переиспользуемым блокам, которые применяют к разным разделам страницы. Поэтому он отвечает только за два свойства: за ширину и центрирование контента.
  • В контейнер вкладываем внутреннюю обёртку. В коде это будет тег
    с классом «header__inner». Запись через нижнее подчёркивание — это нейминг по БЭМ. Так мы указываем, что обёртка является элементом блока

    . К внутренней обёртке мы применим технологию Flexbox и сможем управлять расположением вложенных элементов.
  • Помещаем логотип и меню во внутреннюю обёртку. В нашем кейсе это самодостаточные блоки, которые можно переиспользовать на странице.
Схема вёрстки шапки сайта с логотипом и менюИзображение: Майя Мальгина для Skillbox Media
Шапка сайта с логотипом и меню после добавления HTML-разметки Скриншот: Skillbox Media
Шапка сайта с логотипом и меню после добавления CSS-стилей Изображение: pikisuperstar / Freepik / Skillbox Media

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

Начнём с плана:

  • Создаём
    .
  • Делим
    на две зоны: верхнюю с меню и нижнюю с контентом. Верхнюю зону называем ««, а нижнюю — ««.
  • Верстаем ««.
  • Создаём контейнер.
  • В контейнере создаём внутреннюю обёртку — тег
    с классом «header__top-inner». В макете с одним меню эта обёртка нам не понадобится. Однако если вы заходите добавить в верхнюю зону логотип или другой элемент, то к этой обёртке можно будет применить Flexbox.
  • Добавляем во внутреннюю обёртку меню.
  • Верстаем ««.
  • Создаём контейнер.
  • В контейнере создаём внутреннюю обёртку. В коде это
    с классом «header__content-inner». К обёртке мы применим технологию Flexbox.
  • Вкладываем во внутреннюю обёртку заголовок и иконку.
Схема вёрстки шапки сайта с меню, фоновым изображением и текстом Изображение: Майя Мальгина для Skillbox Media
Шапка сайта с меню, фоновым изображением и текстом после добавления HTML-разметкиСкриншот: Skillbox Media
Шапка сайта с меню, фоновым изображением и текстом после добавления CSS-стилейИзображение: artroomstudio / Freepik / Skillbox Media

Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!

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

  • Язык HTML: что это такое и как он работает
  • Как правильно верстать HTML-таблицы
  • Учимся верстать: что такое CSS
  • HTML, CSS и веб-стандарты: возможности, ошибки разработчиков и неизвестные фичи
  • Как адаптировать сайт под разные разрешения

Профессия Фронтенд-разработчик

Узнать подробнее