Тег header в HTML: что это такое?

Синтаксис тега header

<header>
  <!-- Содержимое шапки -->
</header>

Атрибуты тега header

Тег header поддерживает только глобальные атрибуты.

Примеры использования тега header

Шапка сайта

<header>
  <h1>Название сайта</h1>
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>
</header>

Заголовок статьи

<article>
  <header>
    <h2>Заголовок статьи</h2>
    <p>Автор: Иван Иванов</p>
    <time datetime="2024-01-30">30 января 2024</time>
  </header>
  <p>Текст статьи...</p>
</article>

Шапка раздела

<section>
  <header>
    <h2>Наши услуги</h2>
    <p>Мы предлагаем широкий спектр услуг для наших клиентов</p>
  </header>
  <!-- Содержимое раздела -->
</section>

Советы по использованию тега header

• Используйте тег header для обозначения вводной части страницы или раздела.
• Включайте в header основные навигационные элементы и поисковые формы.
• Не забывайте про семантическую структуру - используйте заголовки h1-h6 внутри header.
• Можно использовать несколько header на странице, но каждый должен быть связан с конкретным разделом.
• Не вкладывайте header в другой header - это нарушает спецификацию HTML.
• Комбинируйте header с другими семантическими элементами, такими как nav и search.

Часто задаваемые вопросы (FAQ)

1 Сколько тегов header можно использовать на странице?

На странице может быть несколько тегов header, но каждый должен быть связан с определенным разделом контента. Главный header обычно один и располагается в начале страницы.

2 Можно ли вкладывать header в header?

Нет, вложение тега header в другой header не допускается по спецификации HTML.

3 Какие элементы обычно включают в header?

Обычно header содержит заголовки (h1-h6), логотип, навигационное меню (nav), поисковую форму и другие вводные элементы раздела.

Заключение

Тег header является важным семантическим элементом HTML5, который помогает структурировать контент и делает его более понятным как для пользователей, так и для поисковых систем. Правильное использование этого тега улучшает доступность сайта и его SEO-оптимизацию.

Для получения дополнительной информации о теге header, рекомендуем ознакомиться с официальной документацией на MDN.