Атрибут id тега <header>

Описание

Атрибут id задаёт уникальный идентификатор для тега <header>, позволяя обращаться к нему из CSS и JavaScript. ID должен быть уникальным в пределах всей страницы.

Пример использования:
<header id="main-header"> <h1>Заголовок сайта</h1> <nav>...</nav> </header>

Особенности именования:

Правило Допустимо Недопустимо
Начинается с буквы header-main 1-header
Без пробелов page_header page header
Регистрозависимость MainHeader ≠ mainheader -

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

<style> #main-header { background: #2c3e50; color: white; padding: 1rem; } </style> <header id="main-header"> <h1>Мой сайт</h1> </header> <script> const header = document.getElementById('main-header'); header.style.fontSize = '2rem'; </script>

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

  • Используйте для:
    • Якорных ссылок (#main-header)
    • Точечной стилизации в CSS
    • Быстрого доступа в JavaScript
  • Избегайте:
    • Дублирования ID на странице
    • Избыточного использования (лучше классы)
    • Слишком общих имен (id="header")
  • Для повторяющихся элементов используйте классы

Сравнение с class:

Характеристика ID Class
Уникальность Один на странице Много элементов
Специфичность CSS Высокая (0100) Низкая (0010)
Использование Уникальные элементы Группы элементов

Примечание: Хотя ID обеспечивают быстрый доступ к элементам, в современной веб-разработке рекомендуется использовать классы и data-атрибуты для большинства задач, оставляя ID для особых случаев (якорные ссылки, главные элементы страницы).