Systém nadpisov: pravidlá pre H1, H2 a H3

Systém nadpisov je usporiadaná množina jedného názvu stránky a jej sekčných označení. Premieňa dlhú stránku na čitateľnú trasu pre ľudí a strojovo čitateľnú osnovu pre vyhľadávače, asistenčné technológie a systémy AI odpovedí.

Názov stránky vyššie je jediný H1 tejto stránky. Každá hlavná špecifikácia nižšie je H2 a každé rozdelenie vnútri hlavnej sekcie je H3. Táto živá osnova je vykreslený prvok: jeho úrovne vyjadrujú vzťahy, nie veľkosti písma.

Prečo na tomto prvku záleží

Čitatelia len zriedka konzumujú dlhú stránku v jednom neprerušovanom prechode. Skenujú text pri hľadaní rozpoznateľnej otázky, porovnávajú označenia sekcií so svojou aktuálnou potrebou a rozhodujú sa, kde spomaliť. Popisné nadpisy túto námahu znižujú, pretože každý z nich dáva malý sľub o tom, čo nasleduje. „Ako stabilné ID nadpisov chránia citácie“ je užitočné na prvý pohľad; „Niekoľko ďalších myšlienok“ nie je.

Rovnaká hierarchia podporuje strojovú extrahovateľnosť, čo znamená, že automatizovaný systém dokáže identifikovať sekciu, pochopiť, ako súvisí s témou stránky, a získať ju bez toho, aby si ju pomýlil so susednou sekciou. H1 stanovuje predmet stránky. H2 rozdeľuje tento predmet na primárne oblasti. H3 zužuje jednu H2 na metódu, prípad, kritérium alebo výnimku. Preskočená úroveň skrýva tento vzťah a núti parser odvodzovať, či je podsekcia súrodenecká, dcérska alebo nesúvisiaci blok.

Nadpisy tiež vytvárajú adresovateľné sekcie. Fragment identifikátora je časť URL za znakom #, napríklad #qa-kontrolny-zoznam. Výsledky vyhľadávania, interné odkazy, záložky prehliadača a odpovede AI môžu smerovať na tento presný cieľ. Náhodne premenované automaticky generované ID preto môže zlomiť URL, aj keď samotná stránka stále existuje. Nadpis nie je dekorácia: jeho text definuje sekciu a jeho ID sa stáva trvalou verejnou adresou.

Postupujte podľa pravidiel písania prvkov , keď účel sekcie zodpovedá typovanému prvku. H2 s názvom „Varovanie“ nenahrádza varovný box a H2 s názvom „Porovnanie“ nenahrádza porovnávaciu tabuľku. Nadpisy poskytujú hierarchiu dokumentu; typované prvky poskytujú štruktúru špecifickú pre daný účel. Oboje môže byť potrebné.

Kedy ho použiť

Použite systém nadpisov na každej obsahovo významnej indexovateľnej stránke. Aj krátka stránka potrebuje jeden H1. Pridajte sekcie H2, keď sa čitateľ musí pohybovať medzi odlišnými otázkami, fázami, kritériami alebo skupinami dôkazov. Pridajte podsekcie H3 len vtedy, keď H2 obsahuje aspoň dve skutočne odlišné časti, ktoré profitujú z oddelenej navigácie.

Takmer zásahy sú vizuálne označenia, ktoré vyzerajú ako nadpisy, ale nepatria do osnovy článku:

• Názov karty pomenúva jednu opakovanú kartu; nie je automaticky sekciou dokumentu.
• Označenie výzvy ako „Tip“ alebo „Dôležité“ identifikuje typ boxu; nestáva sa H2 len preto, že je tučné.
• Názov grafu identifikuje obrázok. Patrí do popisu obrázka alebo prístupného názvu, pokiaľ graf nezačína kompletnú sekciu.
• Označenie navigačného menu, drobčeková navigácia, karta, ovládací prvok accordionu, hlavička päty a názov modálneho okna môžu potrebovať sémantiku komponentu, ale nevstupujú do hlavnej hierarchie článku.
• Veľký propagačný slogan je text na zobrazenie. Veľkosť písma ho nemôže povýšiť na H1 dokumentu.

Nepridávajte nadpis len kvôli uvedeniu jednej vety, rozdeleniu súvislého vysvetlenia alebo vytvoreniu vizuálneho priestoru. Na tieto účely použite odsekové medzery alebo úpravy. Užitočný nadpis označuje sekciu dostatočne významnú na to, aby odpovedala na konkrétnu potrebu čitateľa.

Kam umiestniť nadpisy

Umiestnenie vyjadruje rodičovstvo. Umiestnite H1 na začiatok hlavného obsahu, za drobčekovou navigáciou alebo inou navigáciou stránky a pred úvod. Umiestnite každý H2 pred primárnu sekciu. Umiestnite H3 až po jeho rodičovskom H2 a orientačnom obsahu rodiča, nikdy pred prvým H2 a nikdy ako rovesníka zvoleného kvôli vizuálnemu vzhľadu.

Dva nadpisy nesmú byť v autorovanom obsahu článku susedné. Každý nadpis musí vlastniť užitočný obsah pred ďalším nadpisom rovnakej alebo hlbšej úrovne. Toto pravidlo zabraňuje prázdnym označeniam sekcií, poskytuje čitateľom kontext pred zoznamom podsekcií a vytvára extrahovateľné pasáže namiesto holého obrysu.

Anatómia

Označená anatómia má päť častí:

1. H1: jedinečný predmet stránky a vrchol osnovy obsahu.
2. H2: primárna otázka, fáza alebo dimenzia v rámci tohto predmetu.
3. H3: dcérska téma, ktorú nemožno správne pochopiť bez jej rodičovského H2.
4. Vlastnený obsah: odpoveď, dôkazy, inštrukcie alebo vysvetlenie medzi jedným nadpisom a ďalším nadpisom na rovnakej alebo vyššej úrovni.
5. Stabilné ID: cieľ fragmentu pripojený k nadpisu a zachovaný po publikovaní.

Vzťah zostáva platný, ak sa typografia zmení. Téma môže na mobile vykresliť H2 menším písmom, ale v HTML musí zostať H2. Naopak, zväčšenie a zvýraznenie odseku mu nedáva sémantiku nadpisu ani cieľ fragmentu.

Príklady dizajnu

Dizajnové varianty zodpovedajú sémantickým úrovniam a reálnym stavom zalamovania, nie ľubovoľným farebným možnostiam.

H1 názov stránky: ukážte jedinečný predmet na začiatku hlavného obsahu. Podporný popis môže nasledovať, ale žiadne obočie, logo ani slogan hrdinu sa nestáva ďalším H1.

H2 primárna sekcia: urobte sekciu zrozumiteľnou z obsahu a po nej nasleduje obsah, ktorý stanovuje rozsah.

H3 podsekcia: použite nižšiu úroveň, pretože téma je podradená, nie preto, že dizajnér chce menší text.

Zalomený nadpis: povoľte prirodzené zalomenie na dva riadky na úzkych obrazovkách. Neskracujte jasný nadpis na nejednoznačné označenie len preto, aby zostal na jednom riadku.

Stavy s kotvou: ukážte hover a zameranie klávesnicou bez toho, aby bola kotva jediným spôsobom, ako pochopiť cieľ. Priama navigácia musí posunúť akúkoľvek lepiacu hlavičku tak, aby nadpis nebol skrytý.

Parametre

Systém nadpisov je skôr dokumentová zmluva než dekoratívny komponent. Jeho parametre definujú osnovu, text, ktorý čitatelia vidia, obsah, ktorý každý uzol vlastní, a URL, pomocou ktorého možno uzol dosiahnuť.

Limity znakov a slov sú editorské pásma, nie dôvody na vynechanie potrebnej špecifickosti. 94-znakový nadpis, ktorý rozlišuje dva podobné postupy, je lepší ako krátky, ale zavádzajúci. Štrukturálne limity sú prísne: jeden H1, žiadne preskočené úrovne, žiadne duplicitné ID a žiadne prázdne sekcie.

Syntax a príklady kódu

Kanonická prenosná forma obaľuje natívnu osnovu direktívou heading-system. Prvý nadpis sa mapuje na názov dokumentu; neskoršie nadpisy zostávajú usporiadanými uzlami obsahu. Explicitné ID sa pridávajú až po tom, čo sa nadpisy stanú verejnými.

Prenosná Markdown direktíva

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

Pri publikovaní pripnite stabilné ID, aby budúce úpravy textu nevygenerovali 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 Hugo adaptér kontrakt, nie tvrdenie, že toto úložisko registruje shortcode heading-system. Hugo implementácia môže naďalej vykresľovať H1 z frontmatteru a nadpisy tela cez Markdown, ako to robí táto stránka, za predpokladu, že validuje rovnakú hierarchiu a zachováva 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 mal ukladať H1 do poľa názvu stránky alebo schváleného hrdinského bloku, nie ako druhý blok nadpisu v tele článku. Nastavte HTML kotvu každého publikovaného nadpisu explicitne, aby neskoršia úprava znenia ticho nezmenila jeho URL.

Príklady

Dobrý: osnova predpovedá úplné odpovede

# 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, pretože H1 uvádza jednu úlohu, každý H2 pomenúva primárnu fázu, každý H3 patrí k svojmu rodičovi a za každým označením nasleduje obsah, ktorý plní jeho sľub. Čitateľ môže skenovať osnovu a predvídať, kde sú pokryté prahové hodnoty, výnimky a testovanie.

Zlý: štýlovanie nahrádza hierarchiu

# Invoice approval

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

Toto zlyháva zo štyroch nezávislých dôvodov. Preskakuje z H1 na H3, používa označenia, ktoré nepredpovedajú odpoveď, umiestňuje nadpisy vedľa seba bez vlastneného obsahu a ponecháva „Exceptions“ bez vysvetlenia pred ďalším nadpisom. Výsledná osnova naznačuje pokrytie, ktoré stránka neposkytuje. Taktiež vytvára slabé automaticky generované ID ako #other, ktoré sú nejednoznačné pri citovaní mimo stránky.

Schema markup a prístupnosť

Nadpisy nepotrebujú samostatný typ Schema.org. H1 bežne poskytuje alebo zrkadlí headline entity Article, TechArticle alebo inej vhodnej entity stránky, ale viditeľné znenie a JSON-LD musia opisovať rovnaký predmet. Sekcie H2 a H3 zostávajú HTML štruktúrou; nevytvárajte entitu schema pre každý nadpis. Nadpis s názvom „Často kladené otázky“ tiež sám o sebe nevytvára markup FAQPage – viditeľné údaje otázok a odpovedí musia spĺňať kontrakt prvku FAQ.

Prístupnosť závisí od sémantického HTML a logického poradia. Používatelia čítačiek obrazovky môžu navigovať podľa nadpisov, skúmať zoznam nadpisov alebo preskakovať priamo medzi sekciami. Tento pracovný postup sa rozbije, keď stránka preskakuje úrovne kvôli štýlovaniu, používa tučné odseky ako falošné nadpisy alebo zahŕňa utilitné a článkové nadpisy do jednej nesúvislej hierarchie.

Používajte skutočné elementy <h1>, <h2> a <h3>. Udržujte text nadpisu viditeľný; aria-label nesmie nahrádzať jasné znenie na obrazovke. Ovládacie prvky kotvy potrebujú popisný prístupný názov, viditeľné zameranie klávesnicou a klikací cieľ oddelený od textu nadpisu, ak by odkazovanie na celý nadpis zmiatlo výber. Keď sa načíta fragment URL, zameranie klávesnice sa nemusí pohybovať automaticky, ale cieľový nadpis musí byť viditeľný a nie prekrytý lepiacou hlavičkou.

ID nadpisov musia byť v rámci stránky jedinečné a mali by začínať písmenom. Udržujte ich malými písmenami, s pomlčkami, čitateľné a bez prechodných dátumov alebo čísel pozícií. Stabilné ID môže zostať #verify-results, aj keď sa viditeľný nadpis zlepší z „Verify the results“ na „Verify the new credential works.“ Ak sa význam sekcie úplne zmení, vytvorte nové ID a zachovajte starý fragment prostredníctvom aliasu alebo dokumentovaného presmerovania, ak to platforma podporuje. Samostatná špecifikácia kotviacich odkazov upravuje navigáciu kotiev a detaily interakcie.

Pravidlá písania

Napíšte osnovu stránky pred doladením jednotlivých označení. Každý nadpis by mal odpovedať na otázku „čo sa tu dozviem, rozhodnem alebo urobím?“ konkrétnym jazykom. Uprednostnite „Porovnajte náklady na mesačné a ročné fakturácie“ pred „Úvahy o cenách“ a „Prečo import odmieta duplicitné ID“ pred „Riešenie problémov.“ Popisné neznamená rozvláčne; znamená to, že označenie predpovedá skutočný obsah sekcie.

Použite jeden H1 s dĺžkou 20–80 znakov. Uprednostnite nadpisy H2 a H3 s dĺžkou 2–12 slov a nie viac ako 90 znakov. Dlhý sprievodca má zvyčajne 3–12 sekcií H2. H2 potrebuje aspoň jednu vetu o rozsahu alebo odpovedi pred akýmkoľvek H3. Použite dve alebo viac sekcií H3 pod rodičom, keď členenie pomáha; jeden H3 často signalizuje, že by sa jeho obsah mal zlúčiť do H2.

Používajte veľké písmená ako vo vete, pokiaľ vlastné podstatné meno alebo názov produktu nevyžaduje veľké písmená. Otázky sú vhodné, keď sekcia odpovedá na presnú otázku okamžite. Oznamovacie označenia sa hodia na fázy, kritériá, zistenia a špecifikácie. Udržujte paralelné sekcie gramaticky paralelné: používajte slovesá pre postupnosť procesov, podstatné mená pre porovnávacie kritériá alebo otázky pre sadu FAQ.

Nikdy nevkladajte do textu nadpisu:

• Markdown odkazy alebo surové URL; vytvárajú konkurujúce ciele a nestabilné prístupné názvy.
• Značky poznámok pod čiarou alebo citácie zdrojov; umiestnite dôkazy do vlastneného obsahu.
• Emoji používané ako štrukturálne označenia, stavové odznaky alebo dekoratívne predpony.
• Manuálne číslovanie, pokiaľ typ príspevku nedefinuje stabilnú usporiadanú postupnosť.
• Jazyk CTA ako „Kúpiť teraz“, cenové tvrdenia, naliehavosť alebo propagačné odznaky.
• Inštrukcie o štýlovaní, HTML zalomenie riadkov alebo skratky špecifické pre zariadenie.
• Druhá veta, ktorá patrí do odseku nižšie.

Nepíšte dôvtipné označenia, ktoré závisia od okolitého textu, aby dávali zmysel. „Zápletka sa zamotáva“ sa môže hodiť do štýlu eseje, ale poskytuje výsledku vyhľadávania, obsahu, zoznamu nadpisov čítačky obrazovky alebo citácii AI nepoužiteľný kontext. Zachovajte osobnosť vo vysvetlení po presnom nadpise.

Typy príspevkov, ktoré ho používajú

Pole postTypes vo frontmatteri riadi tieto vzťahy. Každý uvedený typ príspevku používa rovnaký hierarchický kontrakt, zatiaľ čo jeho vlastná anatómia určuje presné názvy sekcií a poradie.

Kontrolný zoznam QA

• Stránka vykresľuje presne jeden viditeľný H1 a ten pomenúva skutočný predmet stránky.
• Osnova postupuje od H1 k H2 k H3 bez preskočených úrovní.
• Každý H3 má jedného jasného predchádzajúceho rodiča H2.
• Po každom nadpise nasleduje zmysluplný vlastnený obsah pred ďalším nadpisom.
• Každý H2 obsahuje orientačnú alebo odpovedajúcu vetu pred prvým H3.
• Text nadpisu je popisný pri čítaní samostatne v obsahu alebo v zozname nadpisov čítačky obrazovky.
• Paralelné sekcie používajú paralelnú gramatiku a ekvivalentné úrovne.
• Úrovne nadpisov odrážajú vzťahy, nie veľkosť písma alebo požadovanú vizuálnu váhu.
• Typované účely stále používajú svoje požadované prvky; nadpisy nenapodobňujú komponenty.
• Každý publikovaný nadpis má jedno jedinečné, čitateľné, stabilné fragment ID.
• Existujúce fragment ID zostávajú nezmenené, keď je viditeľné znenie upravené bez zmeny významu sekcie.
• Priama navigácia na fragment ponecháva cieľ viditeľný pod akoukoľvek lepiacou hlavičkou.
• Text nadpisu neobsahuje žiadne odkazy, citácie, emoji označenia, propagačné odznaky ani manuálne zalomenia riadkov.
• HTML osnova zostáva súvislá s menu, kartami, accordionmi, modálnymi oknami a ďalšími komponentmi stránky.
• Vykreslená stránka funguje v úzkom okne, pričom dvojriadkové nadpisy sa zalamujú bez orezania alebo prekrývania.

Zamietnite stránku, keď vizuálny dizajn vyzerá vyleštene, ale osnova zlyháva. Chyby v nadpisoch sa kumulujú: jedno preskočené ID alebo prázdna sekcia núti každého downstream konzumenta pracovať tvrdšie na rekonštrukcii vzťahov, ktoré mal zdroj uviesť priamo.

FAQ

Nižšie uvedené otázky riešia prípady, ktoré najpravdepodobnejšie vytvárajú nekonzistentné osnovy naprieč redaktormi a platformami. Ich autoritatívne hodnoty žijú v štruktúrovanom frontmatteri [[faq]] vyššie, aby viditeľný výstup a akýkoľvek oprávnený výstup schema mohli zdieľať jeden zdroj.