HTML semantico: 10 errori comuni da evitare (e i tag giusti)

Una pagina HTML può essere visualizzata alla perfezione ed essere scritta male. div ovunque, grassetto messo con b, titoli scelti per la loro dimensione: il browser mostra tutto senza protestare, ma gli screen reader, i motori di ricerca e i tuoi colleghi perdono l’informazione che i tag avrebbero dovuto portare. È questo l’HTML semantico: usare il tag che dice che cos’è il contenuto, non solo come deve apparire. Ecco i dieci errori più comuni e la loro correzione.

Perché la semantica conta

• Accessibilità. Uno screen reader propone di saltare direttamente alla navigazione, al contenuto principale o al piè di pagina. Può farlo solo se nav, main e footer esistono. Con dei div, l’utente sente una pagina piatta.
• Posizionamento. I motori di ricerca si appoggiano alla struttura per individuare il contenuto principale, i titoli e le relazioni tra le sezioni. Una gerarchia pulita si capisce al primo colpo; una zuppa di div va indovinata.
• Manutenzione. <nav> si legge senza commenti; <div class="nv2"> obbliga ad aprire il CSS. Il codice semantico si rilegge sei mesi dopo.
• Comportamenti gratis. Un button si attiva da tastiera, un a si apre in una nuova scheda con il clic centrale, un label allarga l’area cliccabile di una casella di spunta. Tutte cose da riscrivere a mano se bari con dei div.

Errore 1: div al posto di header, nav, main e footer

La struttura di una pagina ha dei tag dedicati. Un div con identificatore header non è un’intestazione per il browser.

Non fare così:

<div id="header">…</div>
<div id="menu">…</div>
<div id="content">…</div>
<div id="footer">…</div>

Fai così:

<header>…</header>
<nav aria-label="Navigation principale">…</nav>
<main>…</main>
<footer>…</footer>

Ognuno di questi tag porta un ruolo implicito (banner, navigation, main, contentinfo) riconosciuto dalle tecnologie assistive. main deve essere unico nella pagina; header e footer possono ripetersi dentro un article.

Errore 2: la didascalia di un’immagine dentro un paragrafo

Un’immagine e il suo testo di didascalia formano un’unità. Il tag figure li associa, figcaption porta la didascalia.

Non fare così:

<img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
<p>Le mont Blanc, juillet 2026</p>

Fai così:

<figure>
  <img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
  <figcaption>Le mont Blanc, juillet 2026</figcaption>
</figure>

figure va bene anche per un blocco di codice, un grafico o una citazione accompagnati da una didascalia.

Errore 3: b e i per dare enfasi

b e i descrivono un aspetto. strong ed em descrivono un’intenzione: importanza forte, accento messo su una parola. Uno screen reader può cambiare intonazione su em, mai su i.

Non fare così:

<b>Attention</b> : ce réglage est <i>irréversible</i>.

Fai così:

<strong>Attention</strong> : ce réglage est <em>irréversible</em>.

b e i non sono vietati: conservano un uso preciso, una parola chiave messa in evidenza senza particolare importanza per b, un termine straniero o il nome di una nave per i. Se vuoi solo del grassetto decorativo, è CSS: font-weight: 700.

Errore 4: una gerarchia di titoli rotta

I tag da h1 a h6 formano lo schema del documento. Scegliere un h4 perché ha «la dimensione giusta» rompe questo schema: gli screen reader navigano di titolo in titolo, i motori di ricerca ne deducono la struttura.

Non fare così:

<h1>Nos services</h1>
<h4>Développement</h4>     <!-- saut de h1 à h4 -->
<h1>Hébergement</h1>       <!-- second h1 pour une sous-partie -->

Fai così:

<h1>Nos services</h1>
  <h2>Développement</h2>
    <h3>Sites vitrine</h3>
  <h2>Hébergement</h2>

Un solo h1 per pagina, nessun livello saltato, e la dimensione si regola nel CSS. Se un titolo deve essere piccolo a schermo, si scrive h2 { font-size: 1.1rem }, non h5.

Errore 5: section e article confusi, o usati per tutto

article indica un contenuto autonomo, che manterrebbe senso fuori dalla pagina: un post di blog, un commento, una scheda prodotto. section raggruppa un contenuto tematico all’interno di un insieme, e dovrebbe sempre avere un titolo. Un div resta la scelta giusta per un semplice raggruppamento di layout.

Non fare così:

<section>
  <section><img src="logo.svg" alt="Gekkode"></section>
  <section>Du texte sans titre</section>
</section>

Fai così:

<article>
  <h2>Titre du billet</h2>
  <section>
    <h3>Première partie</h3>
    …
  </section>
</article>

<div class="colonnes">…</div> <!-- pure mise en page : div -->

Errore 6: un link che fa da bottone, e viceversa

Un link (a) porta da qualche parte. Un bottone (button) avvia un’azione: inviare, aprire un menu, mostrare una finestra. Un a href="#" con un gestore di clic non è né l’uno né l’altro, e un div cliccabile non è accessibile né da tastiera né agli screen reader.

Non fare così:

<a href="#" onclick="ouvrirMenu()">Menu</a>
<div class="btn" onclick="envoyer()">Envoyer</div>

Fai così:

<button type="button" aria-expanded="false" aria-controls="menu">Menu</button>
<button type="submit">Envoyer</button>
<a href="https://www.gekkode.com/it/tarifs/">Voir les tarifs</a>

Il button nativo risponde a Invio e a Spazio, riceve il focus da tastiera e annuncia il proprio ruolo. Tutto questo si perde con un div.

Errore 7: link che dicono «clicca qui»

Il testo di un link deve annunciare la sua destinazione da solo: gli screen reader propongono la lista dei link della pagina fuori contesto, e i motori di ricerca usano il testo dell’ancora per qualificare la pagina di arrivo.

Non fare così:

Pour nos tarifs, <a href="https://www.gekkode.com/it/tarifs/">cliquez ici</a>.

Fai così:

Consultez <a href="https://www.gekkode.com/it/tarifs/">nos tarifs 2026</a>.

Errore 8: immagini senza alt

L’attributo alt descrive l’immagine a chi non la vede: screen reader, immagine non caricata, motore di ricerca. È obbligatorio. Un’immagine puramente decorativa porta un alt vuoto, non assente.

Non fare così:

<img src="graphique-ventes.png">
<img src="separateur.png" alt="separateur.png">

Fai così:

<img src="graphique-ventes.png" alt="Ventes trimestrielles 2026 : hausse de 12 % au T2">
<img src="separateur.png" alt=""> <!-- décorative : alt vide -->

Il nome del file non è mai una descrizione. Descrivi che cosa l’immagine aggiunge al discorso.

Errore 9: campi di form senza label

Un testo messo accanto a un campo non è collegato al campo. Il tag label, associato tramite for e id, annuncia il campo allo screen reader e rende il testo cliccabile per dare il focus.

Non fare così:

Adresse e-mail <input type="email" name="email">
<input type="text" placeholder="Votre nom">

Fai così:

<label for="email">Adresse e-mail</label>
<input id="email" type="email" name="email" autocomplete="email">

<label for="nom">Votre nom</label>
<input id="nom" type="text" name="nom" autocomplete="name">

Il placeholder non sostituisce il label: sparisce appena scrivi e il suo contrasto è spesso insufficiente. Altre buone pratiche per i form HTML completano questa.

Errore 10: stili in linea e liste simulate

Due cattive abitudini che mescolano struttura e presentazione. Lo stile in linea impedisce di far evolvere l’aspetto senza toccare l’HTML; la lista simulata con trattini e br non è una lista per il browser, che non può né annunciarla né contarla.

Non fare così:

<h1 style="font-size: 24px; color: #333;">Titre</h1>
<p>- Pommes<br>- Poires<br>- Cerises</p>

Fai così:

<h1 class="titre-page">Titre</h1>
<ul>
  <li>Pommes</li>
  <li>Poires</li>
  <li>Cerises</li>
</ul>

.titre-page {
  font-size: 1.5rem;
  color: #333;
}

Verificare il proprio HTML

Tre controlli rapidi, in quest’ordine:

1. Il validatore del W3C segnala i tag chiusi male, gli attributi sconosciuti e gli alt mancanti.
2. La scheda Accessibilità degli strumenti per sviluppatori (Chrome, Firefox) mostra l’albero così come lo percepisce uno screen reader: se header, nav e main compaiono come regioni, la struttura è buona.
3. La navigazione da tastiera: premi Tab nella pagina. Tutto ciò che è cliccabile deve ricevere il focus, in un ordine logico. Un div cliccabile fallisce qui.

Per l’elenco completo dei tag di struttura e di contenuto, vedi 20 tag HTML5 da conoscere. E una volta strutturata la pagina, tocca al CSS, per esempio per centrare gli elementi senza toccare l’HTML.