Тег <header>
Тег <header> (укр. – “заголовок”) використовується для визначення верхньої частини веб-сторінки або розділу, яка часто містить заголовки, навігаційні меню, логотипи, а також інші елементи, що допомагають користувачам орієнтуватися на сторінці. Це важливий семантичний тег HTML5, який полегшує структуризацію контенту та підвищує доступність сайту для пошукових систем та користувачів.
Атрибути
Специфічні атрибути
Тег <header> не має специфічних атрибутів.
Глобальні атрибути
- id — унікальний ідентифікатор для елемента. Наприклад:
<header id="main-header">
<h1>Вітаємо на нашому сайті!</h1>
</header>- class — для стилізації елемента через CSS. Наприклад:
<header class="site-header">
<h1>Наш сайт</h1>
</header>- style — для інлайн-стилізації елемента. Наприклад:
<header style="background-color: #333; color: white;">
<h1>Заголовок сторінки</h1>
</header>- title — надає опис елемента, що може бути відображений при наведенні курсора. Наприклад:
<header title="Основний заголовок сторінки">
<h1>Головний заголовок</h1>
</header>
Приклад використання
<header>
<nav>
<ul>
<li><a href="#home">Головна</a></li>
<li><a href="#about">Про нас</a></li>
<li><a href="#services">Послуги</a></li>
<li><a href="#contact">Контакти</a></li>
</ul>
</nav>
</header>Додаткові моменти
- Тег
<header>може містити кілька елементів, таких як логотипи, банери та інші графічні елементи, що покращують зовнішній вигляд сторінки. - Тег
<header>можна використовувати не лише для основної верхньої частини сторінки, але й для кожного окремого розділу або статті. Це дозволяє створювати добре структуровану сторінку. - Використання
<header>допомагає у забезпеченні доступності сайту для людей з обмеженими можливостями, оскільки пошукові системи та екранні ріди можуть легше інтерпретувати його вміст. - Тег
<header>не повинен використовуватися для кожного окремого елемента заголовка. Його призначення — це визначення верхньої частини розділів чи всієї сторінки, а не для кожного заголовка окремо.
