Ce sunt elementele semantice în HTML și pentru ce sunt ele necesare?

Elementele semantice în HTML sunt etichete (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>) care descriu scopul semantic al conținutului pe care îl înconjoară, nu doar aspectul său.

Scopul principal:

• Accesibilitate: Ajută tehnologiile asistive (cum ar fi cititoarele de ecran) să înțeleagă structura și conținutul paginii, făcând conținutul accesibil pentru utilizatorii cu dizabilități.
• SEO (Optimizarea pentru motoarele de căutare): Paginile cu marcaj semantic sunt indexate și clasificate mai bine de motoarele de căutare, deoarece pot determina mai precis conținutul principal și relevanța sa pentru interogări.
• Dezvoltare și întreținere: Îmbunătățesc lizibilitatea și întreținerea codului, făcând structura paginii mai ușor de înțeles pentru alți dezvoltatori (și pentru tine în viitor).
• O mai bună înțelegere a structurii: Permite separarea clară a blocurilor logice ale paginii (navigație, conținut principal, subsol etc.).

Exemplu de marcaj non-semantic:

<div>
  <h2>Titlul articolului</h2>
  <p>Conținutul articolului...</p>
</div>
<div>
  <h3>Bară laterală</h3>
  <p>Informații despre bara laterală...</p>
</div>

Exemplu de marcaj semantic:

<article>
  <h2>Titlul articolului</h2>
  <p>Conținutul articolului...</p>
</article>
<aside>
  <h3>Bară laterală</h3>
  <p>Informații despre bara laterală...</p>
</aside>

Utilizarea elementelor semantice contribuie la crearea unor pagini web mai structurate, accesibile și optimizate pentru motoarele de căutare.