In un web sempre più globale, creare siti che funzionino correttamente per utenti di lingue e culture diverse è una necessità, non un lusso. L’internazionalizzazione (spesso abbreviata in i18n) inizia dal codice HTML, con attributi e elementi progettati per gestire lingue diverse, direzioni di scrittura differenti e set di caratteri universali. In questa guida vedremo tutti gli strumenti HTML disponibili per creare siti veramente multilingua e accessibili a un pubblico globale.
L’Attributo lang: Dichiarare la Lingua dei Contenuti
L’attributo lang è il meccanismo fondamentale in HTML per dichiarare la lingua del contenuto. Deve essere sempre presente sull’elemento <html> per dichiarare la lingua principale del documento:
<html lang="it">
<head>
<title>Pagina in italiano</title>
</head>
<body>
<p>Questo contenuto è in italiano.</p>
<blockquote lang="en">
<p>This quote is in English.</p>
</blockquote>
</body>
</html>L’attributo lang può essere applicato a qualsiasi elemento HTML per indicare un cambio di lingua all’interno del documento. Nell’esempio sopra, il documento è in italiano ma contiene una citazione in inglese. Questa dichiarazione ha effetti pratici importanti: gli screen reader cambiano automaticamente la voce sintetica per pronunciare il testo nella lingua corretta, i browser possono offrire la traduzione automatica in modo più preciso, i motori di ricerca comprendono meglio la lingua del contenuto e le regole CSS come hyphens: auto applicano la sillabazione corretta per ogni lingua.
I codici lingua seguono lo standard BCP 47. I più comuni sono codici a due lettere come it (italiano), en (inglese), fr (francese), de (tedesco), es (spagnolo), ma possono includere varianti regionali come en-US (inglese americano), en-GB (inglese britannico), pt-BR (portoghese brasiliano) o zh-Hans (cinese semplificato). La specificità è importante: en-GB indica al browser di usare la sillabazione e le regole tipografiche dell’inglese britannico, che differiscono da quelle americane.
L’Attributo dir e il Testo Bidirezionale
Non tutte le lingue si scrivono da sinistra a destra. L’arabo, l’ebraico, il persiano e l’urdu si scrivono da destra a sinistra (RTL, Right-To-Left). L’attributo dir indica al browser la direzione di scrittura del testo:
<html lang="ar" dir="rtl">
<body>
<h1>مرحبا بالعالم</h1>
<p>هذا نص باللغة العربية.</p>
<p dir="ltr" lang="en">This paragraph is in English.</p>
</body>
</html>I valori possibili sono: ltr (left-to-right, default), rtl (right-to-left) e auto (il browser determina la direzione in base al contenuto). L’impostazione dir="rtl" non si limita a invertire l’allineamento del testo: inverte anche il layout della pagina, la direzione dello scroll, l’ordine delle colonne nelle tabelle e il posizionamento di elementi come le icone di chiusura nelle finestre di dialogo.
La sfida maggiore si presenta con il testo bidirezionale (bidi), dove contenuti in lingue con direzioni opposte coesistono nello stesso paragrafo. L’algoritmo bidirezionale Unicode del browser gestisce automaticamente la maggior parte dei casi, ma a volte servono interventi espliciti.
Elementi BDO e BDI per Testo Misto
HTML offre due elementi specifici per gestire il testo bidirezionale. L’elemento <bdo> (Bidirectional Override) sovrascrive l’algoritmo bidirezionale, forzando una direzione specifica:
<!-- Forzare il testo da destra a sinistra -->
<p>La parola <bdo dir="rtl">HELLO</bdo> scritta al contrario.</p>
<!-- Risultato: La parola OLLEH scritta al contrario. -->L’elemento <bdi> (Bidirectional Isolation) isola un pezzo di testo dal contesto bidirezionale circostante, permettendo all’algoritmo Unicode di analizzarlo indipendentemente. Questo è particolarmente utile quando si inseriscono dati generati dagli utenti (nomi, commenti) che potrebbero essere in qualsiasi lingua:
<ul>
<li>Primo classificato: <bdi>محمد</bdi> - 95 punti</li>
<li>Secondo classificato: <bdi>Marco</bdi> - 87 punti</li>
<li>Terzo classificato: <bdi>שרה</bdi> - 82 punti</li>
</ul>Senza <bdi>, un nome in arabo o ebraico potrebbe confondere l’algoritmo bidirezionale, causando il riordino errato del testo circostante (come il punteggio che appare nel posto sbagliato). Con <bdi>, ogni nome viene isolato e la frase circostante mantiene il suo ordine corretto.
Hreflang per la SEO Multilingua
Per siti disponibili in più lingue, il tag <link rel="alternate" hreflang="xx"> indica ai motori di ricerca le versioni alternative della stessa pagina in lingue diverse. Questo è cruciale per la SEO internazionale, poiché evita problemi di contenuto duplicato e aiuta Google a servire la versione linguistica corretta nei risultati di ricerca:
<link rel="alternate" hreflang="it" href="https://esempio.it/">
<link rel="alternate" hreflang="en" href="https://esempio.it/en/">
<link rel="alternate" hreflang="fr" href="https://esempio.it/fr/">
<link rel="alternate" hreflang="de" href="https://esempio.it/de/">
<link rel="alternate" hreflang="x-default" href="https://esempio.it/en/">Il valore speciale x-default indica la pagina da mostrare quando la lingua dell’utente non corrisponde a nessuna delle versioni disponibili. È fondamentale che ogni pagina referenzi tutte le versioni alternative, inclusa se stessa, e che la relazione sia bidirezionale (la pagina italiana referenzia quella inglese e viceversa). Per una guida completa sull’ottimizzazione SEO delle pagine HTML, consultate il nostro articolo su HTML e SEO.
Charset UTF-8 e Configurazione Multilingua
La corretta codifica dei caratteri è il prerequisito fondamentale per qualsiasi sito multilingua. Il <meta charset="UTF-8"> deve essere il primo elemento nel <head>, idealmente entro i primi 1024 byte del documento:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sito Multilingua</title>
</head>UTF-8 supporta praticamente tutti i sistemi di scrittura del mondo: latino, cirillico, greco, arabo, ebraico, cinese, giapponese, coreano, devanagari e migliaia di altri caratteri, inclusi emoji. Non c’è ragione per utilizzare codifiche diverse da UTF-8 nel web moderno. Codifiche come ISO-8859-1 o Windows-1252 supportano solo un sottoinsieme limitato di caratteri e possono causare la comparsa dei caratteri “mojibake” (testo illeggibile con simboli casuali) quando il contenuto include caratteri non supportati.
Per la configurazione pratica di un sito multilingua, oltre all’HTML è necessario che anche il server invii l’header HTTP Content-Type: text/html; charset=UTF-8 e che il database utilizzi la codifica UTF-8 (preferibilmente utf8mb4 in MySQL per supportare tutti i caratteri Unicode, inclusi gli emoji). La content negotiation — il meccanismo con cui il server sceglie automaticamente la lingua in base all’header Accept-Language del browser — è un’opzione aggiuntiva ma non dovrebbe mai essere l’unico meccanismo: l’utente deve sempre poter scegliere manualmente la lingua preferita.
Hai bisogno di aiuto con l’internazionalizzazione del tuo sito web? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.