Cosa sono gli elementi semantici in HTML e a cosa servono?

Gli elementi semantici in HTML sono tag (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>) che descrivono lo scopo semantico del contenuto che racchiudono, non solo il suo aspetto.

Scopo principale:

• Accessibilità: Aiutano le tecnologie assistive (come gli screen reader) a comprendere la struttura e il contenuto della pagina, rendendo i contenuti accessibili agli utenti con disabilità.
• SEO (Ottimizzazione per i motori di ricerca): I motori di ricerca indicizzano e classificano meglio le pagine con markup semantico, poiché possono determinare più precisamente il contenuto principale e la sua rilevanza rispetto alle query.
• Sviluppo e manutenzione: Migliorano la leggibilità e la manutenibilità del codice, rendendo la struttura della pagina più comprensibile per altri sviluppatori (e per te stesso in futuro).
• Migliore comprensione della struttura: Permettono di dividere chiaramente i blocchi logici della pagina (navigazione, contenuto principale, piè di pagina, ecc.).

Esempio di markup non semantico:

<div>
  <h2>Titolo dell'articolo</h2>
  <p>Contenuto dell'articolo...</p>
</div>
<div>
  <h3>Barra laterale</h3>
  <p>Informazioni sulla barra laterale...</p>
</div>

Esempio di markup semantico:

<article>
  <h2>Titolo dell'articolo</h2>
  <p>Contenuto dell'articolo...</p>
</article>
<aside>
  <h3>Barra laterale</h3>
  <p>Informazioni sulla barra laterale...</p>
</aside>

L'uso di elementi semantici contribuisce a creare pagine web più strutturate, accessibili e ottimizzate per i motori di ricerca.