Definiție
Marcajul semantic reprezintă utilizarea corectă a elementelor HTML pentru a reflecta sensul și structura conținutului unei pagini web. Nu este vorba doar despre cum arată elementele, ci despre ce înseamnă ele pentru utilizator și pentru tehnologiile asistive. Acesta permite cititoarelor de ecran și motoarelor de căutare să înțeleagă mai bine conținutul și să-l prezinte într-un mod logic și accesibil.
Un cod bine structurat semantic nu doar îmbunătățește accesibilitatea, ci contribuie și la optimizarea SEO și la întreținerea mai ușoară a site-ului.
Exemple concrete
- În loc să folosești un simplu <div> pentru un titlu, este mai corect să folosești <h1>, <h2> etc., pentru a reflecta ierarhia logică a conținutului. De exemplu: <h1>Despre serviciile noastre</h1> <h2>Consultanță financiară</h2> <h2>Accesibilitate digitală</h2>
- Pentru un paragraf de text normal, se va folosi <p>, nu <div> cu stil aplicat manual.
- O listă de beneficii ar trebui structurată cu <ul> și <li> în loc să fie doar o succesiune de paragrafe sau <br>: <ul> <li>Acces facil la informații</li> <li>Compatibilitate cu cititoare de ecran</li> <li>Îmbunătățirea SEO</li> </ul>
- Pentru un formular, etichetele trebuie legate corect de câmpuri folosind <label for=”nume”> și id=”nume”, astfel încât un utilizator de tehnologie asistivă să audă: „Nume: câmp de text”.
- Elementele de navigație trebuie înconjurate de <nav>, secțiunile logice de conținut de <section> sau <article>, iar bara de jos a site-ului de <footer>.
De ce este important pentru accesibilitate?
- Permite cititoarelor de ecran să înțeleagă structura și semnificația conținutului
- Ajută utilizatorii să navigheze rapid între secțiuni sau titluri
- Reduce efortul cognitiv și îmbunătățește claritatea informației
- Permite personalizarea experienței de către tehnologii asistive
Bune practici
- Folosește elementele HTML în scopul lor semantic (de exemplu, <button> în loc de <div> cu JavaScript)
- Respectă ierarhia titlurilor (nu sări de la <h1> direct la <h4>)
- Evită suprascrierea sensului semantic prin CSS doar pentru design
- Testează pagina cu un cititor de ecran pentru a verifica logica marcajului
- Nu abuza de <div> și <span> când există alternative semantice mai potrivite
Please follow and like us:
