HTML тег "header" — шапка, яка тримає все!
Коли відкриваєш сторінку, що перше кидається в очі? Заголовок, меню, логотип, інфо про автора?
Оце і є шапка сторінки, або простіше — “header”. І саме для цього HTML має спеціального, стильного й дуже потрібного тега:
<header> ... </header>
Що таке тег <header>?
Тег <header> — це структурний елемент HTML, який позначає вступну або верхню частину розділу, сторінки, статті або навіть окремого блоку.
Всередині <header> можуть бути:
заголовки (
<h1>,<h2>…)логотип
навігація (
<nav>)контактна інформація
короткий опис або підзаголовок
💡 І так, таких “хедерів” на сторінці може бути багато — головне, щоб вони відповідали своїй частині контенту.
Як виглядає приклад?
<header>
<h1>Мій блог про HTML</h1>
<nav>
<a href="/">Головна</a>
<a href="/blog">Блог</a>
<a href="/contact">Контакти</a>
</nav>
</header>
Що бачимо:
<h1>— головний заголовок сторінки<nav>— навігаційне менюІ все це красиво упаковано в
<header>, щоб пошуковики й браузери зрозуміли: це початок, сер!
Чому це важливо?
Тег <header>:
допомагає SEO — структурований код краще читається роботами Google
покращує доступність — екрани зчитування розуміють, де починається важлива інформація
наводить порядок у коді — не просто
<div class="top-top-wrapper-of-something-else">, а чітка семантика
Плутанина, якої слід уникати:
| ❌ Не робимо | ✅ Робимо |
|---|---|
Обгортаємо <header> навколо всього сайту бездумно | Використовуємо <header> для вступної частини |
Плутаємо з тегом <head> (це зовсім інше) | <header> — частина видимого контенту |
Вставляємо <footer> у <header> | Тримаймо логіку: спершу “header”, потім контент, потім “footer” 😊 |
Підсумок
Тег <header> — це як вивіска магазину. Він не тільки вітає відвідувача, а й допомагає йому зрозуміти, де він опинився, і куди далі йти.
Правильно оформлений <header> = плюсик у SEO, плюсик у дизайні, плюсик у структурі. А ми ж за плюси, правда ж? 😉
Хочеш сайт, де все по поличках і без HTML-хаосу?
Пиши мені — я створю для тебе функціональний, грамотний і красивий сайт, де кожен тег буде на своєму місці, а Google буде плескати в долоні.
Коментарі