Systém nadpisů: Pravidla pro H1, H2 a H3

Systém nadpisů je uspořádaná sada jednoho názvu stránky a jejích popisků sekcí. Mění dlouhou stránku v čitelnou trasu pro lidi a strojově čitelnou osnovu pro vyhledávače, asistenční technologie a systémy AI odpovědí.

Název stránky výše je jediným H1 této stránky. Každá hlavní specifikace níže je H2 a jakékoli další členění uvnitř hlavní sekce je H3. Tato živá osnova je vykresleným prvkem: její úrovně vyjadřují vztahy, nikoli velikosti písma.

Proč na tomto prvku záleží

Čtenáři jen zřídka konzumují dlouhou stránku v jednom nepřerušovaném průchodu. Prohledávají stránku, zda nenajdou známou otázku, porovnávají popisky sekcí se svou aktuální potřebou a rozhodují se, kde zpomalit. Popisné nadpisy tuto námahu snižují, protože každý z nich dává malý slib o tom, co následuje. „Jak stabilní ID nadpisů chrání citace" je užitečné na první pohled; „Ještě pár myšlenek" nikoli.

Stejná hierarchie podporuje strojovou extrahovatelnost, což znamená, že automatizovaný systém dokáže identifikovat sekci, pochopit, jak souvisí s tématem stránky, a získat ji, aniž by si ji spletl se sousední sekcí. H1 stanovuje předmět stránky. H2 rozděluje tento předmět na hlavní oblasti. H3 zužuje jednu H2 na metodu, případ, kritérium nebo výjimku. Přeskočená úroveň tento vztah skrývá a nutí parser odhadovat, zda je podsekce sourozencem, potomkem nebo nesouvisejícím blokem.

Nadpisy také vytvářejí adresovatelné sekce. Identifikátor fragmentu je část URL za znakem #, například #qa-checklist. Výsledky vyhledávání, interní odkazy, záložky prohlížeče a odpovědi AI mohou ukazovat na tento přesný cíl. Bezmyšlenkovitě přejmenované automaticky generované ID proto může rozbít URL, i když stránka samotná stále existuje. Nadpis není dekorace: jeho text definuje sekci a jeho ID se stává trvalou veřejnou adresou.

Řiďte se pravidly pro psaní prvků , pokud účel sekce odpovídá typovému prvku. H2 s názvem „Varování" nenahrazuje varovací rámeček a H2 s názvem „Srovnání" nenahrazuje srovnávací tabulku. Nadpisy poskytují hierarchii dokumentu; typové prvky poskytují strukturu specifickou pro daný účel. Obojí může být potřeba.

Kdy to použít

Použijte systém nadpisů na každé podstatné indexovatelné stránce. I krátká stránka potřebuje jeden H1. Přidejte sekce H2, když se čtenář musí pohybovat mezi odlišnými otázkami, fázemi, kritérii nebo skupinami důkazů. Přidejte podsekce H3 pouze tehdy, když H2 obsahuje alespoň dvě skutečně odlišné části, které těží ze samostatné navigace.

Téměř zásahy tvoří vizuální popisky, které vypadají jako nadpisy, ale nepatří do osnovy článku:

• Titulek karty pojmenovává jednu opakující se kartu; není automaticky sekcí dokumentu.
• Popisek zvýraznění jako „Tip" nebo „Důležité" identifikuje typ rámečku; nestává se H2 jen proto, že je tučný.
• Titulek grafu identifikuje obrázek. Patří do popisku obrázku nebo jeho přístupného názvu, pokud graf nezačíná celou sekci.
• Popisek navigační nabídky, drobečková navigace, záložka, ovládací prvek accordionu, záhlaví patičky a titulek modálního okna mohou potřebovat sémantiku komponenty, ale nevstupují do hlavní hierarchie článku.
• Velký propagační slogan je zobrazený text. Velikost písma jej nemůže povýšit do H1 dokumentu.

Nepřidávejte nadpis pouze proto, abyste uvedli jednu větu, rozdělili souvislé vysvětlení nebo vytvořili vizuální prostor. K těmto účelům použijte odstavcové mezery nebo úpravy. Užitečný nadpis označuje sekci dostatečně podstatnou na to, aby odpovídala na konkrétní potřebu čtenáře.

Kam umístit nadpisy

Pozice vyjadřuje nadřazenost. Umístěte H1 na začátek hlavního obsahu, za drobečkovou navigaci nebo jinou navigaci webu a před úvod. Umístěte každý H2 před hlavní sekci. Umístěte H3 až po jeho nadřazeném H2 a orientačním obsahu nadřazené sekce, nikdy před první H2 a nikdy jako vrstevník zvolený kvůli vizuálnímu vzhledu.

Dva nadpisy nesmí v autorském obsahu článku sousedit. Každý nadpis musí vlastnit užitečný obsah před dalším nadpisem stejné nebo nižší úrovně. Toto pravidlo zabraňuje prázdným popiskům sekcí, poskytuje čtenářům kontext před seznamem podsekcí a vytváří extrahovatelné pasáže místo holé osnovy.

Anatomie

Označená anatomie má pět částí:

1. H1: jedinečný předmět stránky a vrchol osnovy obsahu.
2. H2: primární otázka, fáze nebo dimenze v rámci tohoto předmětu.
3. H3: podřazené téma, které nelze správně pochopit bez jeho nadřazeného H2.
4. Vlastněný obsah: odpověď, důkazy, instrukce nebo vysvětlení mezi jedním nadpisem a dalším nadpisem stejné nebo vyšší úrovně.
5. Stabilní ID: cíl fragmentu připojený k nadpisu a zachovaný po publikaci.

Vztah zůstává platný, pokud se změní typografie. Motiv může na mobilu vykreslit H2 menším písmem, ale v HTML musí zůstat H2. Naopak, zvětšení a zvýraznění odstavce mu nedává sémantiku nadpisu ani cíl fragmentu.

Příklady designu

Designové varianty odpovídají sémantickým úrovním a skutečným stavům zalamování, nikoli libovolným barevným možnostem.

Název stránky H1: zobrazte jedinečný předmět na začátku hlavního obsahu. Podpůrný popis může následovat, ale žádné obočí, logo ani hrdinský slogan se nestane dalším H1.

Primární sekce H2: zajistěte, aby byla sekce srozumitelná z obsahu a následujte ji obsahem, který stanoví rozsah.

Podsekce H3: použijte nižší úroveň, protože téma je podřazené, nikoli proto, že designér chce menší text.

Zalomený nadpis: povolte přirozené zalomení na dva řádky na úzkých obrazovkách. Nezkracujte jasný nadpis na nejednoznačný popisek jen proto, aby zůstal na jednom řádku.

Stavy kotvení: zobrazte hover a fokus klávesnice, aniž by kotva byla jediným způsobem, jak pochopit cíl. Přímá navigace musí posunout jakékoli lepící záhlaví tak, aby nadpis nebyl skrytý.

Parametry

Systém nadpisů je spíše dokumentační smlouvou než dekorativní komponentou. Jeho parametry definují osnovu, text, který čtenáři vidí, obsah, který každý uzel vlastní, a URL, pomocí kterého lze na daný uzel odkazovat.

Limity počtu znaků a slov jsou redakční pásma, nikoli důvody k vynechání potřebné specifičnosti. 94znakový nadpis, který rozlišuje dva podobné postupy, je lepší než krátký, ale zavádějící. Strukturální limity jsou přísné: jeden H1, žádné přeskočené úrovně, žádná duplicitní ID a žádné prázdné sekce.

Syntaxe a příklady kódu

Kanonická přenosná forma obaluje nativní osnovu direktivou heading-system. První nadpis odpovídá názvu dokumentu; další nadpisy zůstávají uspořádanými uzly obsahu. Explicitní ID se přidávají, jakmile se nadpisy stanou veřejnými.

Přenosná Markdown direktiva

:::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.
:::

Při publikaci fixujte stabilní ID, aby budoucí úpravy textu negenerovaly nová:

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

Hugo shortcode

{{< 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 >}}

Toto je smlouva Hugo adaptéru, nikoli tvrzení, že toto úložiště registruje shortcode heading-system. Hugo implementace může nadále vykreslovat H1 z frontmatteru a nadpisy těla pomocí Markdown, jako to dělá tato stránka, pokud ověřuje stejnou hierarchii a zachovává explicitní ID.

WordPress blok

<!-- 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 by měl ukládat H1 do pole názvu stránky nebo schváleného hero bloku, nikoli jako druhý blok nadpisu v těle článku. Nastavte HTML kotvu každého publikovaného nadpisu explicitně, aby pozdější úprava znění tištěně nezměnila jeho URL.

Příklady

Dobře: osnova předpovídá úplné odpovědi

# 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.

Toto funguje, protože H1 uvádí jeden úkol, každý H2 pojmenovává primární fázi, každý H3 patří ke svému nadřazenému prvku a každý popisek je následován obsahem, který plní jeho slib. Čtenář může proskenovat osnovu a předpovědět, kde jsou pokryty prahové hodnoty, výjimky a testování.

Špatně: stylování nahrazuje hierarchii

# Invoice approval

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

Toto selhává ze čtyř nezávislých důvodů. Přeskakuje z H1 na H3, používá popisky, které nepředpovídají odpověď, umísťuje nadpisy vedle sebe bez vlastněného obsahu a ponechává „Exceptions" bez vysvětlení před dalším nadpisem. Výsledná osnova naznačuje pokrytí, které stránka neposkytuje. Také vytváří slabá automaticky generovaná ID jako #other, která jsou při citování mimo stránku nejednoznačná.

Schema markup a přístupnost

Nadpisy nepotřebují samostatný typ Schema.org. H1 obvykle poskytuje nebo zrcadlí headline entity Article, TechArticle nebo jiné vhodné entity stránky, ale viditelné znění a JSON-LD musí popisovat stejný předmět. Sekce H2 a H3 zůstávají HTML strukturou; nevytvářejte schéma entitu pro každý nadpis. Nadpis nazvaný „Často kladené otázky" také sám o sobě nevytváří markup FAQPage – viditelná data otázek a odpovědí musí splňovat smlouvu FAQ prvku.

Přístupnost závisí na sémantickém HTML a logickém pořadí. Uživatelé čteček obrazovky mohou procházet podle nadpisů, prohlížet seznam nadpisů nebo přeskakovat přímo mezi sekcemi. Tento pracovní postup se rozbije, když stránka přeskočí úrovně kvůli stylování, použije tučné odstavce jako falešné nadpisy nebo zahrnuje utility a nadpisy článků do jedné nesoudržné hierarchie.

Používejte skutečné elementy <h1>, <h2> a <h3>. Udržujte text nadpisu viditelný; aria-label nesmí nahrazovat jasné znění na obrazovce. Ovládací prvky kotvy potřebují popisný přístupný název, viditelný fokus klávesnice a klikací cíl oddělený od textu nadpisu, pokud by odkazování na celý nadpis matilo výběr. Když se načte URL fragmentu, fokus klávesnice se nemusí pohybovat automaticky, ale cílový nadpis musí být viditelný a nesmí být zakrytý lepícím záhlavím.

ID nadpisů musí být v rámci stránky jedinečná a měla by začínat písmenem. Udržujte je malými písmeny, spojená pomlčkami, čitelná a bez přechodných dat nebo pozičních čísel. Stabilní ID může zůstat #verify-results, i když se viditelný nadpis zlepší z „Verify the results" na „Verify the new credential works." Pokud se význam sekce zcela změní, vytvořte nové ID a zachovejte starý fragment prostřednictvím aliasu nebo zdokumentovaného chování přesměrování, pokud to platforma podporuje. Samostatná specifikace kotvících odkazů upravuje podrobnosti kotvící navigace a interakce.

Pravidla pro psaní

Napište osnovu stránky před doladěním jednotlivých popisků. Každý nadpis by měl odpovídat na otázku „Co se zde dozvím, rozhodnu nebo udělám?" konkrétním jazykem. Preferujte „Porovnejte náklady na měsíční a roční fakturaci" před „Úvahy o ceně" a „Proč import odmítá duplicitní ID" před „Řešení problémů." Popisné neznamená mnohomluvné; znamená, že popisek předpovídá skutečný obsah sekce.

Použijte jeden H1 o 20–80 znacích. Preferujte nadpisy H2 a H3 o 2–12 slovech a maximálně 90 znacích. Dlouhý průvodce má obvykle 3–12 sekcí H2. H2 potřebuje alespoň jednu větu o rozsahu nebo odpovědi před jakýmkoli H3. Použijte dvě nebo více sekcí H3 pod nadřazeným prvkem, pokud členění pomáhá; jediný H3 často signalizuje, že by se jeho obsah měl sloučit do H2.

Používejte větná velká písmena, pokud vlastní podstatné jméno nebo název produktu nevyžaduje velká písmena. Otázky jsou vhodné, když sekce na konkrétní otázku odpovídá okamžitě. Oznamovací popisky se hodí pro fáze, kritéria, zjištění a specifikace. Udržujte paralelní sekce gramaticky paralelní: používejte slovesa pro sekvenci procesu, podstatná jména pro srovnávací kritéria nebo otázky pro sadu FAQ.

Nikdy nevkládejte do textu nadpisu:

• Markdown odkazy nebo holé URL; vytvářejí konkurenční cíle a nestabilní přístupné názvy.
• Značky poznámek pod čarou nebo citace zdrojů; umístěte důkazy do vlastněného obsahu.
• Emoji používané jako strukturální popisky, stavové odznaky nebo dekorativní předpony.
• Ruční číslování, pokud typ příspěvku nedefinuje stabilní uspořádanou sekvenci.
• Jazyk CTA jako „Koupit nyní," cenová tvrzení, naléhavost nebo propagační odznaky.
• Instrukce o stylování, HTML zalomení řádků nebo zkratky specifické pro zařízení.
• Druhou větu, která patří do odstavce níže.

Nepište chytré popisky, které závisí na okolním textu, aby dávaly smysl. „Zápletka houstne" může vyhovovat hlasu eseje, ale výsledku vyhledávání, obsahu, seznamu nadpisů čtečky obrazovky nebo citaci AI neposkytuje žádný použitelný kontext. Osobnost uchovejte ve vysvětlení po přesném nadpisu.

Typy příspěvků, které jej používají

Pole postTypes ve frontmatteru řídí tyto vztahy. Každý uvedený typ příspěvku používá stejnou hierarchickou smlouvu, zatímco jeho vlastní anatomie určuje přesné názvy sekcí a pořadí.

Kontrolní seznam QA

• Stránka vykresluje přesně jeden viditelný H1 a ten pojmenovává skutečný předmět stránky.
• Osnova postupuje od H1 k H2 k H3 bez přeskočených úrovní.
• Každý H3 má jednoho jasného předcházejícího nadřazeného H2.
• Každý nadpis je následován smysluplným vlastněným obsahem před dalším nadpisem.
• Každý H2 obsahuje orientační nebo odpovědnou větu před svým prvním H3.
• Text nadpisu je popisný, když je čten samostatně v obsahu nebo seznamu nadpisů čtečky obrazovky.
• Paralelní sekce používají paralelní gramatiku a ekvivalentní úrovně.
• Úrovně nadpisů odrážejí vztahy, nikoli velikost písma nebo požadovanou vizuální váhu.
• Typové účely stále používají své požadované prvky; nadpisy nenapodobují komponenty.
• Každý publikovaný nadpis má jedno jedinečné, čitelné, stabilní fragmentové ID.
• Stávající fragmentová ID zůstávají nezměněna, když je viditelné znění upraveno beze změny významu sekce.
• Přímá navigace na fragment ponechá cíl viditelný pod jakýmkoli lepícím záhlavím.
• Text nadpisu neobsahuje žádné odkazy, citace, emoji popisky, propagační odznaky ani ruční zalomení řádků.
• HTML osnova zůstává soudržná i s přítomnými nabídkami, kartami, accordiony, modálními okny a dalšími komponentami stránky.
• Vykreslená stránka funguje v úzké šířce, přičemž dvouřádkové nadpisy se zalomí bez oříznutí nebo překryvu.

Zamítněte stránku, když vizuální design vypadá vyleštěně, ale osnova selhává. Vady nadpisů se sčítají: jedna přeskočená úroveň nebo prázdná sekce nutí každého downstream konzumenta pracovat více na rekonstrukci vztahů, které měl zdroj přímo uvést.

FAQ

Níže uvedené otázky řeší případy, které nejpravděpodobněji vytvářejí nekonzistentní osnovy napříč editory a platformami. Jejich autoritativní hodnoty jsou uloženy ve strukturovaném [[faq]] frontmatteru výše, aby viditelný výstup a případný způsobilý výstup schématu mohly sdílet jeden zdroj.