Structura de heading-uri

Cum funcționează heading-urile HTML

Elementele HTML <h1>–<h6> reprezintă șase niveluri de titluri pentru secțiunile unei pagini. H1 este nivelul cel mai înalt, iar H6 este nivelul cel mai jos. Împreună, acestea formează o schiță a conținutului.

În mod normal, H1 descrie subiectul principal al paginii. H2 introduce secțiunile principale, H3 marchează subsecțiunile unui H2, iar nivelurile următoare continuă aceeași logică. O pagină ar trebui, în general, să aibă un singur H1 care descrie conținutul, chiar dacă standardul HTML permite mai multe elemente H1.

Ordinea nivelurilor

Nivelurile nu trebuie să fie alese după dimensiunea vizuală a textului. Pentru aspect se folosesc reguli CSS. Un text mare creat cu <div> sau <p> nu devine heading doar prin stilizare și nu transmite aceeași structură tehnologiilor asistive.

La deschiderea unei subsecțiuni, nivelurile nu ar trebui să fie sărite. După H1 urmează H2, apoi H3, dacă există o subdiviziune. La închiderea unei subsecțiuni se poate reveni la un nivel superior pentru a începe o secțiune nouă.

Rolul în accesibilitate

Cititoarele de ecran pot genera o listă ordonată a heading-urilor. Utilizatorii pot naviga rapid de la un titlu la altul și pot înțelege ierarhia paginii. Nivelurile sărite sau titlurile neclare pot crea confuzie.

Heading-urile trebuie să fie descriptive și să indice concret scopul secțiunii. HTML semantic este preferat în locul simulării vizuale a titlurilor sau al folosirii rolurilor ARIA atunci când elementele native sunt suficiente.

Structura de heading-uri oferă o organizare semantică explicită a paginii. H1 indică tema principală, iar H2, H3 și nivelurile următoare delimitează secțiunile și subsecțiunile.

Heading-urile nu trebuie tratate ca simple locuri pentru repetarea termenilor căutați. Rolul lor principal este structural. Titlurile clare ajută cititorii să parcurgă pagina, iar implementarea semantică permite utilizatorilor de cititoare de ecran să navigheze între secțiuni. O pagină cu niveluri sărite sau cu titluri create doar prin CSS pierde această organizare explicită.

Este prudent ca fiecare secțiune să aibă un titlu descriptiv și un conținut care răspunde direct subiectului anunțat. Heading-urile ajută la delimitarea conținutului, dar nu înlocuiesc informația clară, relevantă și corect organizată.

O pagină a unui magazin românesc care prezintă alegerea unei biciclete poate folosi următoarea structură:

<h1>Cum alegi o bicicletă pentru oraș</h1>

<h2>Tipuri de biciclete urbane</h2>
<h3>Biciclete clasice</h3>
<h3>Biciclete pliabile</h3>

<h2>Cum alegi mărimea cadrului</h2>
<h3>Poziția corectă pe bicicletă</h3>
<h3>Reglarea șeii</h3>

<h2>Accesorii utile pentru deplasările urbane</h2>

H1 descrie tema paginii. Fiecare H2 deschide o secțiune principală, iar elementele H3 sunt subsecțiuni ale acelui H2. Dimensiunea vizuală a fiecărui titlu poate fi controlată separat prin CSS, fără schimbarea nivelului semantic.

1. Deschide pagina într-un browser și inspectează codul HTML din instrumentele pentru dezvoltatori.
2. Caută elementele <h1>, <h2>, <h3>, <h4>, <h5> și <h6> din conținutul redat.
3. Verifică dacă pagina are, în general, un singur H1 descriptiv pentru tema principală.
4. Urmărește ordinea heading-urilor și identifică salturile făcute la deschiderea subsecțiunilor, precum trecerea directă de la H1 la H3.
5. Confirmă că titlurile vizuale sunt elemente HTML de heading, nu doar elemente <div> sau <p> stilizate.
6. Folosește funcția unui cititor de ecran pentru afișarea listei de heading-uri și verifică dacă ierarhia poate fi înțeleasă separat de restul paginii.

1. Folosește un H1 descriptiv pentru subiectul principal al paginii.
2. Organizează secțiunile principale cu H2 și subsecțiunile acestora cu H3, continuând aceeași logică atunci când sunt necesare niveluri mai adânci.
3. Scrie heading-uri clare, care descriu conținutul secțiunii următoare.
4. Nu alege nivelul heading-ului în funcție de dimensiunea dorită a textului; controlează aspectul prin CSS.
5. Folosește elementele HTML semantice în locul titlurilor simulate prin stilizarea unor elemente fără rol de heading.
6. Verifică structura atât în codul HTML redat, cât și prin navigare cu un cititor de ecran.