Definiție
Codul semantic curat înseamnă structurarea HTML-ului unei pagini web folosind elemente potrivite scopului lor, într-un mod clar, logic și lipsit de ambiguități. Un astfel de cod nu este doar „curat” din punct de vedere al stilului (indentare corectă, evitarea redundanței), ci și semantic, adică fiecare element reflectă în mod corect conținutul pe care îl încadrează. De exemplu, folosirea elementului <button> pentru un buton, nu un <div> stilizat să pară buton, sau folosirea <header>, <main>, <article>, <footer> pentru a delimita structura unei pagini.
În accesibilitate, codul semantic curat este fundamental: cititoarele de ecran, dispozitivele asistive și chiar motoarele de căutare se bazează pe această semantică pentru a înțelege ierarhia și funcția conținutului.
Exemple concrete
- Folosirea
<h1>–<h6>pentru titluri în loc de<div>sau<span>. - Marcarea meniurilor cu
<nav>, nu doar grupuri de linkuri într-un<div>. - Utilizarea
<form>și<label>pentru formulare în locul unei combinații arbitrare de<div>și JavaScript. - Structurarea logică a conținutului cu
<section>,<article>,<aside>, în funcție de context.
Bune practici
- Respectă ordinea ierarhică a titlurilor (nu sări de la
<h1>direct la<h4>). - Evită să folosești elemente generice (
<div>,<span>) atunci când există variante semantice specifice. - Nu abuza de JavaScript pentru elemente interactive simple care pot fi create semantic.
- Verifică dacă fiecare element interactiv are un rol și o etichetă accesibilă (
aria-*dacă este necesar). - Testează pagina cu un cititor de ecran (NVDA, VoiceOver, etc.) pentru a verifica claritatea ierarhiei.
Un cod semantic curat nu este doar un semn de profesionalism, ci și o garanție că pagina ta poate fi înțeleasă și folosită de orice utilizator, indiferent de capacități. În plus, este mai ușor de întreținut, de testat și de optimizat SEO. Este, pe scurt, temelia oricărei experiențe web corecte și incluzive.
