Tagi HTML: header

Element <header> w HTML5 to semantyczny kontener wprowadzający sekcję lub całą stronę. Zwykle zawiera tytuły, logo, nawigację lub metadane wprowadzające, co poprawia czytelność kodu, dostępność i pozycjonowanie w wyszukiwarkach.

Różnica między `<header>` a `<head>`

Częsty błąd początkujących to mylenie <header> (widoczny nagłówek w treści strony) z <head> (niewidoczna sekcja metadanych w dokumencie HTML). Element <head> zawiera meta tagi, tytuł strony i linki do stylów/CSS/JavaScript, ale nie jest wyświetlany użytkownikowi. Z kolei <header> to blok wizualny wewnątrz <body>, idealny na logo, menu czy podtytuły.

Przykładowa struktura dokumentu z obu elementami:

<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Przykładowa strona z nagłówkiem HTML"> <title>Moja strona z headerem</title> </head> <body> <header>  </header>  </body> </html>

<head> zapewnia metadane dla SEO i przeglądarek, np. charset="UTF-8" dla poprawnego kodowania polskich znaków czy viewport dla responsywności.

Podstawowe zastosowanie – nagłówek całej strony

<header> jako nagłówek strony głównej zazwyczaj obejmuje logo, główny tytuł (<h1>) i nawigację (<nav>). To semantyczne rozwiązanie zastępuje niesemantyczne <div>, poprawiając dostępność dla czytników ekranu.

Prosty przykład nagłówka strony:

<header> <img src="logo.png" alt="Logo firmy"> <h1>Nazwa strony</h1> <nav> <a href="strona1.html">Strona 1</a> <a href="strona2.html">Strona 2</a> <a href="kontakt.html">Kontakt</a> </nav> </header>

W powyższym przykładzie kluczowe elementy nagłówka to:

<img> – logo z atrybutem alt dla dostępności;
<h1> – najważniejszy nagłówek, tylko jeden na stronę dla SEO;
<nav> – lista linków nawigacyjnych z atrybutem href.

Przejście od niesemantycznego układu (np. <div> + role="banner") do semantyki poprawia indeksację w Google i działanie ARIA bez dodatkowych ról.

`<header>` w sekcjach i artykułach

Element <header> nie jest ograniczony do góry strony – może wprowadzać dowolną sekcję, artykuł czy <aside>. Nie tworzy nowej sekcji strukturalnej (jak <section>), ale naturalnie grupuje elementy wprowadzające.

Przykład nagłówka sekcji:

<section> <header> <h2>Nagłówek sekcji</h2> <p>Podtytuł lub data publikacji: 20 marca 2026</p> <img src="autor.jpg" alt="Autor artykułu"> </header> <p>Główna treść sekcji ze szczegółami...</p> </section>

Tutaj <header> zawiera tytuł (<h2>), podtytuł i obraz autora, co ułatwia nawigację po dłuższych stronach.

Bardziej złożony przykład z wieloma sekcjami w <main>:

<body> <header>  <h1>Warsztaty uczenia maszynowego</h1> <nav> <a href="#rejestracja">Rejestracja</a> <a href="#o-nas">O nas</a> </nav> </header>


  <main>

    <article>

      <header>

        <h2>Pierwszy artykuł</h2>

        <p>Opublikowano: 15.03.2026</p>

      </header>

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

    </article>
    <article>

      <header>

        <h2>Drugi artykuł</h2>

      </header>

      <p>Inna treść...</p>

    </article>

  </main>

<footer>Stopka</footer> </body>

Struktura z <header>, <nav>, <main>, <article> i <footer> to sprawdzony wzorzec dla blogów, serwisów newsowych i portfolio.

Zalety semantycznego `<header>`: SEO, dostępność i responsywność

Używanie <header> ma kluczowe znaczenie dla SEO, bo wyszukiwarki lepiej rozumieją strukturę strony, indeksując tytuły i nawigację. Poprawia też dostępność (WCAG): czytniki ekranu rozpoznają globalny nagłówek jako banner, więc dodatkowe role ARIA zwykle nie są potrzebne.

Dla responsywności (CSS/JavaScript) nadaje się do media queries:

header { display: flex; justify-content: space-between; flex-wrap: wrap; } @media (max-width: 768px) { header nav { order: 2; } }

JavaScript może dynamicznie ukrywać nawigację:

document.querySelector('header nav').addEventListener('click', function() { this.style.display = 'none'; });

Najczęstsze błędy i dobre praktyki

Aby zachować spójność i wysoką dostępność interfejsu, zwróć uwagę na poniższe zasady:

Błąd – wielokrotne <h1> w różnych <header> – używaj tylko jednego głównego <h1>;
Błąd – <header> jako pojedynczy element (np. tylko logo) – powinien grupować kilka;
Dobra praktyka – zawsze w <body>, nie w <head>;
Dobra praktyka – atrybut lang="pl" w <html> dla polskich stron;
Nie używaj – <header> do nagłówków tekstowych – to <h1>–<h6>.

Pełny przykład responsywnego nagłówka z menu hamburgerowym (prosty JS):

<header class="site-header"> <h1>Mój blog</h1> <button id="menu-toggle">☰</button> <nav id="main-nav"> <a href="#home">Start</a> <a href="#blog">Blog</a> </nav> </header>

<script> document.getElementById('menu-toggle').onclick = function() { const nav = document.getElementById('main-nav'); nav.style.display = nav.style.display === 'block' ? 'none' : 'block'; }; </script>

Integracja z meta tagami i WordPress

Choć <head> to osobny element, meta tagi w nim (np. description, keywords) współpracują z <header> dla SEO. W WordPress kod HTML w nagłówku możesz dodać za pomocą wtyczek lub pliku functions.php.

Różnica między <header> a <head>