<header> – Елемент шапки

Елемент HTML <header> (шапка, верхній колонтитул) представляє вступний вміст, як правило це група вступних або навігаційних засобів. Він може містити деякі елементи заголовків, а також логотип, форму пошуку, ім'я автора та інші елементи.

Спробуйте його в дії

Примітки щодо використання

Елемент <header> значить абсолютно те саме, що й роль-віха banner, коли <header> не вкладено всередину розділового вмісту. Якщо вкладено, то елемент <header> не є віхою.

Елемент <header> може визначати глобальну шапку сайту, яка в дереві доступності описується як banner. Зазвичай шапка включає логотип, назву компанії, пошук і, можливо, глобальну навігацію або гасло. Найчастіше вона знаходиться у верхній частині сторінки.

У протилежному випадку, в дереві доступності цей елемент стає section, і зазвичай містить заголовок навколишнього розділу (елемент h1 - h6) і необов'язковий підзаголовок, але це не вимагається.

Історичне використання

Елемент <header> у самому початку існував у HTML для заголовків. Це можна спостерігати в найпершому вебсайті. В якийсь момент, заголовки стали <h1> – <h6>, що дозволило <header> зайняти іншу роль.

Атрибути

Це елемент приймає лише глобальні атрибути.

Доступність

Елемент <header> визначає віху banner, коли його контекстом є <body>. Елемент шапки HTML не вважається віхою банера, коли є нащадком елемента <article>, <aside>, <main>, <nav> чи <section>.

Приклади

Шапка сторінки

<header>
  <h1>Назва головної сторінки</h1>
  <img src="mdn-logo-sm.png" alt="Логотип MDN" />
</header>

Результат

Шапка статті

<article>
  <header>
    <h2>Планета Земля</h2>
    <p>
      Опубліковано в середу
      <time datetime="2017-10-04">4 жовтня 2017</time> Остапом Мирним
    </p>
  </header>
  <p>
    Ми живемо на планеті, що зелена й блакитна, де так багато всього ще не
    бачило людське око.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Продовжити читання…</a></p>
</article>

Результат

Технічний підсумок

Категорії вмісту Потоковий вміст, відчутний вміст.
Дозволений вміст Потоковий вміст, але без жодних <header> і <footer> серед нащадків.
Пропуск тега Немає; і початковий, і кінцевий теги – обов'язкові.
Дозволені батьки Усі елементи, що приймають, потоковий вміст. Зверніть увагу, що елемент <header> не повинен бути нащадком <address>, <footer> або іншого елемента <header>.
Неявна роль ARIA Banner, чи generic якщо елемент є нащадком article, aside, main, nav або section або має role=article, complementary, main, navigation або region
Дозволені ролі ARIA group, presentation і none
Інтерфейс DOM HTMLElement

Специфікації

Специфікація
HTML Standard (HTML)
# the-header-element

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
header
Chrome Full support 5
 Edge Full support 12
 Firefox Full support 4
 Internet Explorer Full support 9
 Opera Full support 11.1
 Safari Full support 5
 WebView Android Full support Так
 Chrome Android Full support Так
 Firefox for Android Full support 4
 Opera Android Full support 11.1
 Safari on iOS Full support 4.2
 Samsung Internet Full support Так

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.