Тег header в HTML

Главная

База знаний

html

Семантические элементы

Тег header в HTML - полное практическое руководство

26 ноября 2025

Автор

Олег Марков

Введение

Тег header в HTML часто воспринимают просто как "шапку сайта". На практике он решает сразу несколько задач: помогает выстраивать семантическую структуру страницы, облегчает работу поисковым системам и ассистивным технологиям, а заодно упрощает поддержку кода.

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

Краткое определение

Тег header — это семантический блочный элемент, который описывает "шапку" страницы или отдельного логического раздела. Чаще всего внутри header размещают:

логотип
навигацию
заголовок раздела или страницы
поиск
краткое описание раздела
вспомогательные элементы вроде кнопок входа, переключателя языка и т.д.

Важный момент: header не обязательно один на странице. Вы можете использовать несколько элементов header — как для всей страницы, так и внутри отдельных секций.

Связь с HTML5 и семантикой

Тег header появился в HTML5 вместе с другими семантическими элементами (section, article, footer, nav и др.). Его основная задача — не визуальное оформление, а смысловая структура документа.

То есть сам по себе header:

ничего не говорит о том, где элемент будет отображаться на экране
не добавляет стилевого оформления
лишь подсказывает, что внутри находится "заголовочная часть" страницы или раздела

А вот уже с помощью CSS вы решаете, как именно будет выглядеть этот блок.

Суммируем базовые правила, чтобы у вас была опора:

header может использоваться:
- как шапка всей страницы (обычно сразу внутри body)
- как шапка раздела внутри section, article, aside, main
header не должен находиться внутри тега footer, адреса address и других "особых" элементов, для которых это не имеет смысла
header не обязан содержать заголовок h1–h6, но это очень частый и правильный сценарий
на одной странице может быть несколько header — это нормально и соответствует спецификации

Теперь давайте посмотрим, как это выглядит в коде.

Вот минимальный пример структуры страницы с тегом header:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример использования header</title>
</head>
<body>
  <header>
    <!-- Логотип или название сайта -->
    <div class="logo">
      <!-- Здесь может быть картинка логотипа -->
      <span>Мой сайт</span>
    </div>

    <!-- Основная навигация по сайту -->
    <nav>
      <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/blog">Блог</a></li>
        <li><a href="/contacts">Контакты</a></li>
      </ul>
    </nav>
  </header>

  <!-- Основное содержимое страницы -->
  <main>
    <h1>Заголовок страницы</h1>
    <p>Здесь находится основной контент.</p>
  </main>
</body>
</html>

Обратите внимание: здесь header используется один раз и описывает "шапку" всего сайта.

Самый частый сценарий — разместить header в начале body и использовать его как общую шапку сайта.

<body>
  <header class="site-header">
    <!-- Здесь могла бы быть ваша шапка сайта -->
  </header>

  <main>
    <!-- Основной контент страницы -->
  </main>
</body>

Такое размещение удобно:

для поддержания единого макета во всем проекте
для подключения общей навигации
для реализации "липкой" шапки (fixed header) через CSS

Header в составе разделов (section, article)

Смотрите, теперь я покажу вам, как header можно использовать не только для всей страницы, но и внутри конкретных разделов.

<main>
  <article>
    <header>
      <!-- Заголовок конкретной статьи -->
      <h1>Как использовать тег header в HTML</h1>
      <p>Автор Олег Марков</p>
      <p>Опубликовано 01.10.2025</p>
    </header>

    <p>Здесь начинается содержимое статьи...</p>
  </article>

  <section>
    <header>
      <!-- Заголовок раздела -->
      <h2>Другие статьи по теме HTML</h2>
    </header>

    <!-- Список ссылок на другие статьи -->
  </section>
</main>

Как видите, каждый article и section может иметь собственный header. Это помогает:

логически отделять разные части страницы
улучшать структуру для скринридеров
упрощать поддержку кода, когда каждая сущность оформлена одинаково

Есть несколько важных ограничений:

Нельзя размещать header внутри footer.
Нецелесообразно использовать header там, где "шапка" раздела не нужна по смыслу.

Пример некорректной структуры:

<footer>
  <!-- Так делать не стоит -->
  <header>
    <h2>Контакты</h2>
  </header>
  <p>Телефон 8 800 123 45 67</p>
</footer>

Здесь заголовок лучше оформить без header — внутри footer он не нужен:

<footer>
  <h2>Контакты</h2>
  <p>Телефон 8 800 123 45 67</p>
</footer>

Частый вопрос: обязательно ли, чтобы внутри header был заголовок h1–h6? Формально — нет. Но практически чаще всего там действительно размещают заголовки.

Правильная комбинация:

<article>
  <header>
    <h2>Новости компании</h2>
    <p>Обновление от 10.10.2025</p>
  </header>

  <p>Основной текст новости...</p>
</article>

Важно понимать:

header не меняет уровень заголовка
иерархию заголовков по-прежнему определяют теги h1–h6
header лишь группирует заголовок и связанную с ним информацию (дату, автора, метки и т.д.)

Многие путают header и nav и иногда заменяют одно другим. Давайте разберемся:

header — общий контейнер для шапки (может включать логотип, навигацию, поиск, заголовок)
nav — контейнер только для навигационных ссылок

Часто nav размещают внутри header:

<header>
  <h1>Мой сайт</h1>

  <!-- Навигационное меню внутри шапки -->
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
    </ul>
  </nav>
</header>

Такое сочетание — типичный и правильный паттерн.

Взаимодействие с поисковыми системами

Поисковые системы учитывают семантическую разметку, включая header. Для SEO важно:

логично использовать header в качестве шапки страницы
добавлять внутри него важные элементы: логотип, основную навигацию, возможно — h1 (если это уместно)
не злоупотреблять тегом header (не вставлять его в каждую мелочь)

Сам по себе тег header не "повышает" сайт в рейтинге, но помогает поисковикам лучше понять структуру страницы.

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

Чтобы усилить этот эффект, иногда добавляют ARIA-атрибуты, но в случае с header чаще всего достаточно стандартной семантики. Об этом мы еще поговорим ближе к практике.

Типичные элементы шапки сайта

Внутри header вы можете разместить:

логотип или название проекта
главное меню (nav)
форму поиска
контакты (например, телефон компании)
кнопки входа/регистрации
языковой переключатель
краткий слоган или описание

Давайте разберем пример, в котором несколько таких элементов объединены в один header.

<header class="site-header">
  <!-- Логотип сайта -->
  <a href="/" class="logo">
    <!-- Обычно здесь используют <img>, SVG или текст -->
    <span>MyCompany</span>
  </a>

  <!-- Основная навигация -->
  <nav class="main-nav">
    <ul>
      <li><a href="/services">Услуги</a></li>
      <li><a href="/cases">Кейсы</a></li>
      <li><a href="/about">О компании</a></li>
    </ul>
  </nav>

  <!-- Блок справа - поиск и кнопка входа -->
  <div class="header-actions">
    <form action="/search" method="get">
      <!-- Поле ввода текста для поиска -->
      <input type="search" name="q" placeholder="Поиск по сайту">
      <!-- Кнопка отправки формы поиска -->
      <button type="submit">Найти</button>
    </form>

    <!-- Кнопка входа в личный кабинет -->
    <a href="/login" class="login-btn">Войти</a>
  </div>
</header>

Как видите, header здесь служит общей рамкой для всех "верхних" элементов.

Еще один типичный сценарий — использовать header в article, чтобы объединить заголовок и метаинформацию о публикации.

<article class="blog-post">
  <header class="post-header">
    <!-- Заголовок статьи -->
    <h1>Тег header в HTML - полное руководство</h1>

    <!-- Дополнительная информация о статье -->
    <div class="post-meta">
      <span class="post-author">Автор Олег Марков</span>
      <span class="post-date">Дата 25.11.2025</span>
      <span class="post-tags">Теги HTML, семантика</span>
    </div>
  </header>

  <!-- Основной текст статьи -->
  <p>В этом материале мы разберем...</p>
</article>

Такой подход помогает:

визуально отделить заголовок и метаданные от основного текста
явно показать структуру статьи для ассистивных технологий

Да, вы можете разместить несколько заголовков внутри одного header, если это оправдано по смыслу. Например, главный заголовок и подзаголовок:

<header>
  <h1>Интернет-магазин электроники</h1>
  <h2>Быстрая доставка по всей России</h2>
</header>

Единственное, на что стоит обратить внимание: иерархия заголовков (h1, h2 и дальше) все равно должна оставаться логичной и последовательной в рамках всей страницы.

Когда это оправдано

Использовать несколько header на странице нормально в таких случаях:

глобальная шапка сайта (site header)
шапка основного содержимого (например, внутри main)
шапки статей (article)
шапки отдельных секций (section)

Давайте посмотрим на пример с несколькими header.

<body>
  <!-- Глобальная шапка сайта -->
  <header class="site-header">
    <h1>Мой блог</h1>
    <nav>
      <a href="/">Главная</a>
      <a href="/articles">Статьи</a>
      <a href="/about">Обо мне</a>
    </nav>
  </header>

  <main>
    <!-- Шапка основного блока контента -->
    <header class="content-header">
      <h2>Последние статьи</h2>
      <p>Новые материалы по HTML и веб-разработке</p>
    </header>

    <!-- Первая статья -->
    <article>
      <header>
        <h3>Тег section в HTML</h3>
        <p>Опубликовано 20.11.2025</p>
      </header>
      <p>Краткое описание статьи...</p>
    </article>

    <!-- Вторая статья -->
    <article>
      <header>
        <h3>Как использовать тег nav</h3>
        <p>Опубликовано 18.11.2025</p>
      </header>
      <p>Краткое описание статьи...</p>
    </article>
  </main>
</body>

Здесь вы видите:

шапку сайта
шапку списка статей
шапки отдельных статей

Такая структура логична и соответствует семантике HTML5.

Чтобы структура не превращалась в хаос, обратите внимание на некоторые моменты:

не оборачивайте каждый небольшой заголовок в отдельный header без необходимости
следите за иерархией: если у вас есть article, то логично сделать header внутри него, а не вокруг него
не помещайте header внутрь элементов, где "шапка" не имеет смысла (например, внутри списка ul без полноценного раздела)

Базовая стилизация шапки сайта

Теперь вы увидите, как это выглядит в коде, если добавить простую стилизацию.

<header class="site-header">
  <div class="logo">MyCompany</div>
  <nav class="main-nav">
    <a href="/">Главная</a>
    <a href="/services">Услуги</a>
    <a href="/contacts">Контакты</a>
  </nav>
</header>

/* Стили для шапки сайта */
.site-header {
  /* Делаем шапку горизонтальным блоком */
  display: flex;
  /* Размещаем элементы по краям */
  justify-content: space-between;
  /* Выравниваем элементы по вертикали */
  align-items: center;
  /* Добавляем отступы */
  padding: 16px 32px;
  /* Фон шапки */
  background-color: #1f2933;
  /* Цвет текста по умолчанию */
  color: #ffffff;
}

/* Лого чуть крупнее */
.site-header .logo {
  font-size: 1.4rem;
  font-weight: bold;
}

/* Ссылки меню */
.main-nav a {
  margin-left: 16px;
  color: inherit;         /* Наследуем цвет текста */
  text-decoration: none;  /* Убираем подчеркивание */
}

/* Эффект наведения на ссылки */
.main-nav a:hover {
  text-decoration: underline;
}

Здесь header выступает как обычный блочный элемент. С точки зрения CSS он ничем не отличается, например, от div.

Частый сценарий — сделать шапку "прилипшей" к верхней части экрана при прокрутке.

/* Фиксированная шапка */
.site-header {
  position: fixed;    /* Фиксируем относительно окна браузера */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;      /* Размещаем над остальными элементами */
  background-color: #1f2933;
  color: #ffffff;
  padding: 12px 24px;
}

/* Добавляем отступ сверху к основному содержимому,
   чтобы его не перекрывала зафиксированная шапка */
main {
  margin-top: 72px;   /* Значение зависит от высоты header */
}

Обратите внимание: здесь важен отступ у main. Без него шапка перекроет часть контента.

Давайте посмотрим, как можно адаптировать header под мобильные устройства.

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

/* На десктопе показываем ссылки в ряд */
.main-nav {
  display: flex;
}

/* На маленьких экранах перестраиваем шапку */
@media (max-width: 600px) {
  .site-header {
    /* Размещаем элементы вертикально */
    flex-direction: column;
    align-items: flex-start;
  }

  .main-nav {
    /* Переводим ссылки на новую строку */
    flex-direction: column;
    width: 100%;
  }

  .main-nav a {
    padding: 8px 0;
  }
}

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

Сам по себе тег header помогает ассистивным технологиям понимать, что определенный фрагмент страницы — это шапка раздела. Но этого иногда недостаточно, чтобы пользователю было удобно перемещаться по странице.

На практике часто реализуют дополнительные улучшения.

Ссылка "Перейти к основному содержимому"

Полезный паттерн — добавить в header скрытую ссылку, которая позволяет сразу перейти к main. Это особенно удобно пользователям, работающим только с клавиатурой и скринридером.

<header class="site-header">
  <!-- Скрытая ссылка для быстрого перехода к контенту -->
  <a href="#main" class="skip-link">Перейти к содержимому</a>

  <div class="logo">MyCompany</div>

  <nav>
    <a href="/">Главная</a>
    <a href="/services">Услуги</a>
  </nav>
</header>

<main id="main">
  <h1>Заголовок страницы</h1>
  <p>Основной контент...</p>
</main>

/* Скрываем ссылку визуально, но оставляем для скринридеров */
.skip-link {
  position: absolute;
  left: -9999px;          /* Уводим далеко за экран */
  top: auto;
}

/* Когда ссылка в фокусе - показываем ее */
.skip-link:focus {
  left: 16px;             /* Возвращаем в видимую область */
  top: 16px;
  background: #ffffff;
  color: #000000;
  padding: 8px 12px;
  border-radius: 4px;
}

Как видите, этот фрагмент кода решает задачу быстрого перехода к основному содержимому, не мешая визуальному оформлению.

Тег header уже является семантическим, поэтому дополнительно указывать role="banner" или другие роли обычно не требуется.

Однако есть важный нюанс:

role="banner" уместен только для шапки всего сайта, но не для header внутри article или section
современные браузеры и скринридеры сами понимают роль header без дополнительных атрибутов

Поэтому типичный и корректный подход — не добавлять ARIA-роль вручную, если вы не решаете очень специфическую задачу доступности.

Иногда разработчики, узнав о семантических тегах, пытаются заменить все div на section, header, footer и т.д. Это приводит к перегруженной и нечитаемой структуре.

Пример неудачной разметки:

<header>
  <header>
    <h1>Название сайта</h1>
  </header>
  <header>
    <nav>...</nav>
  </header>
</header>

Здесь явно лишняя вложенность. Такой код только усложняет восприятие структуры.

Лучше упростить:

<header class="site-header">
  <h1>Название сайта</h1>
  <nav>...</nav>
</header>

Еще одна распространенная проблема — оборачивать каждый заголовок в header даже там, где он не представляет собой "шапку раздела".

Например:

<section>
  <!-- Избыточное использование header -->
  <header>
    <h2>Отзывы клиентов</h2>
  </header>

  <p>Текст...</p>
</section>

С точки зрения спецификации так можно, но если внутри вашего проекта такие header начинают появляться повсюду, их ценность теряется. Иногда достаточно оставить просто заголовок:

<section>
  <h2>Отзывы клиентов</h2>
  <p>Текст...</p>
</section>

Очень частая ошибка новичков — путать header и head. Это разные элементы:

head находится внутри html и содержит метаданные документа (title, meta, link, script и т.д.)
header находится внутри body и описывает шапку страницы или раздела

Неверный код:

<head>
  <header>
    <!-- Так делать нельзя -->
    <h1>Мой сайт</h1>
  </header>
</head>

Правильный вариант:

<head>
  <title>Мой сайт</title>
</head>
<body>
  <header>
    <h1>Мой сайт</h1>
  </header>
</body>

Практический пример: полноценная шапка страницы

Теперь давайте разберемся на примере и соберем вместе несколько идей: семантическую разметку, стилизацию и доступность.

HTML-разметка

<header class="site-header">
  <!-- Ссылка для быстрого перехода к контенту -->
  <a class="skip-link" href="#main">Перейти к содержимому</a>

  <!-- Блок логотипа -->
  <a href="/" class="site-logo">
    <!-- Здесь может быть картинка или SVG -->
    <span>MyCompany</span>
  </a>

  <!-- Основное меню -->
  <nav class="site-nav">
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/services">Услуги</a></li>
      <li><a href="/blog">Блог</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>

  <!-- Дополнительные действия в шапке -->
  <div class="header-controls">
    <!-- Форма поиска по сайту -->
    <form action="/search" method="get" class="search-form">
      <!-- Поле ввода запроса -->
      <input
        type="search"
        name="q"
        placeholder="Поиск"
        aria-label="Поиск по сайту"
      >
    </form>

    <!-- Кнопка входа в аккаунт -->
    <a href="/login" class="login-link">Войти</a>
  </div>
</header>

<main id="main">
  <!-- Основное содержимое страницы -->
</main>

Комментарии в коде показывают, какие элементы и почему расположены внутри header.

CSS-стили для примера

/* Общие стили для шапки */
.site-header {
  display: flex;                 /* Горизонтальное расположение элементов */
  align-items: center;           /* Вертикальное выравнивание по центру */
  justify-content: space-between;/* Логотип слева, меню и кнопки справа */
  padding: 12px 24px;
  background-color: #111827;     /* Темный фон */
  color: #ffffff;                /* Светлый текст */
}

/* Логотип */
.site-logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: inherit;                /* Наследуем цвет текста */
  text-decoration: none;         /* Убираем подчеркивание */
}

/* Меню */
.site-nav ul {
  display: flex;
  list-style: none;              /* Убираем маркеры списка */
  margin: 0;
  padding: 0;
}

.site-nav li + li {
  margin-left: 16px;             /* Отступы между пунктами меню */
}

.site-nav a {
  color: inherit;
  text-decoration: none;
  font-size: 0.95rem;
}

.site-nav a:hover {
  text-decoration: underline;
}

/* Блок с поиском и кнопкой входа */
.header-controls {
  display: flex;
  align-items: center;
}

/* Поле поиска */
.search-form input[type="search"] {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #4b5563;
  background-color: #1f2937;
  color: #ffffff;
}

/* Кнопка входа */
.login-link {
  margin-left: 12px;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: #2563eb;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
}

.login-link:hover {
  background-color: #1d4ed8;
}

/* Ссылка "Перейти к содержимому" */
.skip-link {
  position: absolute;
  left: -9999px;                 /* Прячем ссылку за пределами экрана */
  top: 8px;
  background: #ffffff;
  color: #000000;
  padding: 6px 10px;
  border-radius: 4px;
}

/* Показываем ссылку при фокусе (например, при нажатии Tab) */
.skip-link:focus {
  left: 16px;                    /* Возвращаем в видимую зону */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .site-header {
    flex-wrap: wrap;             /* Разрешаем перенос строк */
  }

  .site-nav ul {
    margin-top: 8px;
    flex-wrap: wrap;             /* Даем пунктам меню возможность переноситься */
  }

  .site-nav li {
    margin: 4px 8px 0 0;
  }

  .header-controls {
    margin-top: 8px;
  }
}

Смотрите, этот пример показывает, как можно создать практичную и семантически корректную шапку для реального проекта.

Чтобы было проще применять все описанное на практике, давайте соберем основные рекомендации в одном месте:

Используйте один header в роли шапки сайта, размещая его в начале body.
Добавляйте header внутри article и section, если вам нужно оформить шапку раздела: заголовок, автора, дату и т.п.
Не размещайте header внутри footer и избегайте лишней вложенности элементов header друг в друга.
Не путайте header с head: первый — внутри body, второй — внутри html и содержит метаданные.
Внутри header можете спокойно использовать nav, логотип, поиск и другие элементы, связанные с "верхней частью" страницы или раздела.
Не злоупотребляйте тегом header: если это всего лишь одиночный заголовок без дополнительных данных, возможно, header не нужен.
Помните о пользователях ассистивных технологий: добавляйте "skip link" и следите за логичной структурой.

Так вы получите читаемый, поддерживаемый и семантически правильный HTML-код.

Частозадаваемые технические вопросы по теме и ответы

Как правильно использовать header вместе с main и footer

Разместите их на одном уровне внутри body: сначала header, затем main, затем footer. Например:

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

Такой порядок соответствует ожидаемой структуре страницы для браузеров и ассистивных технологий.

Стилизуйте сам header, дополнительный div обычно не нужен. Если вам нужен вложенный контейнер (например, для ограничения ширины), сделайте так:

<header>
  <div class="container">
    <!-- содержимое шапки -->
  </div>
</header>

Главное — не забывайте, что header уже является блочным контейнером.

Да, вы можете иметь несколько h1 в разных header внутри article или section, если каждый h1 логично обозначает заголовок независимого раздела или статьи. Важно, чтобы структура была понятной: один h1 для шапки всего документа и остальные — для отдельных самостоятельных материалов.

Nav — это часть header, а не его альтернатива. Не нужно делать отдельный nav с тем же меню вне header. Разместите навигацию один раз внутри header (либо в другом подходящем месте, если это локальное меню раздела).

Как обозначить локальную шапку внутри большого блока без section или article

Если у вас логический раздел без section/article, можете либо обернуть его в section и использовать header внутри, либо оставить просто заголовок. Например:

<section>
  <header>
    <h2>Частые вопросы</h2>
  </header>
  <!-- содержимое раздела -->
</section>

Так структура будет более явной и предсказуемой.

Тег main в HTML - подробное руководство по использованию Тег footer в HTML - назначение семантика и практические примеры

Постройте личный план изучения Html до уровня Middle — бесплатно!

Html — часть карты развития Frontend

100+ шагов развития
30 бесплатных лекций
300 бонусных рублей на счет

Все гайды по Html

Форматирование текста

Тег strong в HTML - полное руководство по семантическому выделению важного текста Тег параграфа p в HTML Тег mark в HTML Тег ins в HTML Тег горизонтальной линии HTML hr - разбор возможностей и примеры использования Теги заголовков HTML полное руководство по структуре страницы Тег em в HTML - полное руководство по семантическому выделению текста Тег del в HTML - подробное руководство по использованию Тег переноса строки HTML br

Таблицы

Строка таблицы HTML tr - полное руководство для верстальщиков и разработчиков Функция append в Go Golang Заголовок таблицы HTML th - полное руководство Подвал таблицы HTML tfoot Ячейка таблицы HTML td - полное руководство по верстке таблиц Тело таблицы HTML tbody - как правильно использовать и управлять табличными данными HTML тег table - как создавать и оформлять таблицы на практике Группа колонок HTML colgroup

Семантические элементы

Тег section в HTML - семантическая разметка структуры страницы Тег nav в HTML - полное руководство по семантической навигации Тег main в HTML - подробное руководство по использованию Тег header в HTML - полное практическое руководство Тег footer в HTML - назначение семантика и практические примеры Тег figure в HTML - как правильно оформлять иллюстрации и подписи Тег figcaption в HTML - подробное руководство с примерами Тег aside в HTML - назначение правильная семантика и примеры

Скрипты

HTML шаблоны template - от базовой разметки до динамических интерфейсов Слоты компонентов в HTML slot - полное руководство Тег script в HTML - как правильно подключать и исполнять JavaScript Тег noscript в HTML - как и когда его использовать

Мета-информация

Атрибут viewport в HTML - полный разбор для разработчиков Тег meta в HTML - полное практическое руководство Ключевые слова в HTML - keywords - подробный разбор Мета описание description в HTML - полное руководство Атрибут charset в HTML - полное руководство для разработчиков

Медиа

Функция append в Go (Golang)Функция append в Go Golang Атрибут в HTML и объектно ориентированном программировании Функция append в Go (Golang)Тег изображения img в HTML - полный разбор для практической верстки Тег audio в HTML Атрибут в программировании - что это такое и как с ним работать

Списки

Маркированный список HTML ul - основы синтаксиса стилизация и лучшие практики Нумерованный список HTML ol Элемент списка HTML li - как правильно создавать и оформлять элементы списка Термин определения HTML dt Список определений HTML dl - dl dt dd практическое руководство Тег dd в HTML - полное описание и примеры использования

Ссылки

Атрибут target в HTML - использование и подводные камни Атрибут rel в HTML - полное практическое руководство Атрибут href в HTML - подробное руководство для начинающих и практикующих разработчиков Атрибут download в HTML Тег ссылки HTML a - полное руководство для начинающих и практикующих разработчиков

Интерактивные элементы

Заголовок details в HTML - summary Контекстное меню в HTML - menu Диалоговое окно в HTML dialog Раскрывающийся блок в HTML - details

Формы

Текстовая область HTML textarea - практическое руководство Выпадающий список HTML select - полное руководство для разработчиков Опция списка HTML option - как работает и как правильно использовать Атрибут method в HTML - как правильно отправлять данные формы Заголовок группы HTML legend - как правильно использовать и оформлять Тег input в HTML - типы атрибуты валидация и примеры Тег формы form в HTML Группа полей HTML fieldset Атрибут action в HTML - как правильно задавать адрес отправки формы

Элементы форм

Текстовое поле input text в HTML - полное руководство Кнопка отправки в HTML - input submit Кнопка сброса в HTML input-reset - полное руководство Радиокнопка в HTML - input radio Поле пароля в HTML - input-password Чекбокс в HTML - input-checkbox для начинающих и не только

Встраиваемый контент

Тег object в HTML - как встраивать сторонний контент и управлять им Встроенный фрейм HTML iframe - полное практическое руководство Тег embed в HTML - как встраивать внешние ресурсы на страницу

Структура документа

Тег title в HTML - назначение правила оформления и лучшие практики Тег html в HTML5 - полное практическое руководство Тег head в HTML - структура настройки и лучшие практики Декларация DOCTYPE в HTML Тег body в HTML - структура страницы и основные возможности Тег base в HTML - полный разбор и практические примеры

Доступность

Всплывающая подсказка в HTML title ARIA роль - полное руководство для разработчиков ARIA label в HTML - подробное руководство по доступным интерфейсам Альтернативный текст в HTML - как правильно использовать атрибут alt Атрибут aria-hidden - как управлять видимостью элементов для скринридеров

Открыть базу знаний

Лучшие курсы по теме

HTML и CSS

Антон Ларичев

AI-тренажеры

Практика в студии

Гарантия

Бонусы

4.9

3 999 ₽ 6 990 ₽

Подробнее

TypeScript с нуля

Антон Ларичев

AI-тренажеры

Практика в студии

Гарантия

Бонусы

4.8

3 999 ₽ 6 990 ₽

Подробнее

Next.js - с нуля

Антон Ларичев

AI-тренажеры

Практика в студии

Гарантия

Бонусы

4.7

3 999 ₽ 6 990 ₽

Подробнее

Отправить комментарий

Скидка 15% по промокоду

Тег header в HTML - полное практическое руководство

Введение

Что такое тег header в HTML

Краткое определение

Связь с HTML5 и семантикой

Основные правила использования header

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

Где можно и где нельзя использовать header

Header как шапка страницы

Header в составе разделов (section, article)

Где header использовать не надо

Семантика и роль header в структуре документа

Header и иерархия заголовков

Header и nav — в чем разница

Взаимодействие с поисковыми системами

Влияние на доступность (a11y)

Что можно размещать внутри header

Типичные элементы шапки сайта

Header внутри статьи: данные об авторе и дате

Можно ли помещать несколько заголовков в один header

Множественные header на одной странице

Когда это оправдано

Чего стоит избегать при множественных header

Стилизация header с помощью CSS

Базовая стилизация шапки сайта

Липкий header (fixed header)

Адаптивный header

Header и доступность (Accessibility)

Роль header в доступности

Ссылка "Перейти к основному содержимому"

Нужно ли добавлять ARIA role в header

Частые ошибки при использовании header

Подмена всего div на header

Использование header без логической необходимости

Путаница между header и head

Практический пример: полноценная шапка страницы

HTML-разметка

CSS-стили для примера

Краткие рекомендации по использованию header

Частозадаваемые технические вопросы по теме и ответы

Как правильно использовать header вместе с main и footer

Можно ли оборачивать header в div для стилизации

Можно ли использовать внутри header тег h1 несколько раз на странице

Нужно ли дублировать меню в header и nav отдельно

Как обозначить локальную шапку внутри большого блока без section или article

Постройте личный план изучения Html до уровня Middle — бесплатно!

Все гайды по Html

Лучшие курсы по теме

HTML и CSS

TypeScript с нуля

Next.js - с нуля