Introduzione
Un sito web può essere utilizzato da persone che parlano lingue diverse, vivono in paesi differenti o usano alfabeti non latini. Preparare correttamente il markup HTML all’internazionalizzazione significa rendere i contenuti più comprensibili ai browser, ai motori di ricerca, agli screen reader e agli strumenti di traduzione.
Questa pratica non consiste soltanto nel tradurre il testo visibile. È necessario indicare la lingua dei contenuti, gestire correttamente le direzioni di scrittura, non incorporare testo dentro le immagini e progettare collegamenti e componenti che possano adattarsi a stringhe di lunghezza diversa.
In questo tutorial realizzeremo una piccola sezione di un sito disponibile in italiano e inglese. L’obiettivo è imparare a scrivere un markup esplicito, flessibile e adatto a futuri contenuti localizzati.
Codice completo
<main>
<article lang="it">
<header>
<p>Guida pratica</p>
<h1>Come preparare il tuo viaggio</h1>
<p>
Aggiornato il
<time datetime="2026-10-26">26 ottobre 2026</time>
</p>
</header>
<section aria-labelledby="consigli-title">
<h2 id="consigli-title">Consigli importanti</h2>
<p>
Porta con te una copia digitale dei documenti di viaggio.
</p>
<ul>
<li>Controlla la validità del passaporto.</li>
<li>Verifica i requisiti per il visto.</li>
<li>Salva i numeri di emergenza locali.</li>
</ul>
</section>
<aside lang="en" aria-labelledby="notice-title">
<h2 id="notice-title">Travel notice</h2>
<p>
This information is also available in English.
</p>
<a href="/en/travel-guide">Read the English version</a>
</aside>
<section lang="ar" dir="rtl" aria-labelledby="arabic-title">
<h2 id="arabic-title">نصائح السفر</h2>
<p>
تحقق من صلاحية وثائق السفر قبل المغادرة.
</p>
</section>
</article>
</main>Spiegazione
Indicare la lingua con lang
L’attributo lang comunica la lingua di un elemento e dei suoi discendenti. Quando il documento contiene prevalentemente italiano, l’attributo dovrebbe essere impostato sull’elemento radice del documento; in questo esempio viene applicato all’article per concentrare l’attenzione sulla sezione mostrata.
Il valore deve usare i codici standard, come it per l’italiano, en per l’inglese e ar per l’arabo. È possibile specificare anche una variante regionale, ad esempio en-GB per l’inglese britannico o it-CH per l’italiano svizzero.
La lingua dichiarata aiuta gli screen reader a scegliere la pronuncia corretta. Inoltre può influenzare il correttore ortografico, la selezione dei caratteri, i motori di ricerca e le funzionalità automatiche del browser.
Gestire la direzione del testo
Non tutte le lingue vengono scritte da sinistra verso destra. L’arabo e l’ebraico, per esempio, usano normalmente una direzione da destra verso sinistra. L’attributo dir="rtl" permette di dichiarare questa caratteristica.
Per i contenuti normalmente occidentali si può usare dir="ltr", mentre dir="auto" consente al browser di determinare la direzione iniziale in base al testo. Quest’ultima opzione può essere utile per contenuti inseriti dagli utenti, ma non sostituisce una scelta consapevole per un’intera interfaccia.
Separare le versioni linguistiche
Una buona struttura non mescola casualmente traduzioni diverse nello stesso paragrafo. È preferibile racchiudere ogni versione in un elemento con il relativo attributo lang. Questo rende il contenuto più prevedibile e consente di applicare stili o comportamenti specifici senza alterare il testo.
I collegamenti verso versioni localizzate devono essere descrittivi. Un testo come “English version” è più utile di un generico “Clicca qui”, perché comunica immediatamente la destinazione del collegamento.
Usare time per le date
L’elemento time separa il formato leggibile dalle persone dal valore strutturato destinato ai programmi. L’attributo datetime usa il formato ISO, ad esempio 2026-10-26. In questo modo il testo può essere mostrato come “26 ottobre 2026” senza perdere un valore non ambiguo.
Best practice
- Dichiara sempre la lingua principale: usa un codice BCP 47 appropriato e non affidarti al rilevamento automatico.
- Applica
langalle eccezioni: se una pagina italiana contiene una citazione inglese, marca solo quella porzione conlang="en". - Non rappresentare la lingua soltanto con un’icona: una bandiera identifica un paese, non necessariamente una lingua. Usa testo esplicito come “English” o “Deutsch”.
- Prevedi testi più lunghi: una traduzione può occupare più spazio dell’originale. Evita larghezze rigide e pulsanti dimensionati soltanto sulla stringa italiana.
- Non inserire testo importante nelle immagini: il testo HTML è traducibile, selezionabile e più facile da adattare a dimensioni diverse.
- Usa date e numeri strutturati: elementi come
timee attributi ben definiti facilitano l’elaborazione automatica. - Mantieni separati contenuto e traduzione: non duplicare manualmente lo stesso paragrafo in molte pagine senza una strategia di gestione delle versioni.
- Verifica la direzione RTL: controlla allineamenti, icone, frecce, tabelle e ordine visivo quando aggiungi lingue da destra verso sinistra.
- Non usare attributi obsoleti: la presentazione deve essere gestita dai CSS, mentre il markup deve descrivere contenuto e significato.
- Testa con strumenti reali: prova la pagina con uno screen reader, una lingua diversa e stringhe volutamente più lunghe.
Riepilogo
Il markup internazionalizzato è più preciso perché dichiara esplicitamente la lingua e la direzione dei contenuti. Gli attributi lang e dir migliorano l’interpretazione da parte di browser, tecnologie assistive e motori di ricerca. Elementi come time rendono date e altri valori più facilmente elaborabili.
La regola principale è progettare il markup senza presumere che tutte le lingue abbiano la stessa lunghezza, lo stesso alfabeto o la stessa direzione di lettura. Un HTML ben preparato permette al layout e agli strumenti di localizzazione di adattarsi senza modifiche strutturali improvvisate.