Definiție
Structura semantică reprezintă modul în care elementele unui site web sunt organizate și marcate în cod pentru a reflecta sensul și funcția lor în pagină. Prin utilizarea unor etichete HTML semantice (precum <header>, <main>, <article>, <nav>, <footer>), conținutul devine mai ușor de interpretat atât de către utilizatori, cât și de tehnologiile asistive (precum cititoarele de ecran).
O structură semantică clară îmbunătățește navigarea, ajută la înțelegerea ierarhiei informațiilor și contribuie la accesibilitatea generală a site-ului.
Exemple concrete
- O pagină web care începe cu un
<header>ce conține logo-ul și meniul principal, urmat de un<main>în care se află un<article>cu titlul, conținutul și un<footer>cu linkuri suplimentare. - O listă de știri este structurată ca o secvență de
<article>-uri, fiecare cu un titlu (<h2>) și un paragraf (<p>), permițând cititorului de ecran să anunțe fiecare articol separat. - Meniul de navigare este încadrat într-un
<nav>, astfel încât utilizatorii care folosesc taste rapide sau tehnologii asistive să poată accesa direct zona de navigare. - O bară laterală (sidebar) care conține elemente secundare este încadrată într-un
<aside>– indicând că aceste informații sunt complementare, nu esențiale pentru înțelegerea conținutului principal.
De ce este important pentru accesibilitate?
- Permite cititoarelor de ecran să ofere o prezentare logică și coerentă a paginii
- Ajută utilizatorii să sară direct la secțiuni importante (navigare, conținut principal, footer)
- Contribuie la o mai bună indexare în motoarele de căutare (SEO) și la o experiență mai plăcută pentru toți utilizatorii
- Reduce confuzia și supraîncărcarea cognitivă, oferind o ierarhie clară și previzibilă
Bune practici
- Folosește etichetele HTML semantice potrivite pentru fiecare tip de conținut
- Evită folosirea excesivă a tag-urilor generice precum
<div>sau<span>fără rol semantic - Asigură-te că ordinea logică a conținutului din cod corespunde celei vizuale
- Testează structura cu cititoare de ecran pentru a te asigura că este interpretată corect
Please follow and like us:
