HTML semantic: ce etichete să folosești, de ce contează pentru accesibilitate, Google și AI

Un browser afișează un <div> și un <nav> la fel. Diferența ține de sens: HTML-ul semantic spune fiecărui program care citește pagina ce rol joacă fiecare bloc. MDN îl definește ca folosirea elementelor în funcție de sensul lor, nu de aspectul implicit. Motoarele de căutare, tehnologiile de asistare și roboții care alimentează modelele AI beneficiază toate de acest sens.

Care sunt principalele etichete HTML semantice?

Standardul HTML definește zeci de elemente. Acestea sunt cele care structurează aproape orice pagină de conținut:

Etichetele de nivel text au și ele sens: <strong> pentru importanță, <em> pentru accent, <blockquote> și <cite> pentru citate, <ul> și <ol> pentru liste, <a> pentru linkuri și <button> pentru acțiuni.

De ce contează HTML-ul semantic pentru accesibilitate?

Cititoarele de ecran construiesc o hartă a paginii pornind de la etichete. Reperele <header>, <nav>, <main>, <aside> și <footer> îi permit unui utilizator să sară direct la meniu sau la conținut, iar lista de titluri funcționează ca un cuprins. Tutorialele W3C de accesibilitate despre structura paginii recomandă aceste regiuni și o ordine logică a titlurilor din acest motiv.

Un <div> pe care se poate da clic este invizibil pentru tastatură și mut pentru un cititor de ecran, dacă nu reconstruiești manual ceea ce un <button> nativ îți oferă gratuit. Elementele native vin cu rolul lor, cu focusul de la tastatură și cu comportamentul așteptat. În multe țări, accesibilitatea site-urilor publice și comerciale este și o obligație legală, ceea ce face din codul HTML curat o chestiune de conformitate.

Ajută HTML-ul semantic SEO-ul?

Google nu a prezentat niciodată etichetele semantice drept factor direct de clasare, iar o pagină făcută doar din <div> poate să se claseze. Valoarea este indirectă, dar reală:

• Detectarea conținutului principal: <main> și <article> ajută la separarea textului care contează de meniurile, barele laterale și subsolurile care se repetă pe fiecare pagină.
• Structura subiectului: o ierarhie ordonată a titlurilor arată ce acoperă pagina și cum se leagă părțile ei, ceea ce susține relevanța pentru interogările de coadă lungă.
• Înțelegerea bogată a elementelor: tabelele, listele și datele reale sunt mai ușor de citit decât imitațiile vizuale construite din blocuri stilizate.
• Coerența cu datele structurate: markup-ul semantic și JSON-LD descriu aceeași pagină din două unghiuri. Intrarea noastră despre conținutul structurat arată cum se potrivesc împreună.

HTML-ul semantic face parte din SEO tehnic, la fel ca URL-urile curate sau paginile rapide: o fundație care lasă conținutul tău să fie citit corect.

Cum folosesc asistenții AI structura paginii?

ChatGPT, Gemini, Perplexity și Google AI Overviews nu citează pagini întregi: selectează pasaje. Roboții care descarcă pagina ta elimină de obicei navigarea și elementele standard, apoi taie textul în bucăți. O secțiune care se deschide cu un <h2> clar, își răspunde la întrebare în primul paragraf și rămâne într-un singur <section> produce o bucată curată. Același conținut împrăștiat în elemente <div> imbricate, cu titluri falsificate prin text îngroșat, produce fragmente amestecate cu elemente de meniu. Ghidul nostru despre împărțirea conținutului în bucăți explică cum scrii secțiuni care rezistă acestei tăieri.

Cum arată o pagină de articol bine structurată?

Iată scheletul unui articol de blog, descris etichetă cu etichetă:

1. <header> conține logoul și un <nav> cu meniul principal. Acest bloc se repetă pe fiecare pagină, astfel încât roboții învață să-l ignore.

2. <main> se deschide imediat după. Conține un singur <article>, conținutul pe care vrei să-l indexezi și să-l citezi.

3. În interiorul <article>, un <header> grupează <h1> (subiectul paginii), numele autorului și un element <time datetime="2026-10-18"> cu data publicării într-un format citibil de mașină.

4. Fiecare parte a articolului este un <section> care începe cu un <h2> formulat ca întrebarea la care răspunde, urmat de paragrafe <p>, liste <ul> sau un <table> cu antete <th>.

5. Un grafic merge într-un <figure> cu un <img> având un text alternativ descriptiv și un <figcaption> care spune ce arată graficul.

6. Linkurile conexe merg într-un <aside>, în afara fluxului principal al articolului.

7. Un <footer> încheie pagina cu linkuri legale și de contact.

Cu acest schelet, un utilizator de cititor de ecran poate ajunge la conținut dintr-o singură apăsare de tastă, Google vede un singur articol principal cu un plan clar, iar un robot AI poate extrage orice <section> ca răspuns de sine stătător.

Care sunt cele mai frecvente greșeli de HTML semantic?

• Div peste tot: constructorii de pagini generează adesea straturi de <div> fără repere. Verifică măcar că există un <main> care învelește conținutul.
• Titluri sărite sau folosite greșit: trecerea de la <h2> la <h4>, folosirea titlurilor ca să faci textul mare sau folosirea paragrafelor îngroșate drept titluri false. Alege nivelul după structură, apoi stilizează-l cu CSS.
• Mai multe <h1> concurente: HTML-ul permite asta, dar un singur <h1> care descrie subiectul paginii rămâne cel mai clar semnal pentru utilizatori și motoarele de căutare.
• <div> și <span> pe care se poate da clic: folosește <a> pentru navigare și <button> pentru acțiuni.
• Tabele de machetă și tabele false: tabelele sunt pentru date; datele afișate în blocuri stilizate își pierd relațiile dintre rânduri și coloane.
• Imagini cu text: un titlu sau un preț din interiorul unei imagini nu poate fi citit de un robot de indexare sau de un cititor de ecran.
• Datele doar ca text simplu: adaugă <time> cu un atribut datetime, ca data să fie fără ambiguitate.

Cum auditezi structura semantică a unei pagini?

Trei verificări rapide acoperă majoritatea problemelor. Mai întâi, afișează planul titlurilor paginii și citește-l singur: ar trebui să spună povestea conținutului. Apoi, caută <main>, <nav> și <article> în codul sursă. În al treilea rând, navighează pagina doar cu tastatura și vezi dacă fiecare link și buton este accesibil. Auditul nostru SEO on-page listează problemele de titluri și de markup pentru orice URL, iar extensia Sorank gratuită pentru Chrome arată structura titlurilor paginii pe care o vezi.

Folosește fiecare etichetă pentru ce înseamnă: un singur <main>, un singur <h1>, secțiuni ordonate și tabele reale îi dau oamenilor, Google și AI aceeași hartă clară a paginii tale. Odată ce structura este curată, conținutul trebuie totuși scris și publicat regulat: Sorank scrie și publică articole optimizate pentru Google și AI, pe autopilot.