HTML header jako element struktury strony, semantyki i nowoczesnego projektowania witryn

HTML header to pojęcie, które może odnosić się do kilku różnych elementów związanych z budową strony internetowej. Najczęściej oznacza znacznik <header>, wykorzystywany do oznaczania nagłówkowej części dokumentu lub wybranej sekcji. W praktyce mianem headera określa się również górny obszar strony zawierający logo, menu, wyszukiwarkę, dane kontaktowe, przyciski i inne ważne elementy nawigacyjne. Niekiedy początkujący twórcy stron mylą także HTML header z sekcją <head>, która pełni zupełnie inną funkcję i zawiera informacje niewidoczne bezpośrednio w głównej części witryny.

Zrozumienie roli headera jest bardzo ważne zarówno dla programistów, projektantów stron, specjalistów SEO, jak i osób samodzielnie zarządzających serwisem internetowym. Dobrze zaprojektowany nagłówek pomaga użytkownikowi szybko zorientować się, gdzie się znajduje, czym zajmuje się witryna i w jaki sposób może przejść do interesujących go treści. Jednocześnie semantycznie poprawny kod ułatwia interpretację struktury dokumentu przez przeglądarki, wyszukiwarki oraz technologie wspomagające.

HTML header nie jest wyłącznie miejscem na logo i menu. Może pełnić funkcję informacyjną, nawigacyjną, wizerunkową i sprzedażową. Jego zawartość zależy od rodzaju strony, wielkości serwisu, potrzeb odbiorców oraz miejsca, w którym znacznik <header> został użyty.

Czym jest HTML header?

W języku HTML znacznik <header> jest semantycznym elementem reprezentującym wprowadzenie do dokumentu albo określonej sekcji. Może zawierać między innymi tytuł, nagłówki, logo, menu, opis, dane autora, wyszukiwarkę oraz inne informacje pomagające zrozumieć zawartość.

Podstawowy przykład może wyglądać następująco:

<header>
  <h1>Nazwa firmy</h1>
  <p>Profesjonalne usługi dla klientów biznesowych</p>
</header>

W tym przypadku header pełni funkcję nagłówka całej strony. Zawiera główny tytuł oraz krótki opis przedstawiający charakter serwisu.

Znacznik <header> może pojawić się także wewnątrz artykułu:

<article>
  <header>
    <h2>Jak zaprojektować stronę firmową</h2>
    <p>Autor: Jan Kowalski</p>
  </header>

  <p>Treść artykułu...</p>
</article>

Tutaj header nie jest nagłówkiem całej witryny, lecz częścią wprowadzającą do konkretnego artykułu.

HTML header a sekcja head

Jednym z najczęstszych błędów jest mylenie znaczników <header> i <head>. Choć ich nazwy są podobne, odpowiadają za zupełnie inne obszary dokumentu.

Element head

Znacznik <head> znajduje się na początku dokumentu HTML i zawiera informacje przeznaczone przede wszystkim dla przeglądarki, wyszukiwarki i innych systemów przetwarzających stronę.

W sekcji <head> umieszcza się między innymi:

tytuł dokumentu;
metadane;
informacje o kodowaniu znaków;
odnośniki do arkuszy CSS;
ustawienia widoku mobilnego;
skrypty;
dane strukturalne;
ikony witryny.

Przykład:

<head>
  <meta charset=\"UTF-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
  <title>Przykładowa strona internetowa</title>
  <link rel=\"stylesheet\" href=\"style.css\">
</head>

Zawartość <head> nie jest standardowo wyświetlana jako część strony widocznej dla użytkownika.

Element header

Znacznik <header> znajduje się natomiast wewnątrz <body>, czyli w widocznej części dokumentu. Reprezentuje obszar wprowadzający lub nagłówkowy.

<body>
  <header>
    <a href=\"/\">
      <img src=\"logo.svg\" alt=\"Nazwa firmy\">
    </a>

    <nav>
      <a href=\"/oferta\">Oferta</a>
      <a href=\"/o-nas\">O nas</a>
      <a href=\"/kontakt\">Kontakt</a>
    </nav>
  </header>
</body>

Można więc przyjąć prostą zasadę:

<head> zawiera informacje o dokumencie, natomiast <header> jest widocznym elementem jego treści.

Do czego służy znacznik header?

Głównym zadaniem znacznika <header> jest oznaczenie części wprowadzającej. Nie oznacza to jednak, że jego zawartość musi zawsze wyglądać tak samo.

Header może zawierać:

nazwę strony;
logo;
główny nagłówek;
podtytuł;
opis sekcji;
menu nawigacyjne;
wyszukiwarkę;
dane autora;
datę publikacji;
przyciski logowania;
przycisk kontaktowy;
informacje o kategorii;
elementy pomocnicze.

Zastosowanie zależy od kontekstu. Header całej strony zwykle pełni inną funkcję niż header artykułu, produktu czy sekcji tematycznej.

Semantyczne znaczenie elementu header

Semantyczny HTML polega na używaniu znaczników zgodnie z ich znaczeniem, a nie wyłącznie w celu uzyskania określonego wyglądu.

Przed wprowadzeniem elementów takich jak <header>, <nav>, <main>, <article> czy <footer> wiele stron budowano głównie z elementów <div>. Kod wyglądał na przykład tak:

<div class=\"header\">
  <div class=\"logo\">Firma</div>
  <div class=\"menu\">...</div>
</div>

Taka konstrukcja może działać wizualnie, ale sam znacznik <div> nie przekazuje informacji o funkcji elementu. Klasa header jest zrozumiała dla programisty, ale nie ma wbudowanego znaczenia semantycznego.

Wersja wykorzystująca elementy semantyczne może wyglądać tak:

<header>
  <a href=\"/\" class=\"logo\">Firma</a>

  <nav aria-label=\"Główna nawigacja\">
    ...
  </nav>
</header>

Dzięki temu struktura staje się bardziej czytelna zarówno dla człowieka, jak i systemów analizujących dokument.

Gdzie można umieścić HTML header?

Znacznik <header> może być używany w różnych miejscach dokumentu. Najczęściej występuje jako nagłówek całej witryny, ale nie jest do tego ograniczony.

Header całej strony

Najbardziej typowe zastosowanie to górna część dokumentu:

<body>
  <header class=\"site-header\">
    <a href=\"/\" class=\"site-logo\">Nazwa marki</a>

    <nav class=\"main-navigation\">
      ...
    </nav>
  </header>

  <main>
    ...
  </main>
</body>

Taki header może być wspólny dla wszystkich podstron.

Header artykułu

Każdy artykuł może mieć własny nagłówek:

<article>
  <header class=\"article-header\">
    <p class=\"category\">Poradniki</p>
    <h1>Jak stworzyć skuteczną stronę internetową</h1>
    <p>Opublikowano 10 maja 2026 roku</p>
  </header>

  <p>Treść...</p>
</article>

Header sekcji

Element <section> również może zawierać header:

<section>
  <header>
    <h2>Nasze usługi</h2>
    <p>Poznaj główne obszary naszej działalności.</p>
  </header>

  ...
</section>

Header formularza lub panelu

W bardziej rozbudowanych aplikacjach header może wprowadzać do panelu, formularza albo widoku danych:

<section class=\"dashboard\">
  <header>
    <h2>Panel użytkownika</h2>
    <p>Zarządzaj zamówieniami i ustawieniami konta.</p>
  </header>

  ...
</section>

Czy na stronie może być więcej niż jeden header?

Tak. Dokument może zawierać wiele elementów <header>, o ile każdy z nich wprowadza do innej części treści.

Przykład:

<body>
  <header class=\"site-header\">
    <h1>Portal technologiczny</h1>
  </header>

  <main>
    <article>
      <header>
        <h2>Nowe standardy projektowania stron</h2>
        <p>Autor: Anna Nowak</p>
      </header>

      <p>Treść artykułu...</p>
    </article>

    <article>
      <header>
        <h2>Najważniejsze trendy w UX</h2>
        <p>Autor: Piotr Wiśniewski</p>
      </header>

      <p>Treść artykułu...</p>
    </article>
  </main>
</body>

W tym przykładzie jeden header dotyczy całej witryny, a dwa kolejne należą do poszczególnych artykułów.

Nie należy więc utożsamiać <header> wyłącznie z jedną stałą belką u góry ekranu. Jest to element semantyczny, który może być używany wielokrotnie.

Jakie elementy najczęściej znajdują się w headerze strony?

Górna część witryny jest jednym z najważniejszych obszarów interfejsu. Użytkownik widzi ją zwykle bezpośrednio po wejściu na stronę.

Logo

Logo pomaga rozpoznać markę i zazwyczaj prowadzi do strony głównej.

<a href=\"/\" class=\"logo\" aria-label=\"Strona główna firmy Example\">
  <img src=\"logo.svg\" alt=\"Example\">
</a>

Warto zadbać o poprawny tekst alternatywny oraz czytelny link.

Menu główne

Menu prowadzi do najważniejszych części serwisu.

<nav aria-label=\"Główna nawigacja\">
  <ul>
    <li><a href=\"/oferta\">Oferta</a></li>
    <li><a href=\"/realizacje\">Realizacje</a></li>
    <li><a href=\"/blog\">Blog</a></li>
    <li><a href=\"/kontakt\">Kontakt</a></li>
  </ul>
</nav>

Przycisk działania

Header często zawiera przycisk prowadzący do najważniejszej konwersji, na przykład rezerwacji, kontaktu, zakupu albo logowania.

<a href=\"/kontakt\" class=\"cta-button\">Umów konsultację</a>

Dane kontaktowe

W lokalnych firmach można umieścić numer telefonu lub godziny pracy.

<a href=\"tel:+48123456789\">123 456 789</a>

Ikony konta i koszyka

W sklepie internetowym header może zawierać dostęp do profilu i koszyka.

<nav aria-label=\"Nawigacja użytkownika\">
  <a href=\"/konto\">Moje konto</a>
  <a href=\"/koszyk\">Koszyk</a>
</nav>

Podstawowa struktura headera strony internetowej

Prosty, semantyczny header może wyglądać następująco:

<header class=\"site-header\">
  <div class=\"header-container\">
    <a href=\"/\" class=\"logo\">
      <img src=\"logo.svg\" alt=\"Nazwa firmy\">
    </a>

    <nav class=\"main-nav\" aria-label=\"Główna nawigacja\">
      <ul>
        <li><a href=\"/oferta\">Oferta</a></li>
        <li><a href=\"/o-nas\">O nas</a></li>
        <li><a href=\"/blog\">Blog</a></li>
        <li><a href=\"/kontakt\">Kontakt</a></li>
      </ul>
    </nav>

    <a href=\"/wycena\" class=\"header-cta\">Poproś o wycenę</a>
  </div>
</header>

Taki kod można rozbudować o mobilne menu, wyszukiwarkę, wybór języka, dane kontaktowe lub inne funkcje.

HTML header a nagłówki h1, h2 i h3

Element <header> nie jest tym samym co nagłówki <h1>, <h2>, <h3> i kolejne. Header jest kontenerem semantycznym, natomiast znaczniki h1–h6 określają hierarchię tytułów.

Przykład poprawnego połączenia:

<header>
  <h1>Sklep z wyposażeniem wnętrz</h1>
  <p>Nowoczesne rozwiązania do domu i biura.</p>
</header>

W artykule może natomiast pojawić się:

<article>
  <header>
    <h2>Jak urządzić małe mieszkanie</h2>
    <p>Praktyczny poradnik dla właścicieli niewielkich wnętrz.</p>
  </header>

  ...
</article>

Nagłówek wewnątrz headera powinien odpowiadać poziomowi struktury dokumentu. Nie należy wybierać poziomu wyłącznie na podstawie rozmiaru czcionki. Wygląd można ustawić w CSS.

Czy header musi zawierać h1?

Nie. Element <header> nie musi zawierać nagłówka <h1>. Może zawierać logo, menu, wyszukiwarkę i inne elementy.

Przykład:

<header class=\"site-header\">
  <a href=\"/\" class=\"logo\">
    <img src=\"logo.svg\" alt=\"Firma Example\">
  </a>

  <nav aria-label=\"Główne menu\">
    ...
  </nav>
</header>

Główny nagłówek <h1> może znaleźć się później, na przykład w sekcji hero:

<main>
  <section class=\"hero\">
    <h1>Projektujemy strony internetowe dla firm</h1>
    <p>Łączymy użyteczność, estetykę i skuteczność.</p>
  </section>
</main>

To często lepsze rozwiązanie, ponieważ wspólny header może być identyczny na wszystkich podstronach, natomiast h1 powinien opisywać konkretną zawartość danego widoku.

Header a element nav

Element <nav> oznacza ważną grupę linków nawigacyjnych. Bardzo często znajduje się wewnątrz headera, ale nie jest z nim tożsamy.

<header>
  <a href=\"/\">Logo</a>

  <nav aria-label=\"Menu główne\">
    ...
  </nav>
</header>

Header może zawierać nav, ale nav może również występować poza headerem, na przykład w stopce lub panelu bocznym.

<footer>
  <nav aria-label=\"Nawigacja w stopce\">
    ...
  </nav>
</footer>

Nie każda grupa linków musi być oznaczona jako <nav>. Element ten najlepiej stosować dla ważnych bloków nawigacyjnych.

Header a element main

Znacznik <main> reprezentuje główną, unikalną treść strony. Standardowy układ może wyglądać tak:

<body>
  <header>
    ...
  </header>

  <main>
    ...
  </main>

  <footer>
    ...
  </footer>
</body>

Header strony znajduje się zwykle przed <main>, ponieważ zawiera elementy wspólne dla całej witryny. Wewnątrz main mogą jednak znajdować się artykuły lub sekcje posiadające własne headery.

<main>
  <article>
    <header>
      <h1>Tytuł artykułu</h1>
    </header>

    ...
  </article>
</main>

Header a element footer

Header i footer pełnią przeciwstawne funkcje strukturalne.

Header

Wprowadza do dokumentu lub sekcji. Zawiera tytuł, opis, logo, menu albo informacje początkowe.

Footer

Kończy dokument lub sekcję. Może zawierać dane autora, prawa autorskie, linki pomocnicze, informacje kontaktowe lub metadane końcowe.

Przykład artykułu:

<article>
  <header>
    <h2>Tytuł wpisu</h2>
    <p>Opublikowano 20 czerwca 2026 roku</p>
  </header>

  <p>Treść artykułu...</p>

  <footer>
    <p>Autor: Anna Kowalska</p>
    <a href=\"/kategoria/web-development\">Web development</a>
  </footer>
</article>

Header strony a sekcja hero

Header i hero są często mylone, ponieważ oba mogą znajdować się w górnej części strony.

Header strony

Zawiera przede wszystkim elementy identyfikacji i nawigacji, takie jak logo, menu, wyszukiwarka i konto użytkownika.

Sekcja hero

Jest głównym obszarem promocyjnym lub informacyjnym pod headerem. Zwykle zawiera h1, opis, grafikę i wezwanie do działania.

<header class=\"site-header\">
  ...
</header>

<main>
  <section class=\"hero\">
    <h1>Nowoczesne strony internetowe dla biznesu</h1>
    <p>Projektujemy serwisy wspierające rozwój firm.</p>
    <a href=\"/kontakt\">Porozmawiajmy</a>
  </section>
</main>

Niektórzy projektanci umieszczają hero wewnątrz headera, ale rozdzielenie tych elementów często ułatwia utrzymanie czytelnej struktury.

Jak ostylować HTML header w CSS?

Sam HTML określa strukturę, natomiast wygląd headera definiuje się w CSS.

Podstawowy przykład:

.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}

.header-container {
  width: min(1200px, 100% - 32px);
  margin-inline: auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav a {
  color: #222222;
  text-decoration: none;
}

Taki styl tworzy poziomy nagłówek z logo, menu i dodatkowym elementem po prawej stronie.

Responsywny HTML header

Header musi działać poprawnie na różnych rozmiarach ekranu. Menu mieszczące się na komputerze może być zbyt szerokie na telefonie.

Podstawowym rozwiązaniem jest ukrycie klasycznej nawigacji i pokazanie przycisku menu mobilnego.

<header class=\"site-header\">
  <a href=\"/\" class=\"logo\">Firma</a>

  <button
    class=\"menu-toggle\"
    type=\"button\"
    aria-expanded=\"false\"
    aria-controls=\"main-menu\"
  >
    Menu
  </button>

  <nav id=\"main-menu\" class=\"main-nav\" aria-label=\"Główna nawigacja\">
    <ul>
      <li><a href=\"/oferta\">Oferta</a></li>
      <li><a href=\"/blog\">Blog</a></li>
      <li><a href=\"/kontakt\">Kontakt</a></li>
    </ul>
  </nav>
</header>

Przykładowy CSS:

.menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: inline-flex;
  }

  .main-nav {
    display: none;
  }

  .main-nav.is-open {
    display: block;
  }
}

Do pełnego działania potrzebny jest również JavaScript aktualizujący stan menu oraz atrybut aria-expanded.

Przycisk mobilnego menu

Przycisk otwierający menu powinien być prawdziwym elementem <button>, a nie zwykłym <div> lub linkiem bez adresu.

Poprawna konstrukcja:

<button
  type=\"button\"
  class=\"menu-toggle\"
  aria-expanded=\"false\"
  aria-controls=\"main-navigation\"
  aria-label=\"Otwórz menu\"
>
  <span aria-hidden=\"true\">☰</span>
</button>

Po otwarciu menu należy zmienić:

aria-expanded=\"true\"

oraz odpowiednio zaktualizować etykietę, jeśli aplikacja tego wymaga.

Sticky header

Sticky header pozostaje widoczny podczas przewijania strony. Może ułatwiać dostęp do menu, ale trzeba stosować go rozsądnie.

Przykład:

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
}

Element sticky działa w ramach swojego kontekstu przewijania. Niektóre właściwości rodziców, na przykład określone ustawienia overflow, mogą wpływać na jego zachowanie.

Zalety sticky headera

szybki dostęp do menu;
łatwiejszy powrót do najważniejszych sekcji;
większa widoczność przycisku działania;
wygoda w długich dokumentach.

Wady sticky headera

zajmuje część ekranu;
może utrudniać czytanie na telefonie;
bywa nachalny;
może zasłaniać kotwice i nagłówki;
zwiększa złożoność interfejsu.

Na małych ekranach warto zmniejszyć jego wysokość albo ograniczyć liczbę widocznych elementów.

Fixed header a sticky header

Element position: fixed jest przytwierdzony do okna przeglądarki:

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

W takim przypadku trzeba często dodać odstęp dla treści:

body {
  padding-top: 72px;
}

Header sticky zachowuje natomiast miejsce w układzie i zaczyna przyklejać się dopiero po osiągnięciu określonej pozycji.

W wielu projektach position: sticky jest prostsze i bezpieczniejsze, ale wybór zależy od zamierzonego efektu.

Transparentny header

Na stronach wizerunkowych header może być umieszczony na tle zdjęcia lub sekcji hero.

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent;
  color: #ffffff;
}

Takie rozwiązanie wymaga szczególnej dbałości o kontrast. Logo i linki muszą pozostać czytelne na różnych fragmentach obrazu.

Można zastosować:

ciemną nakładkę na zdjęcie;
jednolity pasek;
cień tekstu;
zmianę wyglądu po przewinięciu;
osobne wersje logo;
ograniczenie różnorodności tła.

Header zmieniający wygląd podczas przewijania

JavaScript może dodawać klasę po przewinięciu strony:

const header = document.querySelector(\".site-header\");

window.addEventListener(\"scroll\", () => {
  header.classList.toggle(\"is-scrolled\", window.scrollY > 20);
});

CSS:

.site-header {
  background: transparent;
  transition: background-color 0.2s ease;
}

.site-header.is-scrolled {
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

Należy uważać, aby zmiana nie powodowała nagłych przesunięć układu. Lepiej animować kolor, cień lub przezroczystość niż wysokość całego nagłówka.

Dostępność HTML header

Dostępny header powinien być obsługiwany klawiaturą, czytelny dla czytników ekranu i zrozumiały bez polegania wyłącznie na wyglądzie.

Link pomijający nawigację

Na początku strony warto dodać link pozwalający przejść bezpośrednio do głównej treści:

<a class=\"skip-link\" href=\"#main-content\">
  Przejdź do treści
</a>

<header>
  ...
</header>

<main id=\"main-content\">
  ...
</main>

CSS może ukrywać go poza ekranem, dopóki nie otrzyma fokusu:

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 2000;
  padding: 12px 16px;
  background: #ffffff;
}

Widoczny fokus

Linki i przyciski muszą mieć czytelny stan fokusu:

.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

Nie należy usuwać obramowania fokusu bez zapewnienia wyraźnej alternatywy.

Poprawne etykiety

Ikona bez tekstu powinna mieć nazwę dostępną dla technologii wspomagających.

<button aria-label=\"Otwórz wyszukiwarkę\">
  <svg aria-hidden=\"true\">...</svg>
</button>

Kolejność klawiatury

Kolejność elementów w kodzie powinna odpowiadać logicznej kolejności interakcji. Nie należy tworzyć skomplikowanych układów wizualnych, które znacząco różnią się od kolejności DOM.

Kontrast

Tekst, ikony i przyciski powinny być dobrze widoczne na tle. Dotyczy to również stanów aktywnych, rozwijanych menu i elementów nakładanych na zdjęcia.

HTML header a SEO

Sam znacznik <header> nie gwarantuje wyższej pozycji w wyszukiwarce. Może jednak pośrednio wspierać jakość strony poprzez lepszą strukturę, czytelną nawigację i poprawne użycie nagłówków.

Jasna struktura dokumentu

Semantyczny kod pomaga uporządkować treść. Wyszukiwarka łatwiej rozpoznaje, które elementy pełnią funkcję nawigacji, a które należą do głównej zawartości.

Linkowanie wewnętrzne

Menu w headerze przekazuje linki do najważniejszych podstron. Powinno być jednak rozsądnie ograniczone. Umieszczenie kilkudziesięciu linków w głównym menu może pogorszyć użyteczność i utrudnić zrozumienie hierarchii serwisu.

Nagłówki

Jeśli header artykułu zawiera h1, powinien on trafnie opisywać treść. Nie warto powtarzać tej samej frazy w wielu nagłówkach wyłącznie w celu pozycjonowania.

Szybkość

Rozbudowany header może obciążać stronę, szczególnie gdy zawiera duże skrypty, ciężkie fonty, animacje lub wielomegabajtowe grafiki.

Dostosowanie mobilne

Nawigacja musi działać na telefonach. Problemy z menu mobilnym mogą utrudniać korzystanie ze strony i obniżać skuteczność całego serwisu.

Jak projektować header przyjazny użytkownikowi?

Dobry nagłówek powinien pomagać, a nie przytłaczać.

Ogranicz liczbę elementów

Nie każda podstrona musi znaleźć się w głównym menu. Najważniejsze sekcje powinny być łatwo widoczne, a treści pomocnicze mogą trafić do stopki lub menu rozwijanego.

Używaj zrozumiałych nazw

Nazwy linków powinny być proste:

Oferta;
Usługi;
O nas;
Realizacje;
Blog;
Kontakt.

Kreatywne etykiety mogą budować charakter marki, ale nie powinny utrudniać orientacji.

Wyróżnij najważniejsze działanie

Jeżeli głównym celem jest kontakt, rezerwacja albo zakup, jeden przycisk może zostać wizualnie wyróżniony. Nie warto jednak tworzyć kilku konkurujących ze sobą przycisków.

Zachowaj spójność

Układ headera powinien być podobny na wszystkich podstronach. Nagła zmiana położenia logo lub menu może dezorientować użytkownika.

Dostosuj wysokość

Zbyt wysoki nagłówek ogranicza obszar treści. Zbyt niski może utrudnić kliknięcie elementów. Na telefonie należy zapewnić odpowiednio duże obszary dotykowe.

Header dla strony firmowej

Na stronie firmowej najczęściej sprawdza się prosty układ:

logo po lewej;
menu pośrodku lub po prawej;
wyróżniony przycisk kontaktowy;
opcjonalnie numer telefonu;
mobilny przycisk menu.

Przykład:

<header class=\"site-header\">
  <div class=\"header-container\">
    <a href=\"/\" class=\"logo\">
      <img src=\"logo.svg\" alt=\"Firma Budowlana Nowak\">
    </a>

    <nav aria-label=\"Główna nawigacja\">
      <ul>
        <li><a href=\"/uslugi\">Usługi</a></li>
        <li><a href=\"/realizacje\">Realizacje</a></li>
        <li><a href=\"/o-nas\">O nas</a></li>
        <li><a href=\"/kontakt\">Kontakt</a></li>
      </ul>
    </nav>

    <a href=\"tel:+48123456789\">123 456 789</a>
  </div>
</header>

Header dla sklepu internetowego

Sklep potrzebuje większej liczby funkcji:

logo;
wyszukiwarka;
menu kategorii;
konto;
lista ulubionych;
koszyk;
informacje o dostawie;
wybór języka lub waluty.

Przykład uproszczony:

<header class=\"shop-header\">
  <div class=\"shop-header-top\">
    <a href=\"/\" class=\"logo\">
      <img src=\"logo.svg\" alt=\"Sklep Example\">
    </a>

    <form role=\"search\" action=\"/szukaj\">
      <label class=\"visually-hidden\" for=\"shop-search\">
        Szukaj produktów
      </label>
      <input
        id=\"shop-search\"
        type=\"search\"
        name=\"q\"
        placeholder=\"Czego szukasz?\"
      >
      <button type=\"submit\">Szukaj</button>
    </form>

    <nav aria-label=\"Konto i zakupy\">
      <a href=\"/konto\">Konto</a>
      <a href=\"/koszyk\">Koszyk</a>
    </nav>
  </div>

  <nav class=\"category-nav\" aria-label=\"Kategorie produktów\">
    ...
  </nav>
</header>

W sklepie należy szczególnie uważać na przeładowanie nagłówka. Wyszukiwarka często jest ważniejsza niż rozbudowane menu.

Header dla bloga

Nagłówek bloga może eksponować:

nazwę serwisu;
główne kategorie;
wyszukiwarkę;
archiwum;
newsletter;
profil autora.

Przykład:

<header class=\"blog-header\">
  <a href=\"/\" class=\"blog-title\">
    Marketing w praktyce
  </a>

  <nav aria-label=\"Kategorie bloga\">
    <a href=\"/seo\">SEO</a>
    <a href=\"/content-marketing\">Content marketing</a>
    <a href=\"/social-media\">Social media</a>
  </nav>

  <form role=\"search\" action=\"/szukaj\">
    ...
  </form>
</header>

W headerze pojedynczego wpisu mogą znaleźć się tytuł, data, autor i kategoria.

Header dla aplikacji internetowej

Aplikacje SaaS i panele użytkownika często mają inny układ niż klasyczne strony.

Header może zawierać:

nazwę modułu;
wyszukiwarkę;
powiadomienia;
profil użytkownika;
przełącznik organizacji;
pomoc;
przycisk tworzenia nowego elementu.

Przykład:

<header class=\"app-header\">
  <button type=\"button\" aria-label=\"Otwórz menu boczne\">
    ☰
  </button>

  <h1>Panel projektów</h1>

  <nav aria-label=\"Narzędzia użytkownika\">
    <button type=\"button\">Powiadomienia</button>
    <a href=\"/profil\">Profil</a>
  </nav>
</header>

W aplikacji nagłówek może zmieniać się zależnie od widoku, ale powinien zachować spójne funkcje.

Mega menu w headerze

Mega menu to rozbudowany panel pokazujący wiele kategorii i podkategorii. Sprawdza się w dużych sklepach, portalach i serwisach korporacyjnych.

Przykładowa struktura:

<nav aria-label=\"Główna nawigacja\">
  <ul>
    <li>
      <button
        type=\"button\"
        aria-expanded=\"false\"
        aria-controls=\"products-menu\"
      >
        Produkty
      </button>

      <div id=\"products-menu\" hidden>
        <section>
          <h2>Dom</h2>
          <a href=\"/meble\">Meble</a>
          <a href=\"/oswietlenie\">Oświetlenie</a>
        </section>

        <section>
          <h2>Ogród</h2>
          <a href=\"/narzedzia\">Narzędzia</a>
          <a href=\"/meble-ogrodowe\">Meble ogrodowe</a>
        </section>
      </div>
    </li>
  </ul>
</nav>

Mega menu musi być obsługiwane klawiaturą, zamykane klawiszem Escape i odpowiednio zarządzać fokusem.

Dropdown menu w headerze

Rozwijane menu powinno być zbudowane tak, aby działało nie tylko po najechaniu myszą.

Niewłaściwe rozwiązanie polegające wyłącznie na :hover może być niedostępne dla użytkowników klawiatury i ekranów dotykowych.

Lepsze podejście wykorzystuje przycisk:

<button
  type=\"button\"
  aria-expanded=\"false\"
  aria-controls=\"services-menu\"
>
  Usługi
</button>

<ul id=\"services-menu\" hidden>
  <li><a href=\"/strony-internetowe\">Strony internetowe</a></li>
  <li><a href=\"/sklepy\">Sklepy internetowe</a></li>
  <li><a href=\"/seo\">SEO</a></li>
</ul>

JavaScript powinien przełączać atrybut hidden oraz aria-expanded.

Breadcrumbs a header

Okruszki nawigacyjne mogą znaleźć się w headerze artykułu lub podstrony, ale często lepiej umieścić je nad nim.

<nav aria-label=\"Okruszki\">
  <ol>
    <li><a href=\"/\">Strona główna</a></li>
    <li><a href=\"/blog\">Blog</a></li>
    <li aria-current=\"page\">HTML header</li>
  </ol>
</nav>

<header class=\"page-header\">
  <h1>HTML header</h1>
  <p>Przewodnik po semantycznym nagłówku strony.</p>
</header>

Aktualna strona może zostać oznaczona atrybutem aria-current=\"page\".

HTML header i logo SVG

Logo w formacie SVG jest skalowalne i zwykle dobrze sprawdza się w headerze.

Najprostsze osadzenie:

<a href=\"/\" class=\"logo\">
  <img
    src=\"/assets/logo.svg\"
    alt=\"Nazwa firmy\"
    width=\"160\"
    height=\"48\"
  >
</a>

Podanie wymiarów pomaga ograniczyć przesunięcia układu podczas ładowania.

SVG można również umieścić bezpośrednio w kodzie, co pozwala łatwo zmieniać kolor przez CSS. Należy jednak zadbać o poprawną dostępność.

Obrazy w headerze

Jeśli header zawiera zdjęcie lub grafikę, warto zoptymalizować plik.

Należy zwrócić uwagę na:

właściwe wymiary;
kompresję;
nowoczesny format;
poprawny tekst alternatywny;
deklarację szerokości i wysokości;
opóźnione ładowanie tylko wtedy, gdy ma sens;
dostosowanie do ekranów o różnej gęstości.

Logo znajdujące się wysoko na stronie zwykle nie powinno być ładowane z dużym opóźnieniem, ponieważ może wpływać na pierwsze wrażenie i stabilność układu.

HTML header a wydajność strony

Header jest ładowany na każdej podstronie, dlatego jego optymalizacja ma duże znaczenie.

Najczęstsze źródła problemów to:

ciężkie biblioteki menu;
niepotrzebne animacje;
duże logo;
wiele zewnętrznych fontów;
skomplikowane mega menu;
rozbudowane skrypty śledzące;
automatycznie odtwarzane wideo;
duża liczba ikon pobieranych z zewnętrznej biblioteki.

Warto ograniczyć skrypty do niezbędnego minimum i nie obciążać headera efektami, które nie wspierają użyteczności.

Minimalistyczny header

Minimalistyczny nagłówek może zawierać jedynie logo, kilka linków i jeden przycisk.

<header class=\"minimal-header\">
  <a href=\"/\" class=\"logo\">Studio Forma</a>

  <nav aria-label=\"Główne menu\">
    <a href=\"/projekty\">Projekty</a>
    <a href=\"/studio\">Studio</a>
    <a href=\"/kontakt\">Kontakt</a>
  </nav>
</header>

Minimalizm sprawdza się szczególnie w portfolio, stronach kreatywnych i prostych serwisach usługowych. Nie powinien jednak prowadzić do ukrywania ważnych informacji.

Wielopoziomowy header

Niektóre strony wykorzystują dwa lub trzy poziomy nagłówka:

pasek informacyjny;
główny obszar z logo i narzędziami;
menu kategorii.

Przykład:

<header class=\"site-header\">
  <div class=\"top-bar\">
    <p>Darmowa dostawa od 200 zł</p>
  </div>

  <div class=\"main-header\">
    <a href=\"/\" class=\"logo\">Sklep Example</a>
    <form role=\"search\">...</form>
    <nav aria-label=\"Konto użytkownika\">...</nav>
  </div>

  <nav class=\"category-menu\" aria-label=\"Kategorie\">
    ...
  </nav>
</header>

Taki układ może być funkcjonalny, ale na telefonie powinien zostać znacznie uproszczony.

Top bar nad headerem

Top bar to wąski pasek zawierający promocję, dane kontaktowe lub ważny komunikat.

<div class=\"top-bar\">
  <p>Bezpłatna konsultacja dla nowych klientów</p>
  <a href=\"/kontakt\">Umów termin</a>
</div>

Może znajdować się przed headerem albo wewnątrz niego. Jeśli komunikat można zamknąć, przycisk powinien być dostępny:

<button type=\"button\" aria-label=\"Zamknij komunikat\">
  ×
</button>

Nie należy stosować zbyt wielu pasków, ponieważ zmniejszają obszar widocznej treści.

Header z wyszukiwarką

Wyszukiwarka powinna mieć poprawną etykietę:

<form class=\"header-search\" role=\"search\" action=\"/search\">
  <label for=\"site-search\">Szukaj w serwisie</label>
  <input
    id=\"site-search\"
    name=\"q\"
    type=\"search\"
    autocomplete=\"off\"
  >
  <button type=\"submit\">Szukaj</button>
</form>

Jeśli etykieta ma być niewidoczna wizualnie, można zastosować klasę ukrywającą ją w sposób dostępny dla czytników ekranu:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Placeholder nie zastępuje prawidłowej etykiety.

Header z przełącznikiem języka

W serwisach wielojęzycznych przełącznik powinien jasno wskazywać dostępne wersje.

<nav aria-label=\"Wybór języka\">
  <a href=\"/pl/\" lang=\"pl\" hreflang=\"pl\" aria-current=\"page\">
    Polski
  </a>
  <a href=\"/en/\" lang=\"en\" hreflang=\"en\">
    English
  </a>
</nav>

Nie należy opierać przełącznika wyłącznie na flagach, ponieważ język nie zawsze odpowiada jednemu krajowi.

Header z trybem ciemnym

Przełącznik motywu może znajdować się w nagłówku:

<button
  type=\"button\"
  class=\"theme-toggle\"
  aria-label=\"Włącz tryb ciemny\"
  aria-pressed=\"false\"
>
  <span aria-hidden=\"true\">◐</span>
</button>

Stan aria-pressed powinien być aktualizowany przez JavaScript. Preferencję można zachować lokalnie, ale warto również uwzględniać ustawienie systemowe użytkownika.

Header z logowaniem

Przycisk logowania powinien jasno komunikować funkcję:

<nav aria-label=\"Konto użytkownika\">
  <a href=\"/logowanie\">Zaloguj się</a>
  <a href=\"/rejestracja\">Załóż konto</a>
</nav>

Po zalogowaniu:

<nav aria-label=\"Konto użytkownika\">
  <a href=\"/konto\">Moje konto</a>
  <form action=\"/wyloguj\" method=\"post\">
    <button type=\"submit\">Wyloguj się</button>
  </form>
</nav>

Wylogowanie zmienia stan sesji, dlatego w niektórych aplikacjach lepiej realizować je jako żądanie POST zamiast zwykłego linku.

Header z koszykiem

Koszyk może wskazywać liczbę produktów:

<a href=\"/koszyk\" class=\"cart-link\">
  Koszyk
  <span aria-label=\"3 produkty w koszyku\">3</span>
</a>

Nie należy przekazywać znaczenia wyłącznie przez ikonę lub kolor. Informacja powinna być zrozumiała również dla użytkownika czytnika ekranu.

Header z ikonami mediów społecznościowych

Ikony społecznościowe zwykle nie są najważniejszą funkcją nagłówka. Jeśli są używane, powinny mieć dostępne nazwy:

<a href=\"https://example.com\" aria-label=\"Profil firmy na LinkedIn\">
  <svg aria-hidden=\"true\">...</svg>
</a>

Otwarcie linku w nowej karcie powinno być stosowane rozważnie. Jeśli jest konieczne, można poinformować użytkownika o takim zachowaniu.

Struktura menu w HTML

Menu najczęściej tworzy się jako listę:

<nav aria-label=\"Główna nawigacja\">
  <ul>
    <li><a href=\"/\">Start</a></li>
    <li><a href=\"/uslugi\">Usługi</a></li>
    <li><a href=\"/kontakt\">Kontakt</a></li>
  </ul>
</nav>

Lista odzwierciedla grupę powiązanych opcji. CSS może usunąć standardowe punktory.

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

Oznaczanie aktywnej strony w menu

Aktualny link warto oznaczyć atrybutem aria-current:

<a href=\"/blog\" aria-current=\"page\">Blog</a>

Można również zastosować styl:

.main-nav a[aria-current=\"page\"] {
  font-weight: 700;
  text-decoration: underline;
}

Nie należy polegać wyłącznie na zmianie koloru.

Typografia w headerze

Nagłówek powinien być czytelny, nawet jeśli wykorzystuje charakterystyczną typografię marki.

Warto zadbać o:

odpowiednią wielkość tekstu;
czytelne odstępy;
kontrast;
unikanie bardzo cienkich krojów;
ograniczenie liczby fontów;
poprawne ładowanie;
dostosowanie do małych ekranów.

Tekst menu nie powinien być zbyt mały. Ważne elementy interaktywne muszą być łatwe do zauważenia.

Rozmiar obszarów klikalnych

Link może mieć niewielką ikonę, ale jego obszar interakcji powinien być odpowiednio duży.

.icon-button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Jest to szczególnie ważne na urządzeniach dotykowych.

Animacje w headerze

Animacje mogą poprawić odbiór, jeśli są subtelne i funkcjonalne.

Można animować:

otwieranie menu;
zmianę ikony;
pojawienie się pola wyszukiwania;
zmianę tła po przewinięciu;
podkreślenie aktywnego linku.

Należy unikać:

ciągłego pulsowania;
gwałtownych ruchów;
przesuwania całego układu;
długich opóźnień;
efektów utrudniających interakcję.

Warto respektować preferencję ograniczania ruchu:

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }

  .site-header,
  .main-nav {
    transition: none;
  }
}

Z-index w headerze

Sticky lub fixed header często wymaga wyższego z-index, aby pozostawać nad treścią.

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

Nie warto stosować przypadkowo bardzo wysokich wartości. Lepiej stworzyć logiczną skalę warstw dla:

treści;
headera;
dropdownów;
modalnych okien;
powiadomień.

Problemy z warstwami mogą wynikać z nowych kontekstów stosu tworzonych przez właściwości takie jak transform, opacity czy position.

Najczęstsze błędy w kodzie HTML header

Używanie div zamiast headera bez potrzeby

<div class=\"header\">
  ...
</div>

Nie jest to zawsze błąd, ale jeśli element rzeczywiście pełni funkcję nagłówka dokumentu lub sekcji, lepiej zastosować <header>.

Umieszczanie headera w head

Niepoprawna konstrukcja:

<head>
  <header>...</header>
</head>

Element <header> powinien znajdować się w <body>.

Traktowanie headera jako nagłówka tekstowego

<header> nie zastępuje <h1> lub <h2>. Jest kontenerem, w którym mogą znajdować się nagłówki.

Brak nav wokół głównego menu

Sama lista linków działa, ale znacznik <nav> lepiej opisuje jej funkcję.

Menu działające tylko po najechaniu

Takie menu może być niedostępne na telefonach i dla klawiatury.

Klikalny div zamiast buttona

<div onclick=\"openMenu()\">Menu</div>

Lepsze rozwiązanie:

<button type=\"button\" onclick=\"openMenu()\">Menu</button>

Nieczytelne ikony bez etykiet

Ikona hamburgera, koszyka lub lupy powinna mieć dostępną nazwę.

Zbyt wiele linków

Przeładowane menu utrudnia decyzję i orientację.

Brak testów mobilnych

Header może wyglądać dobrze na szerokim ekranie, ale rozjeżdżać się na telefonie.

Zbyt wysoki sticky header

Duży przyklejony nagłówek może zajmować znaczną część ekranu.

Kiedy nie używać elementu header?

Nie każdy element znajdujący się u góry sekcji musi być headerem.

Znacznik może być niepotrzebny, gdy:

jest to wyłącznie dekoracyjny kontener;
nie pełni funkcji wprowadzającej;
zawiera przypadkową grupę elementów;
lepiej opisuje go inny znacznik;
jest to tylko pojedynczy nagłówek bez dodatkowej struktury.

Przykład:

<section>
  <h2>Oferta</h2>
  ...
</section>

Nie trzeba dodawać <header>, jeśli sekcja zawiera tylko jeden nagłówek i zastosowanie kontenera nie wnosi dodatkowej wartości.

Czy header może znajdować się w footerze?

Semantycznie taka konstrukcja zwykle nie ma sensu. Header reprezentuje wprowadzenie do dokumentu lub sekcji, natomiast footer zawiera informacje końcowe.

Element <header> nie powinien być potomkiem <footer>. Podobnie nie powinien znajdować się wewnątrz innego <header>.

Jeżeli w stopce potrzebny jest tytuł grupy linków, wystarczy użyć odpowiedniego nagłówka:

<footer>
  <section>
    <h2>Informacje</h2>
    ...
  </section>
</footer>

Header w komponencie React

W React element semantyczny zapisuje się tak samo:

function SiteHeader() {
  return (
    <header className=\"site-header\">
      <a href=\"/\" className=\"logo\">
        Firma
      </a>

      <nav aria-label=\"Główna nawigacja\">
        <a href=\"/oferta\">Oferta</a>
        <a href=\"/kontakt\">Kontakt</a>
      </nav>
    </header>
  );
}

Należy pamiętać o używaniu className zamiast class.

W aplikacjach korzystających z routingu warto zastąpić zwykłe linki komponentem dostarczanym przez framework, o ile zachowuje poprawną semantykę i dostępność.

Header w Vue

Przykład komponentu:

<template>
  <header class=\"site-header\">
    <RouterLink to=\"/\" class=\"logo\">
      Firma
    </RouterLink>

    <nav aria-label=\"Główna nawigacja\">
      <RouterLink to=\"/oferta\">Oferta</RouterLink>
      <RouterLink to=\"/kontakt\">Kontakt</RouterLink>
    </nav>
  </header>
</template>

Logikę mobilnego menu można obsługiwać stanem komponentu, aktualizując jednocześnie atrybut aria-expanded.

Header w szablonie WordPress

W klasycznych motywach WordPress nagłówek bywa umieszczany w pliku header.php.

Przykład:

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset=\"<?php bloginfo(\'charset\'); ?>\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<header class=\"site-header\">
  <a href=\"<?php echo esc_url(home_url(\'/\')); ?>\">
    <?php bloginfo(\'name\'); ?>
  </a>

  <nav aria-label=\"Główna nawigacja\">
    <?php
      wp_nav_menu([
        \'theme_location\' => \'primary\',
        \'container\' => false
      ]);
    ?>
  </nav>
</header>

Ważne jest rozróżnienie pliku header.php, który może zawierać również początek dokumentu i sekcję <head>, od samego elementu <header>.

Dynamiczny header

Niektóre serwisy zmieniają header zależnie od:

stanu logowania;
typu podstrony;
urządzenia;
roli użytkownika;
wybranego języka;
etapu procesu zakupowego;
przewinięcia strony.

Dynamiczność powinna być przewidywalna. Najważniejsze elementy nie powinny nagle zmieniać miejsca bez wyraźnego powodu.

Header w procesie zakupowym

W koszyku lub podczas płatności często stosuje się uproszczony header. Może zawierać jedynie logo, informację o bezpieczeństwie i kontakt do pomocy.

Celem jest ograniczenie elementów odciągających uwagę.

<header class=\"checkout-header\">
  <a href=\"/\" class=\"logo\">Sklep Example</a>
  <p>Bezpieczne płatności</p>
  <a href=\"/pomoc\">Potrzebujesz pomocy?</a>
</header>

Nie należy jednak utrudniać użytkownikowi powrotu do sklepu ani ukrywać ważnych informacji.

Header na landing page

Landing page często ma minimalistyczny nagłówek:

logo;
jeden przycisk;
ewentualnie telefon;
brak rozbudowanego menu.

Przykład:

<header class=\"landing-header\">
  <a href=\"/\" class=\"logo\">Marka</a>
  <a href=\"#formularz\" class=\"cta\">Umów rozmowę</a>
</header>

Ograniczenie nawigacji może zwiększyć koncentrację na głównym celu, ale strona nadal powinna pozostawać przejrzysta i wiarygodna.

Header a prawa autorskie i znaki towarowe

Logo, nazwy i grafiki umieszczone w headerze mogą być chronione. Należy korzystać z materiałów, do których właściciel strony posiada prawa.

Nie warto pobierać przypadkowych ikon, fontów lub logotypów bez sprawdzenia licencji. Dotyczy to szczególnie komercyjnych motywów i bibliotek graficznych.

Testowanie HTML header

Header należy sprawdzić w różnych warunkach.

Ważne testy obejmują:

szeroki monitor;
laptop;
tablet;
telefon;
orientację pionową i poziomą;
obsługę klawiaturą;
powiększenie tekstu;
tryb wysokiego kontrastu;
wolne połączenie;
wyłączony JavaScript;
różne przeglądarki;
zalogowanego i niezalogowanego użytkownika.

Warto także sprawdzić bardzo długie nazwy linków, wersje językowe oraz sytuację, w której użytkownik zwiększa domyślny rozmiar czcionki.

Debugowanie headera

Najczęstsze problemy to:

menu wychodzące poza ekran;
dropdown ukrywający się pod treścią;
sticky header, który nie działa;
nieprawidłowy z-index;
przesunięcie treści pod fixed header;
brak reakcji przycisku mobilnego;
skaczący układ;
nieczytelny fokus;
niewłaściwa kolejność elementów;
konflikt stylów.

Narzędzia deweloperskie przeglądarki pozwalają sprawdzić strukturę DOM, style, wymiary i aktywne reguły CSS.

Przykład kompletnego dostępnego headera

<a class=\"skip-link\" href=\"#main-content\">
  Przejdź do głównej treści
</a>

<header class=\"site-header\">
  <div class=\"header-container\">
    <a href=\"/\" class=\"logo\" aria-label=\"Example — strona główna\">
      <img
        src=\"/assets/logo.svg\"
        alt=\"Example\"
        width=\"150\"
        height=\"44\"
      >
    </a>

    <button
      class=\"menu-toggle\"
      type=\"button\"
      aria-expanded=\"false\"
      aria-controls=\"main-navigation\"
    >
      <span aria-hidden=\"true\">☰</span>
      <span class=\"visually-hidden\">Otwórz menu</span>
    </button>

    <nav
      id=\"main-navigation\"
      class=\"main-nav\"
      aria-label=\"Główna nawigacja\"
    >
      <ul>
        <li><a href=\"/oferta\">Oferta</a></li>
        <li><a href=\"/realizacje\">Realizacje</a></li>
        <li><a href=\"/o-nas\">O nas</a></li>
        <li><a href=\"/blog\">Blog</a></li>
        <li><a href=\"/kontakt\">Kontakt</a></li>
      </ul>
    </nav>

    <a href=\"/wycena\" class=\"header-cta\">
      Poproś o wycenę
    </a>
  </div>
</header>

<main id=\"main-content\">
  <h1>Projektujemy funkcjonalne strony internetowe</h1>
</main>

Taki przykład stanowi dobrą bazę, ale wymaga jeszcze stylów oraz obsługi menu mobilnego.

Przykładowy CSS kompletnego headera

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 2000;
  padding: 12px 16px;
  background: #ffffff;
  color: #000000;
}

.skip-link:focus {
  top: 16px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid #dddddd;
}

.header-container {
  width: min(1200px, calc(100% - 32px));
  min-height: 72px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo {
  flex: 0 0 auto;
}

.logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.main-nav {
  margin-left: auto;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav a,
.header-cta {
  color: #222222;
  text-decoration: none;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid currentColor;
  border-radius: 6px;
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
}

.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 800px) {
  .header-container {
    min-height: 64px;
    flex-wrap: wrap;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .main-nav {
    display: none;
    width: 100%;
    margin-left: 0;
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 12px;
  }

  .main-nav a {
    display: block;
    padding: 12px 0;
  }

  .header-cta {
    display: none;
  }
}

Przykładowy JavaScript menu mobilnego

const toggle = document.querySelector(\".menu-toggle\");
const navigation = document.querySelector(\"#main-navigation\");

if (toggle && navigation) {
  toggle.addEventListener(\"click\", () => {
    const isOpen = toggle.getAttribute(\"aria-expanded\") === \"true\";

    toggle.setAttribute(\"aria-expanded\", String(!isOpen));
    navigation.classList.toggle(\"is-open\", !isOpen);

    const label = toggle.querySelector(\".visually-hidden\");

    if (label) {
      label.textContent = isOpen ? \"Otwórz menu\" : \"Zamknij menu\";
    }
  });
}

Kod sprawdza istnienie elementów, przełącza stan oraz aktualizuje opis przycisku.

W bardziej rozbudowanym wdrożeniu warto również:

zamykać menu klawiszem Escape;
przenosić fokus w odpowiedni sposób;
zamykać menu po kliknięciu linku;
reagować na zmianę szerokości ekranu;
blokować niepotrzebne przewijanie tła.

HTML header bez JavaScript

Prosty header nie potrzebuje JavaScriptu. Jeśli menu mieści się na ekranie, można zbudować je wyłącznie w HTML i CSS.

W projektach wymagających menu mobilnego można rozważyć element <details>:

<header>
  <a href=\"/\">Logo</a>

  <details>
    <summary>Menu</summary>

    <nav aria-label=\"Główna nawigacja\">
      <a href=\"/oferta\">Oferta</a>
      <a href=\"/kontakt\">Kontakt</a>
    </nav>
  </details>
</header>

Takie rozwiązanie ma wbudowaną obsługę otwierania i zamykania, ale wymaga starannego stylowania i testowania.

Walidacja kodu headera

Poprawność HTML można sprawdzić za pomocą walidatora. Warto zwrócić uwagę na:

prawidłowe zagnieżdżenie elementów;
unikalne identyfikatory;
zamknięcie znaczników;
poprawne wartości atrybutów;
brak elementów interaktywnych zagnieżdżonych w innych interaktywnych elementach;
poprawną strukturę list;
zgodność formularzy z etykietami.

Przykładowo nie należy umieszczać przycisku wewnątrz linku:

<a href=\"/kontakt\">
  <button type=\"button\">Kontakt</button>
</a>

Wystarczy ostylować sam link jak przycisk.

Header i progresywne ulepszanie

Podstawowe funkcje powinny działać nawet wtedy, gdy część skryptów się nie załaduje. Linki nawigacyjne powinny pozostać prawdziwymi linkami, a formularz wyszukiwania powinien móc zostać wysłany standardową metodą.

JavaScript może ulepszać doświadczenie, ale nie powinien bez potrzeby zastępować podstawowej funkcjonalności HTML.

Jak nazwać klasy CSS w headerze?

Nazewnictwo powinno być spójne z konwencją projektu.

Przykłady:

.site-header
.site-header__logo
.site-header__navigation
.site-header__actions
.site-header__toggle

Można stosować BEM, klasy użytkowe albo własny system. Najważniejsze, aby nazwy były czytelne i nie zależały wyłącznie od wyglądu.

Lepsza nazwa:

.header-actions

niż:

.right-red-box

Pierwsza opisuje funkcję, a druga aktualny wygląd i położenie, które mogą się zmienić.

Header w systemie projektowym

W większych projektach nagłówek powinien być zdefiniowany jako komponent posiadający warianty.

Możliwe warianty to:

standardowy;
transparentny;
sklepowy;
aplikacyjny;
uproszczony;
landing page;
proces zakupowy;
mobilny.

System powinien określać:

wysokość;
odstępy;
typografię;
stany linków;
zachowanie menu;
punkty przełamania;
rodzaje przycisków;
sposób prezentacji logo;
zasady dostępności.

Dzięki temu wszystkie widoki pozostają spójne.

Jak ocenić jakość HTML headera?

Dobry header powinien spełniać kilka warunków:

użytkownik od razu rozpoznaje markę;
najważniejsze sekcje są łatwe do znalezienia;
menu działa na telefonie;
wszystkie funkcje są dostępne z klawiatury;
fokus jest widoczny;
logo prowadzi do strony głównej;
linki mają zrozumiałe nazwy;
header nie zasłania treści;
kod jest semantyczny;
skrypty nie spowalniają strony;
układ pozostaje stabilny;
kontrast jest wystarczający;
elementy dotykowe są odpowiednio duże;
nawigacja zachowuje spójność na podstronach.

Kiedy przebudować header?

Modernizacja może być potrzebna, gdy:

menu nie działa na telefonach;
użytkownicy nie znajdują ważnych podstron;
nagłówek zajmuje zbyt dużo miejsca;
struktura rozrosła się bez planu;
pojawiły się nowe cele biznesowe;
zmieniła się identyfikacja wizualna;
kod jest trudny w utrzymaniu;
dropdowny są niedostępne;
strona ładuje się wolno;
header zachowuje się inaczej w różnych przeglądarkach.

Przebudowa nie powinna polegać wyłącznie na zmianie wyglądu. Warto wcześniej przeanalizować nawigację, statystyki, zachowanie użytkowników i najważniejsze cele strony.

HTML header jako część doświadczenia użytkownika

Header jest jednym z pierwszych elementów, które użytkownik zauważa. Wpływa na pierwsze wrażenie, orientację i ocenę wiarygodności witryny.

Dobry nagłówek odpowiada na kilka pytań:

gdzie jestem;
do kogo należy strona;
co mogę tutaj zrobić;
jak znaleźć interesującą mnie treść;
gdzie się zalogować;
jak skontaktować się z firmą;
jak wrócić na stronę główną.

Jeżeli użytkownik musi długo szukać odpowiedzi, header nie spełnia swojej funkcji.

HTML header jako element identyfikacji marki

Logo, kolorystyka, typografia i sposób prezentacji menu tworzą charakterystyczny obraz marki. Header może być bardzo prosty, ale powinien pozostawać spójny z pozostałymi materiałami.

Marka premium może zastosować więcej przestrzeni i spokojną typografię. Sklep dziecięcy może użyć żywszych elementów. Serwis finansowy powinien budować poczucie bezpieczeństwa i porządku.

Warstwa wizualna nie może jednak ograniczać czytelności i dostępności.

Przyszłościowe projektowanie headera

Header powinien być gotowy na rozwój strony. Warto przewidzieć:

dodatkową wersję językową;
logowanie użytkowników;
nową kategorię usług;
wyszukiwarkę;
rozbudowę sklepu;
zmianę logo;
wersję mobilną;
komunikaty systemowe;
personalizację;
nowe role użytkowników.

Nie oznacza to dodawania wszystkich funkcji od początku. Kod powinien być jednak uporządkowany, aby rozbudowa nie wymagała całkowitej przebudowy.

Znaczenie prostoty w HTML header

Najbardziej skuteczny header nie zawsze jest najbardziej rozbudowany. Jego zadaniem jest prowadzenie użytkownika, a nie prezentowanie wszystkich możliwości serwisu jednocześnie.

Warto ograniczyć menu do najważniejszych wyborów, zachować wyraźną hierarchię i umieścić jeden dominujący przycisk działania. Pozostałe informacje mogą znaleźć się w menu dodatkowym, stopce albo na odpowiednich podstronach.

HTML header powinien być semantyczny, czytelny, responsywny i dostępny. Poprawnie użyty znacznik <header> pomaga opisać strukturę dokumentu, ale o jakości całego rozwiązania decydują także nawigacja, hierarchia nagłówków, sposób działania menu, wydajność oraz dostosowanie do potrzeb użytkownika.

Najważniejsze jest rozróżnienie między <head> a <header>. Pierwszy element przechowuje informacje o dokumencie, a drugi oznacza widoczną część wprowadzającą do strony lub sekcji. Na jednym dokumencie może znajdować się więcej niż jeden header, o ile każdy z nich ma czytelny kontekst.

Dobrze zaprojektowany nagłówek nie musi być skomplikowany. Powinien szybko przedstawiać markę, prowadzić do najważniejszych treści i pozostawać wygodny niezależnie od urządzenia. To właśnie połączenie semantyki HTML, przemyślanego UX i poprawnego CSS sprawia, że header staje się funkcjonalnym fundamentem całej witryny.