<header> – Елемент шапки
{{HTMLSidebar}}
Елемент HTML <header> (шапка, верхній колонтитул) представляє вступний вміст, як правило це група вступних або навігаційних засобів. Він може містити деякі елементи заголовків, а також логотип, форму пошуку, ім'я автора та інші елементи.
Спробуйте його в дії
Примітки щодо використання
Елемент <header> значить абсолютно те саме, що й роль-віха banner, коли <header> не вкладено всередину розділового вмісту. Якщо вкладено, то елемент <header> не є віхою.
Елемент <header> може визначати глобальну шапку сайту, яка в дереві доступності описується як banner. Зазвичай шапка включає логотип, назву компанії, пошук і, можливо, глобальну навігацію або гасло. Найчастіше вона знаходиться у верхній частині сторінки.
У протилежному випадку, в дереві доступності цей елемент стає section, і зазвичай містить заголовок навколишнього розділу (елемент h1 - h6) і необов'язковий підзаголовок, але це не вимагається.
Історичне використання
Елемент <header> у самому початку існував у HTML для заголовків. Це можна спостерігати в найпершому вебсайті. В якийсь момент, заголовки стали <h1> – <h6>, що дозволило <header> зайняти іншу роль.
Атрибути
Це елемент приймає лише глобальні атрибути.
Приклади
Шапка сторінки
<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> визначає віху banner, коли його контекстом є <body>. Елемент шапки HTML не вважається віхою банера, коли є нащадком елемента <article>, <aside>, <main>, <nav> чи <section>.
Технічний підсумок
| Категорії вмісту | Потоковий вміст, відчутний вміст. |
|---|---|
| Дозволений вміст |
Потоковий вміст, але без жодних <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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 Yes | Chrome Android Full support Yes | Firefox for Android Full support 4 | Opera Android Full support 11.1 | Safari on iOS Full support 4.2 | Samsung Internet Full support Yes |