Definiție
Un bloc semantic este o porțiune de conținut digital structurată într-un mod logic și marcată corespunzător, astfel încât să reflecte clar rolul său în pagină (de exemplu: antet, navigație, articol, secțiune, subsol). Aceste blocuri nu sunt doar vizuale, ci și semantice – adică au o semnificație definită și sunt interpretate corect de tehnologii asistive precum cititoarele de ecran.
Prin folosirea corectă a elementelor HTML semantice (precum <header>, <nav>, <main>, <section>, <article>, <footer>), conținutul devine mai ușor de înțeles, navigat și accesat pentru toți utilizatorii, inclusiv pentru cei care nu folosesc o interfață vizuală tradițională.
Exemple concrete
- O pagină de blog are un bloc semantic pentru antet (
<header>), unul pentru meniul de navigare (<nav>), un articol principal (<article>), și un subsol cu informații suplimentare (<footer>). - Într-un dashboard de aplicație, există un bloc semantic pentru bara laterală (
<aside>) și un altul pentru zona de conținut principal (<main>). - Un formular poate fi înconjurat de o etichetă
<section>cu un titlu (<h2>Informații personale</h2>), marcându-l drept o unitate distinctă de conținut.
Bune practici
- Folosește elemente HTML semantice pentru a delimita logic părțile unei pagini, nu doar
<div>-uri anonime. - Evită blocurile foarte lungi, fără structură internă sau fără titluri care să semnaleze scopul secțiunii.
- Fiecare bloc ar trebui să aibă o funcție clară și un scop: să informeze, să navigheze, să grupeze conținut.
- În cazul conținutului repetitiv (ex: listări de produse), fiecare element individual ar trebui să fie și el un bloc semantic bine delimitat.
Blocurile semantice nu sunt doar bune practici de codare, ci și de comunicare. Ele ajută nu doar la accesibilitate, ci și la SEO, la întreținerea codului și la scalabilitatea site-ului. Pentru un utilizator cu cititor de ecran, ele fac diferența între o pagină liniară și haotică și una clară, structurată și ușor de parcurs.
