Znacznik <header> w HTML pełni rolę semantycznego kontenera, który grupuje elementy wprowadzające – takie jak nagłówki, logo, nawigacja czy informacje o autorze – na początku strony lub wybranej sekcji. Jest wykorzystywany zarówno na poziomie całego dokumentu, jak i w ramach poszczególnych sekcji, takich jak artykuły czy rozdziały.
Funkcja i zastosowanie <header>
- Strukturalny porządek –
<header>zapewnia wyraźne uporządkowanie kodu, wyodrębniając blok nagłówkowy, co poprawia czytelność oraz ułatwia zarządzanie treścią strony; - Wielokrotność użycia – możesz zastosować więcej niż jeden znacznik
<header>na stronie. Najczęściej oddzielny nagłówek znajduje się dla głównej części witryny oraz dla poszczególnych artykułów czy sekcji; - Zawartość – choć często zawiera nagłówki H1–H6,
<header>pełni inną rolę niż same nagłówki. Może obejmować dowolne elementy wprowadzające, np. logo, nawigację główną, motto, nazwę autora, skrócone menu czy inne informacje pomocnicze.
Różnica między <header>, nagłówkami H1–H6 oraz <head>
<header>– strukturalny element widoczny dla użytkownika, odpowiadający za wyświetlanie zawartości wstępnej sekcji lub strony;- Nagłówki H1–H6 – oznaczają hierarchię tytułów i podtytułów w treści;
<head>– osobna sekcja niewidoczna dla użytkownika, przechowująca m.in. metadane, tytuł strony czy odwołania do stylów CSS.
Przykładowe zastosowania
1. Nagłówek dla całej strony
<header>
<h1>Moja Strona Internetowa</h1>
<nav>
<a href="#start">Start</a>
<a href="#oferta">Oferta</a>
<a href="#kontakt">Kontakt</a>
</nav>
</header>
W tym przykładzie <header> grupuje tytuł strony oraz główną nawigację, co klarownie wyodrębnia sekcję informacyjną i usprawnia dostęp użytkownikom.
2. Nagłówek wewnątrz artykułu
<article>
<header>
<h1>Jak działa znacznik header w HTML?</h1>
<p>Autor: Katarzyna Nowak</p>
<p>Data publikacji: 7 sierpnia 2025</p>
</header>
<section>
<p>Tutaj znajduje się treść artykułu...</p>
</section>
</article>
Dzięki takiemu zastosowaniu można w każdym artykule jasno wydzielić tytuł, autora i inne podstawowe informacje.
3. Logo, slogan i przyciski w <header>
<header>
<img src="logo.png" alt="Logo firmy">
<h1>Twoja Marka</h1>
<p>Najlepsze rozwiązania dla Ciebie</p>
<nav>
<a href="#produkty">Produkty</a>
<a href="#onas">O nas</a>
<a href="#kontakt">Kontakt</a>
</nav>
</header>
To typowy przykład nagłówka strony, gdzie wyświetlone są logo, slogan i główne menu nawigacyjne. Wszystkie te elementy są logicznie pogrupowane.
SEO i dostępność
- Znaczenie w SEO –
<header>, w powiązaniu z odpowiednimi nagłówkami H1–H6, ułatwia wyszukiwarkom analizę oraz interpretację struktury treści na stronie. Pomaga to m.in. w lepszym określeniu tematyki czy sekcji witryny; - Dostępność – użytkownicy korzystający z czytników ekranu lub urządzeń wspomagających uzyskują lepszy dostęp do kluczowych informacji zawartych w nagłówku, co podnosi poziom dostępności strony.
Dobre praktyki
- Umieszczaj w
<header>tylko te elementy, które stanowią wprowadzenie do sekcji czy strony, - nie stosuj
<header>jako kontenera dla całej strony – korzystaj z niego wyłącznie na początku danej sekcji, - nie myl
<header>z<head>– to dwa zupełnie różne znaczniki o odmiennych funkcjach.
Prawidłowe wykorzystanie <header> porządkuje kod HTML, poprawia użyteczność, wpływa na SEO i korzystnie oddziałuje na doświadczenie użytkownika. Dzięki niemu strona staje się bardziej zrozumiała zarówno dla ludzi, jak i dla wyszukiwarek oraz narzędzi dostępności.
