Dokumentacja HTML z przykładami: Nagłówki h1 do h6

Q: Ile jest znaczników nagłówków w HTML?

Sześć: , , , , i . jest najważniejszy (tytuł strony), a najmniej ważny. Nie ma ; taki znacznik jest traktowany jak nieznany element liniowy.

Q: Jakie są domyślne rozmiary nagłówków HTML?

Przy domyślnym tekście 16px przeglądarki wyświetlają h1 w rozmiarze 32px (2em), h2 24px (1.5em), h3 18.72px (1.17em), h4 16px (1em), h5 13.28px (0.83em) i h6 10.72px (0.67em), wszystkie pogrubione.

Q: Czy na stronie może być więcej niż jeden h1?

HTML na to pozwala, ale jeden z nazwą strony to najczytelniejsza struktura dla użytkowników czytników ekranu i wyszukiwarek. Dla głównych sekcji pod nim używaj .

Q: Jak zmienić rozmiar nagłówka?

Ustaw font-size w CSS, na przykład h2 { font-size: 20px; } albo klasę na jednym nagłówku. Nigdy nie wybieraj poziomu nagłówka ze względu na jego domyślny rozmiar.

Nagłówki w HTML: od h1 do h6, rozmiary, kolejność i style

HTML ma sześć poziomów nagłówków, od <h1> do <h6>, które tworzą konspekt strony. Poznaj domyślne rozmiary, kolejność nagłówków, liczbę znaczników h1 na stronie, zmianę rozmiaru w CSS i sposób, w jaki korzystają z nich czytniki ekranu.

Na tej stronie są działające edytory: edytuj, uruchamiaj i od razu zobacz wynik.

Autor: Kevin Spektor, Współzałożyciel i CTO

Opublikowano Sep 24, 2026

Sześć znaczników nagłówków w HTML

HTML ma sześć poziomów nagłówków, od <h1> do <h6>. <h1> to najwyższy poziom (tytuł strony), a <h6> najniższy. Przeglądarki wyświetlają każdy poziom mniejszym od poprzedniego, wszystkie pogrubione, każdy w osobnej linii:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

Znacznik	Domyślny rozmiar	Przy tekście 16px
`<h1>`	2em	32px
`<h2>`	1.5em	24px
`<h3>`	1.17em	18.72px
`<h4>`	1em	16px
`<h5>`	0.83em	13.28px
`<h6>`	0.67em	10.72px

<h5> i <h6> są domyślnie mniejsze od zwykłego tekstu, co bywa zaskoczeniem. Rozmiar to tylko wartość domyślna, a kolejne sekcje pokazują, dlaczego nigdy nie należy wybierać poziomu według rozmiaru.

Nagłówki to konspekt strony

Nagłówki nie są dekoracją. Razem tworzą konspekt strony, jak spis treści w książce. Użytkownicy czytników ekranu przeskakują od nagłówka do nagłówka, żeby znaleźć to, czego szukają, a wyszukiwarki czytają je, żeby zrozumieć tematy strony.

Zasada jest prosta: jeden <h1> na tytuł strony, <h2> dla każdej głównej sekcji, <h3> dla podsekcji w <h2> i tak dalej, bez pomijania poziomów. Ten przykład buduje spis treści z nagłówków, tak jak widzą je narzędzia wspomagające:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

Zmień drugi <h3> na <h5>, a konspekt pokaże lukę: czytelnik nawigujący po nagłówkach zastanawiałby się, gdzie podział się h4.

Zmiana rozmiaru nagłówka

Wybierz poziom według miejsca w konspekcie, a potem ustaw wygląd w CSS. Tytuł w pasku bocznym może wymagać <h2>, ale wyglądać skromnie; tytuł strony głównej może być bardzo dużym <h1>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

Działa to też w drugą stronę: nie używaj znacznika nagłówka tylko po to, żeby tekst był duży lub pogrubiony. Do pogrubionych słów w zdaniu używaj <strong>, a do dużego tekstu, który nie jest nagłówkiem, <p> z klasą. Znaczniki tekstowe opisuje strona o pogrubieniu.

Podtytuły i hasła

Podtytuł tuż pod nagłówkiem zwykle sam nie jest nagłówkiem: nie zaczyna nowej sekcji. Użyj akapitu i, jeśli chcesz, zgrupuj parę przez <hgroup>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

Konspekt pozostaje czysty (jeden h1, potem sekcje h2), a hasło nadal wizualnie trzyma się tytułu.

Link do nagłówka

Nadaj nagłówkowi id, a każdy link z #id w href przeniesie prosto do niego. Tak działają spisy treści i przyciski "kopiuj link do sekcji":

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

Częste błędy

Wybieranie poziomu według rozmiaru. Wybieraj według miejsca w konspekcie, a potem stylizuj w CSS.
Pomijanie poziomów. Przejście z <h2> prosto do <h4> psuje nawigację użytkownikom czytników ekranu.
Nagłówki do wyróżniania. Pogrubiona linia w akapicie to <strong>, a nie <h4>.
Brak <h1> albo logo jako jedyny <h1>. <h1> powinien nazywać treść strony, np. tytuł artykułu lub produktu.
Puste nagłówki. Nagłówek z samą ikoną albo pusty jest ogłaszany jako pusty. Wpisz w niego prawdziwy tekst.

Najczęściej zadawane pytania

Ile jest znaczników nagłówków w HTML?

Sześć: <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. <h1> jest najważniejszy (tytuł strony), a <h6> najmniej ważny. Nie ma <h7>; taki znacznik jest traktowany jak nieznany element liniowy.

Jakie są domyślne rozmiary nagłówków HTML?

Przy domyślnym tekście 16px przeglądarki wyświetlają h1 w rozmiarze 32px (2em), h2 24px (1.5em), h3 18.72px (1.17em), h4 16px (1em), h5 13.28px (0.83em) i h6 10.72px (0.67em), wszystkie pogrubione.

Czy na stronie może być więcej niż jeden h1?

HTML na to pozwala, ale jeden <h1> z nazwą strony to najczytelniejsza struktura dla użytkowników czytników ekranu i wyszukiwarek. Dla głównych sekcji pod nim używaj <h2>.

Czy mogę pomijać poziomy nagłówków, np. z h2 do h4?

Unikaj tego. Użytkownicy czytników ekranu nawigują według poziomów nagłówków, a skok z h2 do h4 sugeruje brakującą sekcję. Wybieraj poziom według miejsca w konspekcie, a rozmiar zmieniaj w CSS.

Jak zmienić rozmiar nagłówka?

Ustaw font-size w CSS, na przykład h2 { font-size: 20px; } albo klasę na jednym nagłówku. Nigdy nie wybieraj poziomu nagłówka ze względu na jego domyślny rozmiar.

Powiązane zagadnienia