System nagłówków: reguły dla H1, H2 i H3

System nagłówków to uporządkowany zbiór jednego tytułu strony i jej etykiet sekcji. Zamienia długą stronę w czytelną ścieżkę dla ludzi i maszynowo czytelny konspekt dla wyszukiwarek, technologii asystujących i systemów odpowiedzi AI.

Tytuł strony powyżej to pojedynczy H1 tej strony. Każda główna specyfikacja poniżej to H2, a każdy podział wewnątrz głównej sekcji to H3. Ten żywy konspekt jest renderowanym elementem: jego poziomy wyrażają relacje, a nie rozmiary czcionek.

Dlaczego ten element ma znaczenie

Czytelnicy rzadko konsumują długą stronę w jednym nieprzerwanym przejściu. Skanują w poszukiwaniu rozpoznawalnego pytania, porównują etykiety sekcji z bieżącą potrzebą i decydują, gdzie zwolnić. Opisowe nagłówki zmniejszają ten wysiłek, ponieważ każdy z nich składa małą obietnicę co do tego, co następuje. „Jak stabilne identyfikatory nagłówków chronią cytowania” jest przydatne na pierwszy rzut oka; „Jeszcze kilka myśli” – nie.

Ta sama hierarchia wspiera maszynową ekstrakcję, co oznacza, że zautomatyzowany system może zidentyfikować sekcję, zrozumieć, jak odnosi się do tematu strony, i pobrać ją bez mylenia z sąsiednią sekcją. H1 ustala temat strony. H2 dzieli ten temat na główne zagadnienia. H3 zawęża jeden H2 do metody, przypadku, kryterium lub wyjątku. Pominięty poziom ukrywa tę relację i zmusza parser do wnioskowania, czy podsekcja jest rodzeństwem, dzieckiem, czy niepowiązanym blokiem.

Nagłówki tworzą również adresowalne sekcje. Identyfikator fragmentu to część URL-a po #, na przykład #qa-checklist. Wyniki wyszukiwania, linki wewnętrzne, zakładki przeglądarki i odpowiedzi AI mogą wskazywać na to konkretne miejsce. Losowo zmieniony automatycznie wygenerowany identyfikator może więc złamać URL, nawet jeśli sama strona nadal istnieje. Nagłówek nie jest dekoracją: jego tekst definiuje sekcję, a jego identyfikator staje się trwałym adresem publicznym.

Postępuj zgodnie z zasadami pisania elementów , gdy cel sekcji odpowiada typowanemu elementowi. H2 nazwany „Ostrzeżenie” nie zastępuje ostrzeżenia, a H2 nazwany „Porównanie” nie zastępuje tabeli porównawczej. Nagłówki zapewniają hierarchię dokumentu; typowane elementy zapewniają strukturę specyficzną dla celu. Oba mogą być potrzebne.

Kiedy go używać

Używaj systemu nagłówków na każdej znaczącej stronie podlegającej indeksowaniu. Nawet krótka strona potrzebuje jednego H1. Dodawaj sekcje H2, gdy czytelnik musi przechodzić między różnymi pytaniami, etapami, kryteriami lub grupami dowodów. Dodawaj podsekcje H3 tylko wtedy, gdy H2 zawiera co najmniej dwie wyraźnie odrębne części, które korzystają z osobnej nawigacji.

Bliskie chybienia to etykiety wizualne, które wyglądają jak nagłówki, ale nie należą do konspektu artykułu:

• Tytuł karty nazywa jedną powtarzaną kartę; nie jest automatycznie sekcją dokumentu.
• Etykieta wyróżnienia, taka jak „Wskazówka” lub „Ważne”, identyfikuje typ ramki; nie staje się H2 tylko dlatego, że jest pogrubiona.
• Tytuł wykresu identyfikuje ilustrację. Należy do podpisu lub nazwy dostępnej figury, chyba że wykres rozpoczyna pełną sekcję.
• Etykieta menu nawigacyjnego, breadcrumb, zakładka, kontrolka akordeonu, nagłówek stopki i tytuł modala mogą potrzebować semantyki komponentu, ale nie wchodzą do głównej hierarchii artykułu.
• Duży slogan promocyjny to tekst reklamowy. Rozmiar czcionki nie może awansować go do H1 dokumentu.

Nie dodawaj nagłówka tylko po to, by wprowadzić jedno zdanie, podzielić ciągłe wyjaśnienie lub stworzyć wizualną przestrzeń oddechową. Użyj do tego odstępów między akapitami lub edycji. Przydatny nagłówek oznacza sekcję na tyle znaczącą, by odpowiadać na odrębną potrzebę czytelnika.

Gdzie umieszczać nagłówki

Pozycja wyraża relacje nadrzędności. Umieść H1 na początku głównej treści, po breadcrumbach lub innej nawigacji serwisu, a przed wstępem. Umieść każdy H2 przed główną sekcją. Umieść H3 dopiero po jego nadrzędnym H2 i treści orientującej rodzica, nigdy przed pierwszym H2 i nigdy jako element równorzędny wybrany ze względu na wygląd wizualny.

Dwa nagłówki nie mogą sąsiadować ze sobą w autorskiej treści artykułu. Każdy nagłówek musi posiadać użyteczną treść przed kolejnym nagłówkiem tego samego lub głębszego poziomu. Ta reguła zapobiega pustym etykietom sekcji, daje czytelnikom kontekst przed listą podsekcji i tworzy fragmenty nadające się do ekstrakcji, a nie goły konspekt.

Anatomia

Opisana anatomia składa się z pięciu części:

1. H1: unikalny temat strony i szczyt konspektu treści.
2. H2: główne pytanie, etap lub wymiar w ramach tego tematu.
3. H3: temat podrzędny, który nie może być poprawnie zrozumiany bez swojego nadrzędnego H2.
4. Treść własna: odpowiedź, dowody, instrukcje lub wyjaśnienia między jednym nagłówkiem a kolejnym nagłówkiem na tym samym lub wyższym poziomie.
5. Stabilny identyfikator: miejsce docelowe fragmentu dołączone do nagłówka i zachowane po publikacji.

Relacja pozostaje ważna, jeśli zmieni się typografia. Motyw może renderować H2 mniejszą czcionką na urządzeniach mobilnych, ale musi pozostać H2 w HTML. I odwrotnie – nadanie akapitowi dużej i pogrubionej czcionki nie nadaje mu semantyki nagłówka ani miejsca docelowego fragmentu.

Przykłady projektowe

Warianty projektowe odpowiadają poziomom semantycznym i rzeczywistym stanom zawijania, a nie arbitralnym opcjom kolorystycznym.

Tytuł strony H1: pokaż unikalny temat na początku głównej treści. Opis wspierający może nastąpić, ale żadna górna etykieta, logo ani slogan nie staje się kolejnym H1.

Główna sekcja H2: spraw, by sekcja była zrozumiała ze spisu treści, a następnie umieść treść ustalającą zakres.

Podsekcja H3: użyj niższego poziomu, ponieważ temat jest podrzędny, a nie dlatego, że projektant chce mniejszego tekstu.

Zawinięty nagłówek: dopuść naturalne zawinięcie na dwie linie na wąskich ekranach. Nie skracaj jasnego nagłówka do niejednoznacznej etykiety tylko po to, by zmieścił się w jednej linii.

Stany zakotwiczenia: pokaż najechanie myszą i focus klawiatury bez czynienia kotwicy jedynym sposobem zrozumienia miejsca docelowego. Bezpośrednia nawigacja musi przesunąć widok o wysokość sticky headera, aby nagłówek nie był ukryty.

Parametry

System nagłówków to kontrakt dokumentu, a nie element dekoracyjny. Jego parametry definiują konspekt, tekst widoczny dla czytelników, treść należącą do każdego węzła oraz URL, pod którym ten węzeł może być osiągnięty.

Limity znaków i słów to pasma redakcyjne, a nie powód do pomijania niezbędnej szczegółowości. 94-znakowy nagłówek rozróżniający dwie podobne procedury jest lepszy niż krótki, ale mylący. Limity strukturalne są ścisłe: jeden H1, brak pominiętych poziomów, brak duplikatów ID i brak pustych sekcji.

Składnia i przykłady kodu

Kanoniczna przenośna forma otacza natywny konspekt w dyrektywie heading-system. Pierwszy nagłówek mapuje się na tytuł dokumentu; kolejne nagłówki pozostają uporządkowanymi węzłami treści. Jawne identyfikatory są dodawane, gdy nagłówki stają się publiczne.

Przenośna dyrektywa Markdown

:::heading-system
# Rotate an API key without downtime

Replace the credential in every dependent service before revoking the old key.

## Prepare the replacement

Record every service that currently reads the credential.

### Identify hidden consumers

Check scheduled jobs, deployment secrets, and local integrations.

## Verify and revoke

Test the replacement, then revoke the exposed key.
:::

Po publikacji przypnij stabilne identyfikatory, aby przyszłe zmiany tekstu nie regenerowały ich:

## Prepare the replacement {#prepare-replacement}
### Identify hidden consumers {#identify-hidden-consumers}

Shortcode Hugo

{{< heading-system h1="Rotate an API key without downtime" >}}
## Prepare the replacement {#prepare-replacement}

Record every service that currently reads the credential.

### Identify hidden consumers {#identify-hidden-consumers}

Check scheduled jobs, deployment secrets, and local integrations.
{{< /heading-system >}}

To jest kontrakt adaptera Hugo, a nie twierdzenie, że to repozytorium rejestruje shortcode heading-system. Implementacja Hugo może nadal renderować H1 z frontmatter, a nagłówki treści przez Markdown, tak jak robi to ta strona, pod warunkiem że waliduje tę samą hierarchię i zachowuje jawne identyfikatory.

Blok WordPress

<!-- wp:heading {"level":2,"anchor":"prepare-replacement"} -->
<h2 id="prepare-replacement">Prepare the replacement</h2>
<!-- /wp:heading -->

<p>Record every service that currently reads the credential.</p>

<!-- wp:heading {"level":3,"anchor":"identify-hidden-consumers"} -->
<h3 id="identify-hidden-consumers">Identify hidden consumers</h3>
<!-- /wp:heading -->

WordPress powinien przechowywać H1 w polu tytułu strony lub zatwierdzonym bloku hero, a nie jako drugi blok nagłówka w treści artykułu. Ustaw jawnie kotwicę HTML każdego opublikowanego nagłówka, aby późniejsza zmiana sformułowania nie zmieniła po cichu jego URL-a.

Przykłady

Dobrze: konspekt zapowiada kompletne odpowiedzi

# How to choose an invoice approval workflow

## Define the approval risk
Explain which invoice values, vendors, and exceptions need review.

### Set value thresholds
Assign a named approver to each threshold and document what happens at the boundary.

### Route policy exceptions
Send missing purchase orders and changed bank details to a separate review path.

## Test the workflow
Run ordinary and exceptional invoices through the complete route before launch.

To działa, ponieważ H1 określa jedno zadanie, każdy H2 nazywa główny etap, każdy H3 należy do swojego rodzica, a każdej etykiecie towarzyszy treść spełniająca jej obietnicę. Czytelnik może zeskanować konspekt i przewidzieć, gdzie omówione są progi, wyjątki i testowanie.

Źle: stylizacja zastępuje hierarchię

# Invoice approval

### Things to think about
## More information
### Exceptions
### Other

To zawiera z czterech niezależnych powodów. Przeskakuje z H1 do H3, używa etykiet, które nie zapowiadają odpowiedzi, umieszcza nagłówki obok siebie bez własnej treści i pozostawia „Exceptions” bez wyjaśnienia przed kolejnym nagłówkiem. Powstały konspekt sugeruje zakres, którego strona nie zapewnia. Tworzy też słabe automatycznie generowane identyfikatory, takie jak #other, które są niejednoznaczne, gdy cytowane poza stroną.

Znaczniki schematu i dostępność

Nagłówki nie potrzebują samodzielnego typu Schema.org. H1 zazwyczaj dostarcza lub odzwierciedla headline encji Article, TechArticle lub innej odpowiedniej encji strony, ale widoczne sformułowanie i JSON-LD muszą opisywać ten sam temat. Sekcje H2 i H3 pozostają strukturą HTML; nie twórz encji schematu dla każdego nagłówka. Nagłówek zatytułowany „Frequently asked questions” również sam z siebie nie tworzy znaczników FAQPage – widoczne dane pytań i odpowiedzi muszą spełniać kontrakt elementu FAQ.

Dostępność zależy od semantycznego HTML i logicznej kolejności. Użytkownicy czytników ekranu mogą nawigować po nagłówkach, przeglądać listę nagłówków lub skakać bezpośrednio między sekcjami. Ten przepływ pracy psuje się, gdy strona pomija poziomy dla stylizacji, używa pogrubionych akapitów jako fałszywych nagłówków lub zawiera nagłówki narzędziowe i artykułowe w jednej niespójnej hierarchii.

Używaj rzeczywistych elementów <h1>, <h2> i <h3>. Trzymaj tekst nagłówka widocznym; aria-label nie może zastępować jasnego tekstu na ekranie. Kontrolki kotwiczące potrzebują opisowej dostępnej nazwy, widocznego focusu klawiatury i osobnego celu kliknięcia, oddzielonego od tekstu nagłówka, gdy linkowanie całego nagłówka dezorientowałoby zaznaczenie. Gdy ładowany jest URL fragmentu, focus klawiatury nie musi przenosić się automatycznie, ale docelowy nagłówek musi być widoczny i nieprzykryty przez sticky header.

Identyfikatory nagłówków muszą być unikalne w obrębie strony i powinny zaczynać się od litery. Trzymaj je małymi literami, z łącznikami, czytelne i wolne od tymczasowych dat lub numerów pozycji. Stabilny ID może pozostać #verify-results, nawet jeśli widoczny nagłówek poprawi się z „Verify the results” na „Verify the new credential works”. Jeśli znaczenie sekcji zmieni się całkowicie, utwórz nowy ID i zachowaj stary fragment przez alias lub udokumentowane zachowanie przekierowania, gdy platforma je obsługuje. Osobna specyfikacja linków kotwiczących reguluje nawigację kotwiczną i szczegóły interakcji.

Zasady pisania

Napisz konspekt strony przed polerowaniem poszczególnych etykiet. Każdy nagłówek powinien odpowiadać na pytanie „czego się tutaj dowiem, co zdecyduję lub zrobię?” w konkretnym języku. Preferuj „Porównaj roczne i miesięczne koszty abonamentu” zamiast „Rozważania cenowe” oraz „Dlaczego import odrzuca zduplikowane identyfikatory” zamiast „Rozwiązywanie problemów”. Opisowość nie oznacza rozwlekłości; oznacza, że etykieta zapowiada rzeczywistą treść sekcji.

Użyj jednego H1 o długości 20–80 znaków. Preferuj nagłówki H2 i H3 o długości 2–12 słów i nie więcej niż 90 znaków. Długi przewodnik ma zwykle 3–12 sekcji H2. H2 potrzebuje co najmniej jednego zdania określającego zakres lub odpowiedź przed jakimkolwiek H3. Użyj dwóch lub więcej sekcji H3 pod rodzicem, gdy podział pomaga; pojedynczy H3 często sygnalizuje, że jego treść powinna zostać połączona z H2.

Używaj małych liter z wyjątkiem pierwszego wyrazu (sentence case), chyba że rzeczownik własny lub nazwa produktu wymagają wielkich liter. Pytania są odpowiednie, gdy sekcja odpowiada na dokładne pytanie natychmiast. Etykiety oznajmujące pasują do etapów, kryteriów, ustaleń i specyfikacji. Utrzymuj równoległe sekcje gramatycznie równoległe: używaj czasowników dla sekwencji procesów, rzeczowników dla kryteriów porównania lub pytań dla zestawu FAQ.

Nigdy nie umieszczaj w tekście nagłówka:

• Linków Markdown ani surowych URL-i; tworzą konkurencyjne miejsca docelowe i niestabilne nazwy dostępne.
• Znaczników przypisów ani cytowań źródłowych; umieść dowody w treści własnej.
• Emoji używanych jako etykiety strukturalne, znaczki statusu lub dekoracyjne prefiksy.
• Ręcznego numerowania, chyba że typ wpisu definiuje stabilną uporządkowaną sekwencję.
• Języka CTA, takiego jak „Kup teraz”, twierdzeń cenowych, pilności lub znaczków promocyjnych.
• Instrukcji stylizacji, HTML-owych łamania wierszy ani skrótów specyficznych dla urządzenia.
• Drugiego zdania, które należy do akapitu poniżej.

Nie pisz sprytnych etykiet, które polegają na otaczającej treści, by mieć sens. „Sprawy się komplikują” może pasować do stylu eseju, ale nie daje wynikowi wyszukiwania, spisowi treści, liście nagłówków czytnika ekranu ani cytowaniu AI użytecznego kontekstu. Zachowaj osobowość w wyjaśnieniu po precyzyjnym nagłówku.

Typy wpisów, które go używają

Tablica postTypes w frontmatterze zarządza tymi relacjami. Każdy wymieniony typ wpisu używa tego samego kontraktu hierarchii, podczas gdy jego własna anatomia określa dokładne nazwy i kolejność sekcji.

Lista kontrolna QA

• Strona renderuje dokładnie jeden widoczny H1, a ten H1 nazywa rzeczywisty temat strony.
• Konspekt przechodzi od H1 do H2 do H3 bez pomijania poziomów.
• Każdy H3 ma jednego jasno określonego nadrzędnego H2.
• Po każdym nagłówku następuje znacząca treść własna przed kolejnym nagłówkiem.
• Każdy H2 zawiera zdanie orientujące lub odpowiedź przed swoim pierwszym H3.
• Tekst nagłówka jest opisowy, gdy czytany samodzielnie w spisie treści lub liście nagłówków czytnika ekranu.
• Równoległe sekcje używają równoległej gramatyki i równoważnych poziomów.
• Poziomy nagłówków odzwierciedlają relacje, a nie rozmiar czcionki czy pożądaną wagę wizualną.
• Typowane cele wciąż używają wymaganych elementów; nagłówki nie imitują komponentów.
• Każdy opublikowany nagłówek ma jeden unikalny, czytelny, stabilny identyfikator fragmentu.
• Istniejące identyfikatory fragmentów pozostają niezmienione, gdy widoczne sformułowanie jest edytowane bez zmiany znaczenia sekcji.
• Bezpośrednia nawigacja fragmentu pozostawia miejsce docelowe widoczne pod ewentualnym sticky headerem.
• Tekst nagłówka nie zawiera linków, cytowań, etykiet emoji, znaczków promocyjnych ani ręcznych łamań wierszy.
• Konspekt HTML pozostaje spójny w obecności menu, kart, akordeonów, modali i innych komponentów strony.
• Renderowana strona działa przy wąskiej szerokości, a nagłówki dwuwierszowe zawijają się bez przycinania lub nakładania.

Odrzuć stronę, gdy projekt wizualny wygląda dopracowany, ale konspekt zawodzi. Wady nagłówków kumulują się: jeden pominięty poziom lub pusta sekcja sprawia, że każdy konsument niższego szczebla pracuje ciężej, by odtworzyć relacje, które źródło powinno było bezpośrednio określić.

FAQ

Pytania poniżej rozwiązują przypadki, które najprawdopodobniej tworzą niespójne konspekty między edytorami i platformami. Ich autorytatywne wartości znajdują się w ustrukturyzowanym frontmatterze [[faq]] powyżej, aby widoczne dane wyjściowe i ewentualne dane wyjściowe schema mogły współdzielić jedno źródło.