Тег <header>

Описание

Тег <header> представляет вводную или навигационную секцию страницы. Может содержать заголовки, логотип, поисковую форму и другие вводные элементы.

Шапка сайта:
<header> <div> <a href="/"><img src="logo.svg" alt="Логотип компании"></a> </div> <nav> <ul> <li><a href="/products">Продукты</a></li> <li><a href="/services">Услуги</a></li> </ul> </nav> <div> <input type="search" placeholder="Поиск..."> </div> </header>
Заголовок статьи:
<article> <header> <h1>Современные тенденции веб-дизайна</h1> <div> <span>Автор: Иван Иванов</span> <time datetime="2023-06-15">15 июня 2023</time> </div> </header> <!-- Содержимое статьи --> </article>

Ключевые особенности:

  • Может использоваться несколько раз на странице (для всего документа и отдельных секций)
  • Обычно содержит заголовки (h1-h6), логотип, навигацию
  • Не имеет стандартного оформления (стилизуется через CSS)
  • Улучшает семантическую структуру документа
  • Важен для доступности и SEO

Рекомендации по использованию:

  • Используйте для основной шапки сайта и заголовков крупных разделов
  • Добавляйте ARIA-роли для улучшения доступности (role="banner")
  • Для главного хедера страницы используйте в корне документа
  • Сочетайте с другими семантическими тегами (nav, section)
  • Избегайте помещения footer внутрь header

Тег <header> является важным структурным элементом современной веб-разметки, улучшающим организацию контента.

Атрибуты

accesskey Горячая клавиша для активации элемента
class CSS-классы для стилизации элемента
contenteditable Разрешает редактирование содержимого
data-* Пользовательские данные элемента
dir Направление текста (ltr|rtl)
hidden Скрывает элемент
id Уникальный идентификатор элемента
lang Язык содержимого элемента
spellcheck Включает проверку орфографии
style Инлайновые CSS-стили элемента
tabindex Порядок перехода при навигации по Tab
title Всплывающая подсказка для элемента
translate Определяет возможность перевода содержимого

Поддержка браузерами
9.0 8.0 9.2 4.0 5.0