Nagłówki <h1>-<h6> to znaczniki semantyczne określające poziom ważności tytułów sekcji w dokumencie.W odróżnieniu od zwykłego akapitu nagłówek sygnalizuje strukturę w DOM i nadaje treści znaczenie (semantykę).

Wygląd nagłówka to domena CSS (rozmiar, krój, marginesy), a znaczenie to domena HTML (np. <h2> oznacza podrozdział względem <h1>). Innymi słowy: styl możesz zmienić bez naruszania logiki, ale logiki nie buduje się klasą np. .big-text – tylko prawdziwymi znacznikami <h1>, <h2>, <h3>.

Słyszysz czasem, że nagłówek strony musi być gigantyczny? Nie musi. Estetykę zostaw CSS-owi, a semantykę – znacznikom.

Jedna główna myśl dokumentu w <h1>, a następnie logiczne stopniowanie: <h2> jako rozdziały, <h3> jako podrozdziały itd., bez skoków poziomów bez powodu.

Dobra praktyka: w obrębie strony trzymaj się spójnej hierarchii („rodzic-potomek”). <h1> wyznacza temat nadrzędny, <h2> rozwija go w sekcje, a <h3> – w szczegóły. Pominięcie poziomu bywa uzasadnione w rozbudowanych layoutach, ale jeśli nie masz konkretnego powodu, nie skacz z h2 od razu do h4. Taki skok rozbija outline i obniża czytelność.

Poprawny zarys (outline):

• <h1>: Temat strony
• <h2>: Wątek A
• <h3>: Detal A2
• <h3>: Detal A1
• <h2>: Wątek B

Błędny zarys:

• <h1>: Temat
• <h2>: Wątek
• <h4>: Detal (skok: brakuje h3)
• <h1>: Nowy wątek (drugi główny temat na tej samej stronie)

Używaj <section>, <article>, <header>, <nav>, <aside>, <footer> do tworzenia logicznych bloków, a nagłówków do tytułowania tych bloków.

Semantic HTML pomaga maszynom i ludziom. W praktyce:

• <section> grupuje spójny tematycznie blok i zwykle zawiera nagłówek (<h2>/<h3>).
• <article> to samodzielna jednostka (np. wpis bloga, karta produktu), też z własnym tytułem.
• <header> wewnątrz sekcji może zawierać tytuł oraz meta-informacje.
• <nav> wyznacza nawigację (menu, spis treści),
• <aside> – treści poboczne,
• <footer> – stopki (globalna lub sekcji).

Nagłówki w tych blokach budują outline: tytuł sekcji jest nagłówkiem (np. <h2>), a nie zwykłym <p> powiększonym CSS-em. To z pozoru drobiazg, który znacząco poprawia czytelność i parsowanie NLP.

Nagłówki pomagają robotom indeksującym zrozumieć temat i intencję, a użytkownikom – szybko znaleźć odpowiedź.

Co działa:

• Fraza kluczowa i jej warianty semantyczne w <h1>, kluczowych <h2> oraz w pierwszych 100 słowach. Podstawa dzisiejszego pozycjonowania stron internetowych,
• Nagłówki dopasowane do intencji wyszukiwania (informacyjna, transakcyjna, porównawcza).
• Pytania w nagłówkach (H2/H3) zwiększają szanse na featured snippet i lepsze dopasowanie do zapytań.

Co nie działa:

• Przeładowanie słowami kluczowymi. Lepiej naturalnie mieszać w nagłówkach HTML H1 H2 H3, niż powtarzać jeden wariant w kółko.
• Używanie nagłówków jako ozdobnika (“większa czcionka = nagłówek”). Roboty to wychwycą.

Spójna kolejność nagłówków to lepsza nawigacja dla czytników ekranu i użytkowników klawiatury.

Praktyka a11y:

• Zachowuj kolejność poziomów – bez nagłych skoków.
• Dodawaj id do istotnych nagłówków (tworzy anchor link do szybkiej nawigacji).
• Tam, gdzie to potrzebne, wspieraj się ARIA (np. aria-labelledby), ale nie zastępuj nią poprawnej semantyki.
• W CMS-ach (WordPress/Gutenberg, Divi, Elementor) pilnuj, by „style nagłówków” nie nadpisywały poziomów (H2 ≠ „większa czcionka H3”).
• Testuj na klawiaturze i z czytnikami ekranu – prosty przegląd outline’u często ujawnia problemy.

W edytorze wybieraj prawdziwe poziomy H1-H6 i sprawdzaj wynikowy HTML.

W WordPressie (Gutenberg/Divi/Elementor):

• Upewnij się, że nagłówek strony (<h1>) pochodzi z tytułu wpisu/szablonu i jest jeden.
• W treści używaj Bloku „Nagłówek” i ustawiaj poziom (H2/H3). Nie modyfikuj poziomu samym rozmiarem czcionki.
• Jeżeli korzystasz ze „Spisu treści” (wtyczka/TOC), trzymaj konsekwentnie H2 dla sekcji i H3 dla podrozdziałów – generator TOC używa właśnie tych poziomów.
• Kontroluj HTML w podglądzie (Tryb kodu). Szybko wyłapiesz „divy udające nagłówki”.

Uporządkuj poziomy, usuń „stylo-nagłówki”, skróć tytuły i pisz naturalnie.

• Błąd: Brak h1.
  Poprawka: Dodaj główny temat jako <h1> (np. tytuł wpisu).
• Błąd: Skoki poziomów (h2 → h4).
  Poprawka: Wstaw brakujące h3 albo przebuduj układ sekcji.
• Błąd: Używanie nagłówków do stylu.
  Poprawka: Zastosuj CSS/klasy do wyglądu; semantyka tylko znacznikami.
• Błąd: Zbyt długie nagłówki.
  Poprawka: Skróć do sedna (początek = najważniejsze słowa).
• Błąd: Przeładowanie frazami.
  Poprawka: Naturalny język + warianty semantyczne