Тег <header>: шапка страницы и материала
Как использовать header на уровне сайта и внутри отдельной статьи.
Зачем нужен этот элемент
header содержит вводную часть ближайшего раздела: название, логотип, навигацию или метаданные. Это не команда закрепить блок сверху. Положение, фон и размеры шапки по-прежнему задаются CSS.
У сайта может быть общая шапка и отдельные header внутри публикаций. Не путайте header с head: первый виден в теле документа, второй хранит метаданные и подключения. Для простого заголовка без дополнительной группы отдельная обёртка header необязательна.
Синтаксис и пример
<article>
<header>
<h1>Основы веб-разработки</h1>
<p>Короткий маршрут для начинающих.</p>
</header>
<p>Начнём со структуры документа.</p>
</article>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| Внутри body | Может выступать общей шапкой сайта. |
| Внутри article | Относится к конкретной публикации. |
| Положение | Тег не включает фиксирование или sticky автоматически. |
Частая ошибка
Не вставляйте один header внутрь другого. Выберите нужный уровень группы и оставьте структуру простой.
Небольшая практика
Добавьте дату и краткое описание под заголовком статьи внутри header. Сравните смысл этой группы с общей шапкой сайта.
Разберите также <article>, <h1>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.