Що таке HTML header?

При роботі з сайтом перший з тегів, з яким стикається програміст в HTML, <header>. При його використанні без атрибутів, відмінностей у порівнянні з іншими тегами не видно, з-за чого виникає питання можливих причин його використання.

Як і де використовувати?

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

В HTML <header>, як і ряд інших тегів, з'явився лише в 5-й версії мови розмітки. Тому не всі браузери правильно обробляють його. У специфікації мови передбачається, щоб тег містив в собі заголовок розділу (h1-h6) або сторінки, а також необхідні в "шапці" сайту допоміжні елементи, включаючи банери, блок контактних даних та інші. Як і більшість тегів в HTML, <header> повинен мати свою "закриває пару" </header>, що позначає закінчення дії властивостей даного тега. Бажаючи підправити заголовок сайту під свій особистий тип оформлення, для тега можна використовувати ряд атрибутів, що визначають його стиль.

Приклади використання

Практика роботи з тегом дозволить повністю зрозуміти принципи роботи <header>. HTML-приклади його використання можна знайти майже на кожному великому сайті. На них він зазвичай застосовується для позначення заголовка.

Одним із способів завдання "шапки" сайту з тегом <header> є наступний приклад:

<header>

<h1>HTML5</h1>

</header>

Крім заголовка, сюди можна додати будь-які бажані елементи і теги, за винятком <footer>. Він відповідає за нижній колонтитул сторінки і не може бути присутнім в "шапці" сайту. При виявленні цього елемента всередині тега заголовка сайт буде завантажуватися невірно.