Nagłówki HTML (H1–H6)

Nagłówki HTML (H1–H6) to sześć znaczników — od <h1> do <h6> — które tworzą hierarchiczną strukturę treści na stronie internetowej. H1 oznacza najważniejszy, główny tytuł dokumentu, a kolejne poziomy (H2, H3 …) definiują coraz bardziej szczegółowe podsekcje. To nie jest wyłącznie formatowanie wizualne: nagłówki niosą znaczenie semantyczne, opisujące o czym jest dana część strony.

Jak działają nagłówki H1–H6?

Nagłówki działają jak spis treści wpleciony w kod HTML. Przeglądarka domyślnie renderuje je z malejącym rozmiarem czcionki, ale kluczowa jest ich rola strukturalna. Roboty wyszukiwarek analizują kolejność i zagnieżdżenie nagłówków, aby zrozumieć hierarchię tematów. Poprawna struktura zakłada, że po H1 następuje H2, a dopiero potem H3 — nie przeskakuje się poziomów w dół (np. z H2 na H4) tylko po to, by uzyskać mniejszą czcionkę; do tego służy CSS.

Nagłówki mają też fundamentalne znaczenie dla dostępności cyfrowej. Osoby korzystające z czytników ekranu nawigują po stronie właśnie za pomocą nagłówków, przeskakując między sekcjami skrótem klawiszowym. Chaotyczna lub pusta hierarchia sprawia, że taka nawigacja staje się niemożliwa, co narusza wytyczne WCAG.

Zastosowanie w praktyce

Przy tworzeniu strony lub wpisu blogowego H1 powinien zawierać główną frazę kluczową i jednoznacznie komunikować temat — najczęściej jest to tytuł artykułu. Śródtytuły H2 dzielą treść na logiczne bloki (np. „Jak to działa”, „Zastosowanie”), a H3 uszczegóławiają je w razie potrzeby. Taka struktura ułatwia skanowanie tekstu wzrokiem i zwiększa szansę na wyświetlenie fragmentów rozszerzonych w Google.

W systemach CMS, takich jak WordPress, edytor często automatycznie przypisuje H1 do tytułu wpisu — warto to sprawdzić, aby uniknąć duplikacji dwóch H1 na jednej stronie. Dobrą praktyką jest audyt hierarchii nagłówków narzędziami do analizy on-page, które wykrywają brakujące H1, przeskoki poziomów i puste nagłówki.