Tag HEADER
Semantyczny element HTML dla nagłówka strony lub sekcji. Zwykle zawiera logo i nawigację.
Definicja tagu <header> w HTML5
Element <header> to semantyczny znacznik wprowadzony w specyfikacji HTML5, funkcjonujący jako kontener dla treści wprowadzających lub grupy elementów nawigacyjnych. W kontekście optymalizacji pod wyszukiwarki (SEO), tag ten sygnalizuje robotom indeksującym początek sekcji logicznej dokumentu lub jego fragmentu, ułatwiając parsowanie struktury DOM.
Zawartość i komponenty składowe
Zgodnie ze standardami W3C, element <header> agreguje kluczowe informacje orientacyjne, w tym najczęściej:
- Elementy brandingu: Logotypy, nazwa witryny lub slogany firmowe.
- Nawigację: Zagnieżdżony tag
<nav>z linkami wewnętrznymi. - Hierarchię nagłówków: Elementy od
<h1>do<h6>, ewentualnie zgrupowane w<hgroup>. - Interfejsy pomocnicze: Formularze wyszukiwania, przełączniki języka lub linki do profili społecznościowych.
Pozycjonowanie w strukturze strony
Podstawowym zastosowaniem <header> jest umiejscowienie go na szczycie hierarchii <body> jako nagłówka globalnego witryny. Specyfikacja HTML5 dopuszcza jednak jego wielokrotne występowanie – może on pełnić rolę nagłówka dla poszczególnych sekcji semantycznych (np. wewnątrz tagów <article> lub <section>), co precyzuje kontekst tematyczny danej części treści.
Dystynkcja: <header> vs. <head> vs. Nagłówek HTTP
W nomenklaturze technicznej należy rozróżniać trzy pojęcia często mylone ze względu na zbliżone nazewnictwo:
- Element
<header>: Widoczna sekcja interfejsu użytkownika (UI), część contentu strony. - Sekcja
<head>: Niewidoczny kontener na metadane dokumentu (meta description, title, linki CSS), interpretowany przez przeglądarkę i roboty. - Nagłówki HTTP (Headers): Parametry protokołu przesyłane w żądaniu i odpowiedzi serwera (np. statusy 200 OK, 404, cache-control), niezwiązane bezpośrednio ze strukturą HTML.
Masz problem z poprawną strukturą nagłówków na stronie?
📞 Zadzwoń: +48 602 131 233