Ce este Semantic HTML?

Definiție Semantic HTML

Semantic HTML inseamna folosirea elementelor HTML cu semnificatie clara: <main> pentru continutul principal, <nav> pentru navigare, <article> pentru articole, <aside> pentru continut lateral, <header> si <footer> pentru antet si subsol. Cititoarele de ecran folosesc aceste elemente ca repere de navigare. Div-urile generice nu transmit nicio semnificatie.

De ce contează Semantic HTML

Tehnologiile asistive construiesc o harta a paginii bazata pe elementele semantice HTML5 — <nav> devine sectiunea de navigare, <main> este continutul principal, <aside> este informatia secundara. Un site construit doar din <div> si <span> este ca o carte fara cuprins si fara titluri de capitol. Conform WebAIM Million 2024, 22% din site-uri nu au nicio regiune landmark definita.

Cum verifici Semantic HTML

SoftAudit verifica prezenta elementelor semantice obligatorii: <header>, <nav>, <main>, <footer> si optional <article>, <section>, <aside>. Raportul semnaleaza paginile unde lipseste <main>, navigarea este construita cu <div> in loc de <nav>, sau listele sunt simulate cu <br> in loc de <ul>/<ol>.

Greșeli frecvente

Conversia automata de la <div> la elemente semantice fara a intelege semnificatia fiecaruia — de exemplu, <section> folosit ca inlocuitor generic de <div> fara heading asociat nu ofera valoare semantica. <article> imbricat in <article> fara motiv sau <nav> folosit pentru orice lista de link-uri (nu doar navigare principala) sunt alte erori frecvente.

Bune practici

Structureaza pagina cu <header> pentru antet, <nav> pentru navigarea principala (maxim 2-3 instante), <main> unic pentru continut, si <footer> pentru subsol. Fiecare <section> trebuie sa aiba un heading asociat, iar <article> este rezervat continutului independent redistribuibil (postari blog, produse, comentarii).

Întrebări frecvente

Termeni asociați