HTML Academy · Lekcja

Nagłówki h1-h6 i ich hierarchia

Używać poziomów nagłówków do tworzenia znaczącej struktury dokumentu.

Nagłówki h1-h6 i ich hierarchia to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Sześć poziomów nagłówków

HTML udostępnia sześć elementów nagłówków — od <h1> do <h6>:

h1 — główny tytuł strony (najważniejszy)
h2 — główne sekcje
h3 — podsekcje
h4, h5, h6 — bardziej zagnieżdżone podsekcje (rzadko potrzebne)

Ich rozmiar wizualny maleje, ale rozmiarem steruje CSS, a nie numer elementu.

Hierarchia semantyczna

Nagłówki tworzą zarys dokumentu — spis treści strony:

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

Zasada h1

Najlepsze praktyki dotyczące <h1>:

Na każdej stronie należy użyć dokładnie jednego elementu <h1>
Powinien odpowiadać elementowi <title> lub być z nim ściśle powiązany
Określa główny temat strony
Ma duże znaczenie dla SEO w ocenie strony przez wyszukiwarki

Nie pomijaj poziomów

Poziomów nagłówków należy używać w kolejności — nie należy przechodzić z h2 do h4:

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

Nagłówki jako pomoc w nawigacji

Użytkownicy czytników ekranu polegają na nagłówkach podczas poruszania się po długich stronach:

Przechodzą między nagłówkami za pomocą klawisza H
Czytniki ekranu wyświetlają listę wszystkich nagłówków jak spis treści
Poprawna hierarchia umożliwia nawigowanie po stronie bez wzroku

Styl a semantyka

Nie należy wybierać poziomu nagłówka ze względu na jego rozmiar wizualny — do tego należy używać CSS:

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

Nagłówki w sekcjach

W przypadku użycia elementów sekcjonujących HTML5 hierarchia nagłówków zaczyna się od nowa w każdej sekcji:

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

Wskazówki dotyczące dostępności nagłówków

Aby zapewnić dostępność, należy przestrzegać następujących zasad dotyczących nagłówków:

Każda strona musi zawierać co najmniej jeden nagłówek
Główny obszar treści powinien zaczynać się od elementu <h1>
Nie należy używać nagłówków wyłącznie po to, aby powiększyć lub pogrubić tekst
Nie należy używać pogrubionego tekstu zamiast nagłówków

SEO a nagłówki

Wyszukiwarki używają nagłówków do zrozumienia zawartości strony:

Element <h1> ma największe znaczenie dla SEO
W nagłówkach należy naturalnie umieszczać docelowe słowa kluczowe
Nagłówki dzielą treść i poprawiają wskaźniki czytelności
Wyszukiwarki wyświetlają nagłówki w wynikach (wyróżnione fragmenty)

Domyślne style przeglądarki

Przeglądarki stosują domyślne style do nagłówków:

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

Nagłówki w nawigacji

Nagłówków można również używać w punktach orientacyjnych nawigacji:

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Szybkie sprawdzenie

Ile elementów h1 powinna zazwyczaj zawierać poprawnie skonstruowana strona?

Podsumowanie: nagłówki

Najważniejsze informacje o hierarchii nagłówków:

Sześć poziomów: od h1 do h6
Jeden element h1 na stronę — główny tytuł
Poziomów należy używać w kolejności — nigdy nie należy pomijać poziomu
Nagłówki tworzą dostępny zarys dokumentu
Do określania rozmiaru wizualnego należy używać CSS, a nie numerów nagłówków

Często zadawane pytania

Czy lekcja „Nagłówki h1-h6 i ich hierarchia” jest bezpłatna?

Tak — pełny tekst „Nagłówki h1-h6 i ich hierarchia” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Nagłówki h1-h6 i ich hierarchia”?

Używać poziomów nagłówków do tworzenia znaczącej struktury dokumentu. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Nagłówki h1-h6 i ich hierarchia”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do HTML Academy