HTML-тег <header>

Характеристики

• Тип: блочный, статичный, семантический
• Назначение: Представляет вводную часть или навигацию для ближайшего родительского элемента секционирования, такого как <article>, <section>, или для всего документа.
• Родители: Любые HTML-теги, которые могут содержать блочные элементы.
• Потомки: Заголовки, логотипы, навигационные элементы и другие вводные контенты.
• Глобальные атрибуты: все
• Атрибуты событий: все

Пример использования

<header>
  <h1>Название сайта</h1>
  <nav>
    <!-- Навигационные ссылки -->
  </nav>
</header>

Использование в JavaScript

// Получение элемента <header>
const headerElement = document.querySelector('header');

// Добавление класса
headerElement.classList.add('site-header');

// Изменение стиля
headerElement.style.backgroundColor = '#f8f8f8';

Рекомендации по обеспечению доступности (a11y)

• Используйте <header> для обозначения вводной части секции или страницы.
• Не вкладывайте <header> в другой <header>.
• Неправильное использование <header> может нарушить семантическую структуру документа.

Полезные ссылки