Czym jest Nagłówki HTML (H1-H6)?

Nagłówki HTML (H1-H6) to elementy służące do porządkowania treści strony internetowej. Tworzą hierarchię podobną do tytułów, rozdziałów i podrozdziałów w książce. H1 oznacza najwyższy poziom, a H6 – najniższy.

Nagłówki pomagają użytkownikowi szybko zorientować się w zawartości strony, a przeglądarkom i technologiom wspomagającym przekazują informacje o strukturze dokumentu. Są jednym z podstawowych elementów HTML.

Jak działają nagłówki HTML H1-H6?

HTML udostępnia sześć poziomów nagłówków: od <h1> do <h6>. Ich numer określa miejsce w strukturze dokumentu, a nie po prostu wielkość tekstu.

• H1 – główny nagłówek strony lub dokumentu,
• H2 – główne sekcje znajdujące się pod H1,
• H3 – podsekcje należące do konkretnego H2,
• H4-H6 – kolejne poziomy stosowane, gdy treść wymaga głębszego podziału.

Jeżeli chcesz jedynie zmienić rozmiar albo wygląd tekstu, nie wybieraj poziomu nagłówka na podstawie tego, jak duża ma być czcionka. Za wygląd elementów odpowiada przede wszystkim CSS. Poziom H1-H6 powinien wynikać z miejsca danej sekcji w strukturze treści.

Jak budować hierarchię nagłówków?

Dobra struktura jest logiczna i pozwala łatwo rozpoznać, które sekcje są nadrzędne, a które rozwijają wcześniejszy temat. Przykładowa hierarchia może wyglądać tak:

<h1>Jak założyć sklep internetowy?</h1>

<h2>Wybór platformy sklepowej</h2>
<h3>WordPress i WooCommerce</h3>
<h3>PrestaShop</h3>

<h2>Konfiguracja płatności</h2>
<h3>Płatności online</h3>
<h3>Przelew tradycyjny</h3>

H3 rozwija tutaj sekcję oznaczoną jako H2. Gdy zaczyna się kolejny główny temat, struktura wraca do H2. Przy tworzeniu podsekcji warto unikać przeskoków, takich jak przejście bezpośrednio z H2 do H4.

Ile nagłówków H1 powinno być na stronie?

Najczęściej zaleca się stosowanie jednego głównego H1, który jasno opisuje temat strony. Pozwala to zachować prostą i łatwą do zrozumienia hierarchię. Pozostałe części treści można następnie organizować za pomocą H2, H3 i – jeśli jest taka potrzeba – dalszych poziomów.

Więcej niż jeden H1 nie oznacza automatycznie problemu z pozycjonowaniem. W praktyce jedna wyraźnie określona główna nazwa strony jest jednak czytelniejszym rozwiązaniem dla użytkowników, technologii wspomagających i osób zarządzających treścią.

Nagłówki HTML a SEO

Nagłówki pomagają uporządkować treść i wskazać, czego dotyczą kolejne jej fragmenty. Ma to znaczenie również dla SEO, ale nie należy traktować H1, H2 czy H3 jako miejsc służących przede wszystkim do umieszczania słów kluczowych.

Najważniejsze jest, aby nagłówki jasno opisywały treść znajdującą się poniżej. Frazy związane z tematem mogą pojawiać się w nich naturalnie, jeśli pomagają użytkownikowi zrozumieć zawartość sekcji. Nie warto jednak powtarzać tego samego słowa kluczowego w każdym nagłówku.

Google może wykorzystywać tekst nagłówków, w tym H1, do lepszego rozpoznawania głównego tytułu strony i tworzenia tytułu prezentowanego w wynikach wyszukiwania. Nie istnieje jednak ustalona liczba H2 czy H3, którą trzeba zastosować, aby strona była lepiej oceniana.

Nagłówki a dostępność strony

Poprawna hierarchia nagłówków jest szczególnie istotna z punktu widzenia dostępności cyfrowej. Osoby korzystające z czytników ekranu mogą poruszać się pomiędzy nagłówkami i w ten sposób szybko poznawać strukturę dokumentu.

Dlatego sam wizualny wygląd tekstu nie wystarcza. Powiększony i pogrubiony akapit nadal pozostaje akapitem. Jeżeli tekst pełni funkcję nagłówka sekcji, powinien zostać oznaczony odpowiednim elementem H1-H6.

Logiczne i opisowe nagłówki są również zgodne z dobrymi praktykami WCAG. Ułatwiają orientację na stronie zarówno osobom korzystającym z technologii wspomagających, jak i pozostałym użytkownikom.

Jak ustawiać nagłówki w WordPressie?

W edytorze WordPressa poziom nagłówka można wybrać bez ręcznego wpisywania kodu HTML. Po dodaniu bloku Nagłówek wybierasz H2, H3 lub inny potrzebny poziom.

W wielu motywach tytuł wpisu lub podstrony jest już automatycznie oznaczany jako H1. W takiej sytuacji nie trzeba dodawać kolejnego H1 w treści. Pierwsze główne sekcje artykułu mogą zaczynać się od H2.

Przy stronie działającej na hostingu WordPress sposób wyświetlania nagłówków zależy przede wszystkim od motywu i stylów CSS. Sam hosting nie ustala ich hierarchii.

Najczęstsze błędy w stosowaniu nagłówków

• Wybieranie H2 lub H3 tylko ze względu na rozmiar czcionki. Wygląd powinien być kontrolowany przez CSS.
• Przeskakiwanie poziomów. Jeśli H4 jest podsekcją H2, zwykle powinien znaleźć się pomiędzy nimi odpowiedni H3.
• Używanie nagłówka do zwykłego tekstu. H1-H6 powinny oznaczać początek rzeczywistej sekcji.
• Powtarzanie tych samych fraz. Każdy nagłówek powinien możliwie jasno opisywać konkretny fragment treści.
• Dodawanie kolejnego H1 bez sprawdzenia szablonu. CMS lub motyw może już generować główny nagłówek strony.

Dobrze zaplanowane nagłówki pomagają stworzyć stronę, którą łatwiej czytać, skanować i rozwijać. Są częścią poprawnej struktury HTML, ale nie powinny być wykorzystywane jako sztuczny sposób na zwiększanie liczby słów kluczowych.