Nagłówki HTML to znaczniki semantyczne, które porządkują hierarchię i strukturę treści na stronie internetowej. Dostępne są w sześciu poziomach: od <h1> do <h6>, gdzie <h1> reprezentuje najważniejszy nagłówek, a <h6> – najmniej istotny.
Funkcjonalnie nagłówki działają jak rozdziały i podrozdziały w książce – pozwalają użytkownikowi szybko zrozumieć, o czym jest dany fragment treści i czy warto czytać dalej. To nie jest tylko kwestia estetyki czy wygody. Nagłówki mają znaczenie dla dostępności (np. dla czytników ekranu) oraz dla SEO.
Po co nam nagłówki HTML?
Najważniejsze korzyści z prawidłowego użycia nagłówków to:
- struktura i czytelność – gdy nagłówki H1–H6 (zwykle H1–H3) są użyte logicznie, treść jest łatwiejsza do skanowania i zrozumienia,
- dostępność – użytkownicy korzystający z czytników ekranu nawigują po stronie po hierarchii nagłówków, co zwiększa użyteczność,
- SEO – tag H1 pomaga wyszukiwarkom zrozumieć główny temat strony, a dobrze zorganizowane H2–H6 ze słowami kluczowymi wzmacniają kontekst,
- konwersja – jasne nagłówki prowadzą użytkownika do właściwych sekcji (np. H2 „Domy na sprzedaż”, a pod nim H3 „Domy z ogrodem”), co skraca drogę do celu.
Hierarchia nagłówków – H1, H2, H3… H6
H1 – tytuł całej podstrony
H1 to tytuł całej podstrony – jasno mówi, o czym jest cała zawartość. To najważniejszy nagłówek na stronie i na jednej podstronie powinno być tylko jedno H1.
Przykład – na stronie głównej szkoły językowej H1 może brzmieć: „Kursy językowe dla dzieci, młodzieży i dorosłych”.
<h1>Kursy językowe dla dzieci, młodzieży i dorosłych</h1>
H1 powinien zwięźle odpowiadać na pytanie „co to za strona / artykuł?” oraz zawierać główną frazę kluczową. Przykład dla gabinetu psychologicznego: „Psycholog Anna Nowak – wsparcie psychologiczne dla dorosłych, młodzieży i par”.
H2 – tytuły głównych sekcji
Pod H1 umieszczaj H2. To tytuły głównych sekcji, które rozwijają temat. H2 dzielą treść na czytelne bloki i mogą pojawić się wielokrotnie na jednej stronie.
Przykładowy układ sekcji na stronie z ofertą kursów:
<h1>Kursy językowe dla dzieci, młodzieży i dorosłych</h1>
<h2>Angielski dla dzieci</h2>
<p>Opis kursu dla dzieci...</p>
<h2>Kursy dla dorosłych</h2>
<p>Opis kursu dla dorosłych...</p>
<h2>Język niemiecki online</h2>
<p>Opis kursu niemieckiego...</p>
H3, H4, H5, H6 – poziomy szczegółów
Każdą z sekcji H2 możesz rozbić za pomocą H3. Gdy potrzebujesz jeszcze większej granularności, użyj H4 i H5 (aż do H6), choć w praktyce rzadko wychodzi się poza H3–H4.
Przykład podziału sekcji „Kursy dla dorosłych”:
<h2>Kursy dla dorosłych</h2>
<h3>Kurs konwersacyjny</h3>
<p>Doskonalisz umiejętności mówienia w języku angielskim...</p>
<h3>Przygotowanie do egzaminów językowych</h3>
<p>Przygotowanie do egzaminów takich jak IELTS, TOEFL...</p>
<h3>Kurs biznesowy</h3>
<p>Angielski do zastosowań biznesowych...</p>
Pełny przykład struktury nagłówków
Tak może wyglądać kompletna, logiczna hierarchia H1–H4 na stronie:
<h1>Tytuł strony</h1>
<h2>Zagadnienie 1</h2>
<h3>Podzagadnienie 1.1</h3>
<h3>Podzagadnienie 1.2</h3>
<h3>Podzagadnienie 1.3</h3>
<h2>Zagadnienie 2</h2>
<h3>Podzagadnienie 2.1</h3>
<h4>Szczegół 2.1.1</h4>
<h4>Szczegół 2.1.2</h4>
<h3>Podzagadnienie 2.2</h3>
<h2>Zagadnienie 3</h2>
<h3>Podzagadnienie 3.1</h3>
Ważne zasady użycia nagłówków
Zasada – jedno H1, logiczne H2, reszta w razie potrzeby
Trzymaj się zasady: jedno H1, logiczne H2, a kolejne poziomy tylko wtedy, gdy są naprawdę potrzebne. Wiele osób popełnia błąd, umieszczając wiele H1 na jednej stronie – to szkodzi SEO i logice dokumentu.
Nigdy nie używaj nagłówków ze względu na wygląd
Nie wybieraj H2, H3 czy H4 tylko dlatego, że „ładnie wyglądają”. Używaj ich zgodnie z hierarchią treści. Jeśli chcesz zmienić rozmiar tekstu, użyj CSS, nie innego poziomu nagłówka. Przykład:
<!-- ❌ Źle -->
<h3>Mały tytuł, bo h3 wygląda ładnie</h3>
<!-- ✅ Dobrze -->
<h2>Mały tytuł</h2>
<style>
h2 { font-size: 18px; }
</style>
Słowa kluczowe w nagłówkach
Tag H1 powinien zawierać główne słowo kluczowe. Przykład:
<h1>Najlepsze fundusze inwestycyjne do inwestowania</h1>
Inne dobre warianty H1 dla podobnego tematu:
<h1>Najlepsze fundusze inwestycyjne 2024</h1>
<h1>Najlepsze fundusze inwestycyjne z wysokim zwrotem</h1>
Używaj słów kluczowych naturalnie i unikaj upychania (keyword stuffing). W podtytułach (H2–H3) stosuj synonimy i bliskoznaczne frazy, np. „Ranking funduszy inwestycyjnych” lub „Najlepsze produkty inwestycyjne 2024”.
Najczęstsze błędy i jak ich unikać
Błąd 1 – wiele H1 na jednej stronie
Na jednej podstronie powinien znajdować się tylko jeden nagłówek H1. Tak wygląda zły i dobry przykład:
<!-- ❌ Źle -->
<h1>Główny tytuł artykułu</h1>
<p>Treść...</p>
<h1>Kolejny ważny nagłówek</h1>
<p>Więcej treści...</p>
<!-- ✅ Dobrze -->
<h1>Główny tytuł artykułu</h1>
<p>Treść...</p>
<h2>Kolejny ważny nagłówek</h2>
<p>Więcej treści...</p>
Aby temu zapobiegać:
- upewnij się, że szablon strony (np. w WordPressie) nie generuje automatycznie dodatkowego H1 poza tytułem wpisu,
- w treści używaj H2 jako głównych nagłówków sekcji i nie powielaj H1,
- jeśli masz stronę typu „one page” z wieloma blokami, zastosuj jeden H1 i wiele H2–H3, zamiast wielu H1.
Błąd 2 – przeskakiwanie poziomów nagłówków
Nie przeskakuj poziomów. Po H1 powinno następować H2, po H2 – H3 itd.:
<!-- ❌ Źle -->
<h1>Tytuł główny</h1>
<h3>Przeskoczył H2 – to błąd struktury!</h3>
<!-- ✅ Dobrze -->
<h1>Tytuł główny</h1>
<h2>Podsekcja</h2>
<h3>Szczegół podsekcji</h3>
Błąd 3 – upychanie słów kluczowych
Nagłówek powinien brzmieć naturalnie i jasno dla człowieka. Unikaj przeładowania frazami:
<!-- ❌ Źle -->
<h1>Najlepsze fundusze inwestycyjne, najlepsze inwestycje, fundusze, inwestycje</h1>
<!-- ✅ Dobrze -->
<h1>Najlepsze fundusze inwestycyjne dla początkujących</h1>
Praktyczne zastosowania w różnych typach stron
Blog lub artykuł
Proponowana struktura nagłówków dla wpisu blogowego:
<h1>Jak nauczyć się programowania w JavaScript w 30 dni</h1>
<h2>Dlaczego JavaScript jest ważny?</h2>
<p>Treść sekcji...</p>
<h2>Plan nauki na 30 dni</h2>
<h3>Tydzień 1: Podstawy składni</h3>
<h3>Tydzień 2: Funkcje i zakresy</h3>
<h3>Tydzień 3–4: Asynchroniczny JavaScript</h3>
<h2>Zasoby do nauki</h2>
<h3>Kursy online</h3>
<h3>Książki rekomendowane</h3>
<h3>Projekty ćwiczeniowe</h3>
Strona e-commerce
Przykładowa hierarchia dla sklepu internetowego:
<h1>Sklep internetowy TechGadgets</h1>
<h2>Laptopy</h2>
<h3>Laptopy dla graczy</h3>
<h3>Laptopy dla biznesu</h3>
<h3>Laptopy ultraprzenośne</h3>
<h2>Smartfony</h2>
<h3>iPhone</h3>
<h3>Samsung</h3>
<h3>OnePlus</h3>
<h2>Akcesoria</h2>
<h3>Torby i plecaki</h3>
<h3>Klawiatury i myszy</h3>
Strona korporacyjna
Przykład struktury dla witryny firmowej:
<h1>O nas – firma XYZ sp. z o.o.</h1>
<h2>Nasza historia</h2>
<p>Treść...</p>
<h2>Nasze usługi</h2>
<h3>Konsultacje IT</h3>
<h3>Wdrożenia systemów</h3>
<h3>Wsparcie techniczne</h3>
<h2>Zespół</h2>
<h3>Zarząd</h3>
<h3>Dział rozwoju</h3>
<h3>Dział wsparcia klienta</h3>
<h2>Kontakt</h2>
Podsumowanie najlepszych praktyk
Oto skrócona lista zasad, których warto się trzymać podczas pracy z nagłówkami HTML:
- Logiczna hierarchia – zawsze używaj nagłówków w porządku od H1 do H6, bez zaburzania struktury;
- Jeden H1 na stronę – traktuj H1 jako główny tytuł dokumentu, unikać duplikatów;
- Rola H2 i H3 – H2 dla głównych sekcji, H3 dla podsekcji i szczegółów;
- Bez przeskakiwania poziomów – nie przechodź z H1 od razu do H3 (zachowuj ciągłość: H1 → H2 → H3);
- Słowa kluczowe naturalnie – wstawiaj frazy kluczowe w H1–H3 bez upychania, stawiaj na czytelność;
- Stylizacja w CSS, nie w nagłówkach – nie używaj H2/H3 „dla wyglądu”; rozmiary i styl ustawiaj w CSS;
- Dostępność – pamiętaj, że czytniki ekranu korzystają z hierarchii nagłówków do nawigacji;
- H1 jako odpowiedź – H1 powinno jednoznacznie odpowiadać na pytanie: „O czym jest ta strona?”.