Интервью-вопрос
Что такое тег header
<header> это семантическая область для вводного контента страницы или раздела. Важно не путать его с обычным div, заголовком h1 и навигацией nav.
- Добавлен
- Редакция
Подготовьте короткий ответ и пару деталей на случай уточняющих вопросов.
Мини-квиз
Проверка перед разбором
Несколько быстрых вопросов перед разбором. Так проще поймать места, которые только кажутся понятными.
Вопрос 1 из 60 правильно
Разбор
Разобраться, а не зазубрить
Дальше разбираем суть, типичные уточнения и места, где легко сказать лишнее или перепутать термины.
Базовая идея
<header> нужен, чтобы показать браузеру, разработчикам и вспомогательным технологиям вводную часть конкретной области. Такой областью может быть вся страница, статья, карточка новости, раздел документации или другой самостоятельный блок.
Не привязывайте тег только к визуальному расположению. Если элемент находится сверху, это еще не значит, что ему нужен <header>. И наоборот, вводная часть карточки может быть не в самом верху экрана из-за адаптивной верстки. По смыслу она все равно остается header.
На интервью короткий сильный ответ звучит так: <header> описывает вступительный контент страницы или раздела, а не просто рисует шапку. Его ценность в семантике и предсказуемой структуре HTML.
Что можно размещать внутри
Внутри <header> обычно находятся элементы, которые помогают понять, куда попал пользователь и что начинается дальше.
Типичные элементы:
- логотип или название сайта;
- основной заголовок страницы или раздела;
- краткое описание;
- автор, дата публикации, метаданные статьи;
- форма поиска;
<nav>, если это навигация, связанная с этой областью.
Это не список обязательных элементов. Например, <header> может содержать только заголовок статьи и дату. А может вообще не подходить, если блок является основным контентом, рекламной карточкой или просто контейнером для сетки.
Как выбрать правильный тег
На интервью ошибка часто начинается с фразы: "это тег для верхней части сайта". Такая формулировка слишком узкая. Лучше выбирайте тег по роли блока.
Как принять решение
Используйте <header>, если блок представляет название, описание, автора, дату, логотип или стартовую навигацию.Используйте <main>, <article> или <section>. <header> оставьте только для вводной части этих областей.Используйте <nav>. Если меню находится в шапке, <nav> может быть внутри <header>.Оставьте <div>. Семантический тег должен описывать смысл блока, а не заменять CSS-класс.Практический пример
В обычной странице <header> может описывать шапку сайта. Внутри статьи может быть второй <header> для вступительной части самой статьи.
<body>
<header>
<a href="/" aria-label="На главную">Gernar</a>
<nav aria-label="Основная навигация">
<ul>
<li><a href="/docs">Документация</a></li>
<li><a href="/interview">Вопросы</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Что такое тег header</h1>
<p>Короткое объяснение семантики HTML.</p>
</header>
<p>Основной текст начинается здесь.</p>
</article>
</main>
</body>Здесь первый <header> относится ко всей странице. Второй относится только к <article>. Это не дублирование, потому что у каждого элемента своя смысловая область.
Плохой пример: использовать <header> просто как замену всем контейнерам.
<header class="page">
<header class="hero">...</header>
<header class="cards">...</header>
<header class="footer-top">...</header>
</header>Так делать не стоит. Вложенные header и header для карточек без вводной роли создают шумную семантику. Разработчику и пользователю скринридера сложнее понять, где реальная шапка страницы, а где просто сетка. Для layout-контейнеров используйте <div>, а смысловые области размечайте отдельными тегами.
Если это React-компонент
Имя компонента не меняет семантику DOM. <Header /> может отрендерить обычный <div>. Тогда пользователь скринридера не получит область header или banner.
В дизайн-системе лучше явно выбрать HTML-элемент. Если компонент отвечает за вводную часть страницы, пусть рендерит <header>. Если это только layout-обертка для отступов, безопаснее оставить <div>. Так вы не создадите ложные landmarks и не ухудшите навигацию по странице.
Доступность и SEO без преувеличений
<header> помогает сделать документ понятнее, но не является кнопкой "сделать доступно". Верхний header страницы может восприниматься как область banner. Header внутри статьи или секции обычно просто уточняет структуру этого блока.
Для доступности важно не только наличие <header>. Нужны понятные заголовки <h1>-<h6>, логичный порядок фокуса, нормальные тексты ссылок, корректная навигация через <nav> и, где нужно, aria-label.
С SEO похожая история. Семантический HTML помогает поисковым системам читать страницу, но сам тег не гарантирует рост позиций. Если вы скажете это на интервью, ответ будет выглядеть аккуратнее, чем обещание прямого SEO-бонуса.
Что сказать на практике
Хорошая формулировка для интервью:
<header>это семантический контейнер для вводной части страницы или раздела. В нем могут быть заголовок, логотип, метаданные, поиск или навигация. Я использую его, когда блок действительно вводит пользователя в содержимое, а не просто как div для верхнего отступа или фона.
Если хотите усилить ответ, добавьте:
На странице может быть несколько header, например общий header сайта и header внутри article. Но
<header>не заменяет heading-элементы и не должен использоваться для любого визуального блока.
Такой ответ показывает не только знание определения. Он показывает, что вы умеете верстать поддерживаемый HTML без лишней семантики.
Частые ошибки
Где обычно ошибаются
Проверьте формулировки, которые звучат уверенно, но на интервью быстро выдают пробелы.
- 1
Считать <header> только визуальной шапкой
Так вы теряете главный смысл тега.<header>описывает вводную область, а не место на экране. Если шапка закреплена внизу или находится внутри карточки статьи, решение все равно нужно принимать по смыслу, а не по CSS. - 2
Класть в <header> весь первый экран
Hero-блок, форма, карточки преимуществ и основной контент не всегда являются вводной частью документа. Если поместить туда слишком много, структура станет шумной. Ее будет сложнее читать разработчикам и вспомогательным технологиям. Лучше отделять<header>,<main>,<section>и обычные контейнеры. - 3
Заменять заголовки тегом <header>
<header>не задает уровень заголовка. Если внутри нет<h1>,<h2>или другого heading, навигация по заголовкам может стать хуже. Безопаснее использовать<header>как оболочку, а смысловой заголовок оставить отдельным элементом. - 4
Называть любой React-компонент Header семантическим
Имя компонента не влияет на итоговый DOM. Если<Header />рендерит<div>, пользователь скринридера не получит ожидаемую область header или banner. В UI-ките лучше явно выбрать элемент:<header>для вводной области,<div>для layout-обертки. - 5
Обещать SEO-эффект без условий
Семантическая разметка помогает поисковым системам лучше понять документ, но сама по себе не гарантирует рост позиций. Сильнее звучит ответ, где вы говорите про понятную структуру, корректные заголовки, доступность и отсутствие лишних оберток. - 6
Делать вложенные header без смысла
<header>не стоит вкладывать в другой<header>или использовать внутри<footer>. Это выглядит как стилизация через семантику и может запутать структуру. Для вложенной сетки используйте<div>, а смысловые области называйте точнее.
Follow-up
Что могут спросить дальше
Короткие ответы на вопросы, которые проверяют понимание семантики HTML и доступности.
Живые ответы
Видео с похожим вопросом
Если найдем публичные интервью с таким вопросом, добавим их сюда. Их удобно смотреть после теории, чтобы свериться с живыми ответами.
Пока видео нет. Когда появятся подходящие публичные интервью, добавим их в этот блок, чтобы можно было сравнить разбор с тем, как отвечают реальные кандидаты.
Что такое семантические теги 😎
Семантические теги описывают смысл и роль частей страницы, а не только внешний вид. Разбираем, как ответить на интервью, когда выбирать header, main, nav, article, section и где div остается нормальным решением.
Что такое Accessibility 😎
Accessibility означает, что интерфейсом могут пользоваться люди с разными возможностями, устройствами и ограничениями. Разбираем, как ответить на интервью про семантику, клавиатуру, ARIA, WCAG и практические проверки во фронтенде.