HTML Semantico: Perché è il Cuore della SEO e dell'Accessibilità Moderna

A livello puramente estetico, un <div> con classe "header" e un elemento <header> sono identici per l'utente finale. Tuttavia, per i motori di ricerca, gli screen reader e i futuri sviluppatori che metteranno mano al codice, la differenza è abissale. Scrivere in HTML semantico significa utilizzare tag che descrivono il significato del contenuto, non la sua forma. In questa guida esploreremo come trasformare il tuo codice in una struttura comprensibile e ottimizzata.

Codice Non Semantico vs Semantico

<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/it/">Home</a></div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">Mio Post Blog</div>
    <div class="content">...</div>
  </div>
  <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

<header>
  <nav aria-label="Navigazione principale">
    <a href="/it/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>Mio Post Blog</h1>
    <p>...</p>
  </article>
  <aside>...</aside>
</main>
<footer>...</footer>

I Principali Elementi Semantici

<header>

Rappresenta l'area introduttiva di una pagina o di una specifica sezione. Solitamente ospita il logo, il menu di navigazione e i campi di ricerca. Può essere usato anche all'interno di <article> per definire l'intestazione di un singolo post.

<nav>

Indica una sezione che contiene link di navigazione. Va utilizzato per i menu principali, i breadcrumb o gli indici dei contenuti. Non tutti i gruppi di link devono stare in un <nav>, ma solo i blocchi di navigazione principali.

<main>

Identifica il contenuto centrale e unico del documento. Deve esserci un solo <main> visibile per pagina. Esclude tutto ciò che si ripete su più pagine, come header, footer o sidebar globali.

<article>

Rappresenta una composizione autonoma che potrebbe essere distribuita indipendentemente dal resto del sito. È il tag ideale per post di blog, notizie di cronaca, schede prodotto o commenti degli utenti.

<section>

Definisce una sezione generica di un documento che raggruppa contenuti correlati tematicamente, solitamente introdotta da un titolo (H2-H6). Si usa quando non esiste un tag più specifico (come <article>).

<aside>

Contiene informazioni correlate indirettamente al contenuto principale, come sidebar, citazioni laterali, widget o box pubblicitari. Può essere posizionato sia dentro che fuori da un <article>.

<footer>

Rappresenta il piè di pagina della pagina o di una sezione. Qui trovano spazio copyright, contatti, link legali e la sitemap.

<figure> e <figcaption>

<figure>
  <img src="grafico.png" alt="Grafico entrate mensili con crescita del 20%">
  <figcaption>Fig. 1: Crescita delle entrate nel primo semestre 2025</figcaption>
</figure>

<time>

<time datetime="2025-07-08">8 Luglio 2025</time>
<time datetime="2025-07-08T14:30:00Z">14:30 UTC</time>

Gerarchia dei Titoli (Heading Hierarchy)

<!-- ✅ Corretto — gerarchia logica -->
<h1>Titolo della Pagina</h1>
  <h2>Sezione Principale</h2>
    <h3>Sotto-argomento</h3>
    <h3>Altro Sotto-argomento</h3>
  <h2>Seconda Sezione</h2>

<!-- ❌ Errato — livelli saltati -->
<h1>Titolo della Pagina</h1>
  <h4>Titolo a caso</h4>  <!-- Salta H2 e H3! -->

Perché l'HTML Semantico è Fondamentale

• SEO: I crawler come Google usano i tag semantici per dare peso ai contenuti. Un <nav> indica "questi sono i link interni", un <article> dice "questo è il testo che vuoi indicizzare".
• Accessibilità: Gli screen reader utilizzano questi tag come punti di riferimento (landmark). Un utente non vedente può saltare direttamente al <main> o navigare tra gli <article> con facilità.
• Manutenibilità: Un tag <header> è auto-esplicativo per qualsiasi sviluppatore. Una classe generica come <div class="top-box"> richiede tempo per essere interpretata.
• Modalità Lettura: Browser come Safari e Firefox estraggono il testo principale per la "Modalità Lettura" basandosi proprio sul tag <article>.