Sistem de Titluri: Reguli pentru H1, H2 și H3

Un sistem de titluri este setul ordonat format dintr-un titlu de pagină și etichetele secțiunilor sale. Transformă o pagină lungă într-un traseu lizibil pentru oameni și într-o structură lizibilă de mașină pentru motoarele de căutare, tehnologiile asistive și sistemele de răspuns AI.

Titlul paginii de mai sus este singurul H1 al acestei pagini. Fiecare specificație majoră de mai jos este un H2, iar orice subdiviziune dintr-o secțiune majoră este un H3. Acea structură vizibilă este elementul redat: nivelurile sale exprimă relații, nu dimensiuni de font.

De ce contează acest element

Cititorii rareori consumă o pagină lungă dintr-o singură parcurgere neîntreruptă. Ei scanează în căutarea unei întrebări recognoscibile, compară etichetele secțiunilor cu nevoia lor curentă și decid unde să încetinească. Titlurile descriptive reduc acest efort, deoarece fiecare face o mică promisiune despre ceea ce urmează. „Cum-ID-urile-stabile-de-titluri-păstrează-citările” este util dintr-o privire; „Câteva gânduri în plus” nu este.

Aceeași ierarhie sprijină și extractibilitatea automată, ceea ce înseamnă că un sistem automatizat poate identifica o secțiune, poate înțelege cum se raportează la subiectul paginii și o poate recupera fără a o confunda cu o secțiune vecină. H1 stabilește subiectul paginii. H2 împarte acest subiect în preocupări principale. H3 restrânge un H2 la o metodă, un caz, un criteriu sau o excepție. Un nivel sărit ascunde această relație și forțează un parser să deducă dacă o subsecțiune este un element frate, un copil sau un bloc fără legătură.

Titlurile creează și secțiuni adresabile. Un identificator de fragment este partea dintr-un URL după #, cum ar fi #qa-checklist. Rezultatele de căutare, linkurile interne, marcajele browserului și răspunsurile AI pot indica exact acea destinație. Un ID auto-generat redenumit neglijent poate astfel distruge un URL chiar dacă pagina în sine există în continuare. Titlul nu este decorativ: textul său definește secțiunea, iar ID-ul său devine o adresă publică durabilă.

Respectă regulile de redactare a elementelor atunci când scopul unei secțiuni se potrivește cu un element tipizat. Un H2 numit „Avertisment” nu înlocuiește o cutie de avertizare, iar un H2 numit „Comparație” nu înlocuiește un tabel de comparație. Titlurile oferă ierarhia documentului; elementele tipizate oferă structură specifică scopului. Ambele pot fi necesare.

Când să folosești acest sistem

Folosește sistemul de titluri pe fiecare pagină substanțială care poate fi indexată. Chiar și o pagină scurtă are nevoie de un singur H1. Adaugă secțiuni H2 atunci când cititorul trebuie să se deplaseze între întrebări, etape, criterii sau grupuri de dovezi distincte. Adaugă subsecțiuni H3 doar atunci când un H2 conține cel puțin două părți cu adevărat distincte care beneficiază de o navigare separată.

Aproape ratările sunt etichete vizuale care arată ca titlurile dar nu aparțin structurii articolului:

• Un titlu de card denumește un card repetat; nu este automat o secțiune de document.
• O etichetă de tip callout, cum ar fi „Sfat” sau „Important”, identifică tipul cutiei; nu devine un H2 doar pentru că este îngroșată.
• Un titlu de diagramă identifică o figură. Acesta aparține legendelor figurii sau numelui accesibil, cu excepția cazului în care diagrama începe o secțiune completă.
• O etichetă de meniu de navigare, un breadcrumb, un tab, un control accordion, un titlu de footer și un titlu de modal pot necesita semantică de componentă, dar nu intră în ierarhia principală a articolului.
• Un slogan promoțional mare este text de prezentare. Dimensiunea fontului nu îl poate promova la rangul de H1 al documentului.

Nu adăuga un titlu doar pentru a introduce o singură propoziție, a împărți o explicație continuă sau a crea un spațiu vizual de respiro. Folosește spațierea între paragrafe sau editarea pentru aceste sarcini. Un titlu util marchează o secțiune suficient de substanțială pentru a răspunde unei nevoi distincte a cititorului.

Unde să plasezi titlurile

Poziția exprimă relația de descendență. Plasează H1 la începutul conținutului principal, după breadcrumbs sau altă navigare a site-ului și înainte de introducere. Plasează fiecare H2 înaintea unei secțiuni primare. Plasează un H3 doar după H2-ul părinte și conținutul de orientare al părintelui, niciodată înainte de primul H2 și niciodată ca un element de același nivel ales pentru aspect vizual.

Două titluri nu pot fi adiacente în conținutul unui articol redactat. Fiecare titlu trebuie să dețină conținut util înainte de următorul titlu de același nivel sau mai profund. Această regulă previne etichetele de secțiune goale, oferă cititorilor context înaintea unei liste de subsecțiuni și creează pasaje extractibile, nu doar o structură goală.

Anatomie

Anatomia etichetată are cinci părți:

1. H1: subiectul unic al paginii și vârful structurii conținutului.
2. H2: o întrebare, etapă sau dimensiune principală în cadrul acelui subiect.
3. H3: un subiect copil care nu poate fi înțeles corect fără H2-ul său părinte.
4. Conținut deținut: răspunsul, dovezile, instrucțiunile sau explicația dintre un titlu și următorul titlu de același nivel sau superior.
5. ID stabil: destinația de fragment atașată titlului și păstrată după publicare.

Relația rămâne valabilă dacă tipografia se schimbă. O temă poate reda H2 cu un font mai mic pe mobil, dar trebuie să rămână H2 în HTML. Invers, a face un paragraf mare și îngroșat nu îi oferă semantică de titlu sau destinație de fragment.

Exemple de design

Variantele de design corespund nivelurilor semantice și stărilor reale de împachetare, nu opțiunilor arbitrare de culoare.

Titlu de pagină H1: arată subiectul unic la începutul conținutului principal. Poate urma o descriere de sprijin, dar nicio sprâncene, logo sau slogan de erou nu devine un alt H1.

Secțiune primară H2: asigură-te că secțiunea este ușor de înțeles dintr-un cuprins și urmează cu conținut care stabilește domeniul.

Subsecțiune H3: folosește nivelul mai mic pentru că subiectul este subordonat, nu pentru că designerul dorește un text mai mic.

Titlu împărșit pe rânduri: permite o împărțire naturală pe două rânduri pe ecrane înguste. Nu scurta un titlu clar într-o etichetă ambiguă doar pentru a-l menține pe un singur rând.

Stări ancora: arată hover și focus tastatură fără a face ancora singurul mod de a înțelege destinația. Navigarea directă trebuie să compenseze orice header lipicios, astfel încât titlul să nu fie ascuns.

Parametri

Sistemul de titluri este un contract de document, nu o componentă decorativă. Parametrii săi definesc structura, textul pe care cititorii îl văd, conținutul pe care fiecare nod îl deține și URL-ul prin care acel nod poate fi accesat.

Limitele de caractere și cuvinte sunt benzi editoriale, nu motive pentru a omite specificitatea necesară. Un titlu de 94 de caractere care distinge două proceduri similare este mai bun decât unul scurt dar înșelător. Limitele structurale sunt stricte: un H1, fără niveluri sărite, fără ID-uri duplicate și fără secțiuni goale.

Sintaxă și exemple de cod

Forma portabilă canonică îmbracă structura nativă într-o directivă heading-system. Primul titlu se mapează la titlul documentului; titlurile ulterioare rămân noduri de conținut ordonate. ID-urile explicite sunt adăugate odată ce titlurile devin publice.

Directivă Markdown portabilă

:::heading-system
# Rotă o cheie API fără timp de nefuncționare

Înlocuiește credentialul în fiecare serviciu dependent înainte de a revoca cheia veche.

## Pregătește înlocuirea

Înregistrează fiecare serviciu care citește în prezent credentialul.

### Identifică consumatorii ascunși

Verifică joburile programate, secretele de deploy și integrările locale.

## Verifică și revocă

Testează înlocuirea, apoi revocă cheia expusă.
:::

La publicare, fixează ID-urile stabile pentru a preveni ca editările viitoare de text să le regenereze:

## Pregătește înlocuirea {#prepare-replacement}
### Identifică consumatorii ascunși {#identify-hidden-consumers}

Shortcode Hugo

{{< heading-system h1="Rotă o cheie API fără timp de nefuncționare" >}}
## Pregătește înlocuirea {#prepare-replacement}

Înregistrează fiecare serviciu care citește în prezent credentialul.

### Identifică consumatorii ascunși {#identify-hidden-consumers}

Verifică joburile programate, secretele de deploy și integrările locale.
{{< /heading-system >}}

Acesta este contractul adaptorului Hugo, nu o afirmație că acest registru înregistrează un shortcode heading-system. O implementare Hugo poate continua să redea H1 din frontmatter și titlurile corpului prin Markdown, așa cum face această pagină, cu condiția să valideze aceeași ierarhie și să păstreze ID-urile explicite.

Bloc WordPress

<!-- wp:heading {"level":2,"anchor":"prepare-replacement"} -->
<h2 id="prepare-replacement">Pregătește înlocuirea</h2>
<!-- /wp:heading -->

<p>Înregistrează fiecare serviciu care citește în prezent credentialul.</p>

<!-- wp:heading {"level":3,"anchor":"identify-hidden-consumers"} -->
<h3 id="identify-hidden-consumers">Identifică consumatorii ascunși</h3>
<!-- /wp:heading -->

WordPress ar trebui să stocheze H1 în câmpul titlului paginii sau într-un bloc hero aprobat, nu ca un al doilea bloc de titlu în corpul articolului. Setează ancora HTML a fiecărui titlu publicat explicit, astfel încât o modificare ulterioară a formulării să nu schimbe în tăcere URL-ul său.

Exemple

Corect: structura anticipează răspunsuri complete

# Cum să alegi un flux de aprobare a facturilor

## Definește riscul de aprobare
Explică ce valori ale facturilor, furnizori și excepții necesită revizuire.

### Stabilește praguri valorice
Atribuie un aprobator numit fiecărui prag și documentează ce se întâmplă la limită.

### Direcționează excepțiile de politică
Trimite comenzile de achiziție lipsă și detaliile bancare modificate pe o cale separată de revizuire.

## Testează fluxul de lucru
Rulează facturile obișnuite și excepționale prin întregul traseu înainte de lansare.

Acest exemplu funcționează deoarece H1 enunță o sarcină, fiecare H2 denumește o etapă principală, fiecare H3 aparține părintelui său, iar fiecare etichetă este urmată de conținut care își îndeplinește promisiunea. Un cititor poate scana structura și poate anticipa unde sunt acoperite pragurile, excepțiile și testarea.

Greșit: stilizarea substituie ierarhia

# Aprobare facturi

### Lucruri de luat în considerare
## Mai multe informații
### Excepții
### Altele

Acest exemplu eșuează din patru motive independente. Trece de la H1 la H3, folosește etichete care nu anticipează un răspuns, plasează titlurile unul lângă altul fără conținut deținut și lasă „Excepții” fără nicio explicație înainte de următorul titlu. Structura rezultată sugerează o acoperire pe care pagina nu o oferă. De asemenea, creează ID-uri auto-generate slabe, cum ar fi #altele, care sunt ambigue atunci când sunt citate în afara paginii.

Markup de schemă și accesibilitate

Titlurile nu au nevoie de un tip Schema.org independent. H1 furnizează sau oglindește de obicei headline-ul unui Article, TechArticle sau al altei entități de pagină adecvate, dar formularea vizibilă și JSON-LD trebuie să descrie același subiect. Secțiunile H2 și H3 rămân structură HTML; nu inventa o entitate de schemă pentru fiecare titlu. Un titlu numit „Întrebări frecvente” nu creează prin el însuși markup FAQPage — datele vizibile de întrebare și răspuns trebuie să satisfacă contractul elementului FAQ.

Accesibilitatea depinde de HTML semantic și ordinea logică. Utilizatorii de cititoare de ecran pot naviga după titlu, pot inspecta o listă de titluri sau pot sări direct între secțiuni. Acest flux de lucru se strică atunci când pagina sare niveluri pentru stilizare, folosește paragrafe îngroșate ca titluri false sau include titluri de utilitate și de articol într-o singură ierarhie incoerentă.

Folosește elemente reale <h1>, <h2> și <h3>. Menține textul titlului vizibil; un aria-label nu trebuie să înlocuiască o formulare clară pe ecran. Controalele ancora au nevoie de un nume accesibil descriptiv, un focus tastatură vizibil și o țintă de clic separată de textul titlului atunci când linkuirea întregului titlu ar confunda selecția. Când un URL de fragment se încarcă, focusul tastaturii nu trebuie să se mute automat, dar titlul destinație trebuie să fie vizibil și să nu fie acoperit de un header lipicios.

ID-urile titlurilor trebuie să fie unice în cadrul paginii și ar trebui să înceapă cu o literă. Menține-le cu litere mici, cu cratimă, lizibile și fără date tranzitorii sau numere de poziție. Un ID stabil poate rămâne #verify-results chiar dacă titlul vizibil se îmbunătățește de la „Verifică rezultatele” la „Verifică noul credential funcționează.” Dacă sensul secțiunii se schimbă complet, creează un ID nou și păstrează fragmentul vechi printr-un alias sau un comportament documentat de redirecționare atunci când platforma îl suportă. Specificația separată pentru linkuri ancora guvernează navigarea prin ancoră și detaliile de interacțiune.

Reguli de redactare

Scrie structura paginii înainte de a perfecționa etichetele individuale. Fiecare titlu ar trebui să răspundă la întrebarea „ce voi învăța, decide sau face aici?” într-un limbaj concret. Preferă „Compară costurile de facturare anuale și lunare” în loc de „Considerații de preț,” și „De ce importul respinge ID-urile duplicate” în loc de „Depanare.” Descriptiv nu înseamnă verbose; înseamnă că eticheta anticipă conținutul real al secțiunii.

Folosește un singur H1 de 20–80 de caractere. Preferă titlurile H2 și H3 de 2–12 cuvinte și nu mai mult de 90 de caractere. Un ghid lung are în mod normal 3–12 secțiuni H2. Un H2 are nevoie de cel puțin o propoziție de domeniu sau de răspuns înainte de orice H3. Folosește două sau mai multe secțiuni H3 sub un părinte atunci când subdivizarea ajută; un singur H3 indică adesea că conținutul său ar trebui îmbinat în H2.

Folosește literă mică cu excepția primei litere (sentence case), cu excepția cazului în care un nume propriu sau un nume de produs necesită majuscule. Întrebările sunt potrivite atunci când secțiunea răspunde exact la acea întrebare imediat. Etichetele declarative se potrivesc etapelor, criteriilor, constatărilor și specificațiilor. Menține secțiunile paralele gramatical paralele: folosește verbe pentru o secțiune de proces, substantive pentru criterii de comparație sau întrebări pentru un set de întrebări frecvente.

Nu pune niciodată următoarele în interiorul textului unui titlu:

• Linkuri Markdown sau URL-uri brute; ele creează destinații concurente și nume accesibile instabile.
• Marcatori de notă de subsol sau citări ale surselor; plasează dovezile în conținutul deținut.
• Emoji folosite ca etichete structurale, insigne de stare sau prefixe decorative.
• Numerotare manuală, cu excepția cazului în care tipul de postare definește o secvență ordonată stabilă.
• Limbaj de tip CTA, cum ar fi „Cumpără acum,” pretenții de preț, urgență sau insigne promoționale.
• Instrucțiuni de stilizare, întreruperi de linie HTML sau abrevieri specifice dispozitivului.
• O a doua propoziție care aparține paragrafului de mai jos.

Nu scrie etichete inteligente care depind de textul înconjurător pentru a avea sens. „Intriga se îngroașă” poate fi potrivit pentru tonul unui eseu, dar nu oferă niciun context util unui rezultat de căutare, unui cuprins, unei liste de titluri pentru cititoare de ecran sau unei citări AI. Păstrează personalitatea în explicația de după un titlu precis.

Tipuri de postări care îl folosesc

Matricea postTypes din frontmatter conduce aceste relații. Fiecare tip de postare listat folosește același contract de ierarhie, în timp ce propria sa anatomie determină numele și ordinea exactă a secțiunilor.

Listă de verificare QA

• Pagina redă exact un H1 vizibil, iar acesta denumește subiectul real al paginii.
• Structura trece de la H1 la H2 la H3 fără niveluri sărite.
• Fiecare H3 are un părinte H2 clar anterior.
• Fiecare titlu este urmat de conținut deținut semnificativ înainte de următorul titlu.
• Fiecare H2 include o propoziție de orientare sau de răspuns înainte de primul său H3.
• Textul titlului este descriptiv atunci când este citit singur într-un cuprins sau într-o listă de titluri pentru cititoare de ecran.
• Secțiunile paralele folosesc gramatică paralelă și niveluri echivalente.
• Nivelurile titlurilor reflectă relații, nu dimensiunea fontului sau greutatea vizuală dorită.
• Scopurile tipizate încă folosesc elementele lor necesare; titlurile nu imită componente.
• Fiecare titlu publicat are un ID de fragment unic, lizibil și stabil.
• ID-urile de fragment existente rămân neschimbate atunci când formularea vizibilă este editată fără a schimba sensul secțiunii.
• Navigarea directă pe fragment lasă destinația vizibilă sub orice header lipicios.
• Textul titlului nu conține linkuri, citări, etichete cu emoji, insigne promoționale sau întreruperi manuale de linie.
• Structura HTML rămâne coerentă în prezența meniurilor, cardurilor, accordioanelor, modalurilor și altor componente ale paginii.
• Pagina redată funcționează la lățime îngustă, cu titluri pe două rânduri care se împart fără tăiere sau suprapunere.

Respinge pagina atunci când designul vizual arată șlefuit dar structura eșuează. Defectele titlurilor se cumulează: un nivel sărit sau o secțiune goală face ca fiecare consumator din aval să muncească mai mult pentru a reconstrui relațiile pe care sursa ar fi trebuit să le enunțe direct.

Întrebări frecvente

Întrebările de mai jos rezolvă cazurile cele mai susceptibile de a crea structuri inconsistente între editori și platforme. Valorile lor autoritare se află în frontmatter-ul structurat [[faq]] de mai sus, astfel încât rezultatul vizibil și orice rezultat de schemă eligibil să poată împărtăși o singură sursă.