{"id":164066,"date":"2026-01-09T09:00:00","date_gmt":"2026-01-09T08:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/internazionalizzazione-html-lang-dir-multilingua\/"},"modified":"2026-01-09T09:00:00","modified_gmt":"2026-01-09T08:00:00","slug":"internazionalizzazione-html-lang-dir-multilingua","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/internazionalizzazione-html-lang-dir-multilingua\/","title":{"rendered":"Internazionalizzazione in HTML: lang, dir e Contenuti Multilingua"},"content":{"rendered":"

In un web sempre pi\u00f9 globale, creare siti che funzionino correttamente per utenti di lingue e culture diverse \u00e8 una necessit\u00e0, non un lusso. L’internazionalizzazione<\/strong> (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.<\/p>\n

L’Attributo lang: Dichiarare la Lingua dei Contenuti<\/h2>\n

L’attributo lang<\/code> \u00e8 il meccanismo fondamentale in HTML per dichiarare la lingua del contenuto<\/strong>. Deve essere sempre presente sull’elemento <html><\/code> per dichiarare la lingua principale del documento:<\/p>\n

<html lang=\"it\">\n  <head>\n    <title>Pagina in italiano<\/title>\n  <\/head>\n  <body>\n    <p>Questo contenuto \u00e8 in italiano.<\/p>\n    <blockquote lang=\"en\">\n      <p>This quote is in English.<\/p>\n    <\/blockquote>\n  <\/body>\n<\/html><\/code><\/pre>\n
L’attributo lang<\/code> pu\u00f2 essere applicato a qualsiasi elemento HTML per indicare un cambio di lingua all’interno del documento. Nell’esempio sopra, il documento \u00e8 in italiano ma contiene una citazione in inglese. Questa dichiarazione ha effetti pratici importanti: gli screen reader<\/strong> cambiano automaticamente la voce sintetica per pronunciare il testo nella lingua corretta, i browser<\/strong> possono offrire la traduzione automatica in modo pi\u00f9 preciso, i motori di ricerca<\/strong> comprendono meglio la lingua del contenuto e le regole CSS come hyphens: auto<\/code> applicano la sillabazione corretta per ogni lingua.<\/p>\n
I codici lingua seguono lo standard BCP 47<\/strong>. I pi\u00f9 comuni sono codici a due lettere come it<\/code> (italiano), en<\/code> (inglese), fr<\/code> (francese), de<\/code> (tedesco), es<\/code> (spagnolo), ma possono includere varianti regionali come en-US<\/code> (inglese americano), en-GB<\/code> (inglese britannico), pt-BR<\/code> (portoghese brasiliano) o zh-Hans<\/code> (cinese semplificato). La specificit\u00e0 \u00e8 importante: en-GB<\/code> indica al browser di usare la sillabazione e le regole tipografiche dell’inglese britannico, che differiscono da quelle americane.<\/p>\n
L’Attributo dir e il Testo Bidirezionale<\/h2>\n
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<\/strong> (RTL, Right-To-Left). L’attributo dir<\/code> indica al browser la direzione di scrittura del testo:<\/p>\n
<html lang=\"ar\" dir=\"rtl\">\n  <body>\n    <h1>\u0645\u0631\u062d\u0628\u0627 \u0628\u0627\u0644\u0639\u0627\u0644\u0645<\/h1>\n    <p>\u0647\u0630\u0627 \u0646\u0635 \u0628\u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629.<\/p>\n    <p dir=\"ltr\" lang=\"en\">This paragraph is in English.<\/p>\n  <\/body>\n<\/html><\/code><\/pre>\n
I valori possibili sono: ltr<\/code> (left-to-right, default), rtl<\/code> (right-to-left) e auto<\/code> (il browser determina la direzione in base al contenuto). L’impostazione dir=\"rtl\"<\/code> 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.<\/p>\n
La sfida maggiore si presenta con il testo bidirezionale<\/strong> (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.<\/p>\n
Elementi BDO e BDI per Testo Misto<\/h2>\n
HTML offre due elementi specifici per gestire il testo bidirezionale. L’elemento <bdo><\/code> (Bidirectional Override) sovrascrive<\/strong> l’algoritmo bidirezionale, forzando una direzione specifica:<\/p>\n
<!-- Forzare il testo da destra a sinistra -->\n<p>La parola <bdo dir=\"rtl\">HELLO<\/bdo> scritta al contrario.<\/p>\n<!-- Risultato: La parola OLLEH scritta al contrario. --><\/code><\/pre>\n
L’elemento <bdi><\/code> (Bidirectional Isolation) isola<\/strong> un pezzo di testo dal contesto bidirezionale circostante, permettendo all’algoritmo Unicode di analizzarlo indipendentemente. Questo \u00e8 particolarmente utile quando si inseriscono dati generati dagli utenti (nomi, commenti) che potrebbero essere in qualsiasi lingua:<\/p>\n
<ul>\n  <li>Primo classificato: <bdi>\u0645\u062d\u0645\u062f<\/bdi> - 95 punti<\/li>\n  <li>Secondo classificato: <bdi>Marco<\/bdi> - 87 punti<\/li>\n  <li>Terzo classificato: <bdi>\u05e9\u05e8\u05d4<\/bdi> - 82 punti<\/li>\n<\/ul><\/code><\/pre>\n
Senza <bdi><\/code>, 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><\/code>, ogni nome viene isolato e la frase circostante mantiene il suo ordine corretto.<\/p>\n
Hreflang per la SEO Multilingua<\/h2>\n
Per siti disponibili in pi\u00f9 lingue, il tag <link rel=\"alternate\" hreflang=\"xx\"><\/code> indica ai motori di ricerca le versioni alternative della stessa pagina<\/strong> in lingue diverse. Questo \u00e8 cruciale per la SEO internazionale, poich\u00e9 evita problemi di contenuto duplicato e aiuta Google a servire la versione linguistica corretta nei risultati di ricerca:<\/p>\n
<link rel=\"alternate\" hreflang=\"it\" href=\"https:\/\/esempio.it\/\">\n<link rel=\"alternate\" hreflang=\"en\" href=\"https:\/\/esempio.it\/en\/\">\n<link rel=\"alternate\" hreflang=\"fr\" href=\"https:\/\/esempio.it\/fr\/\">\n<link rel=\"alternate\" hreflang=\"de\" href=\"https:\/\/esempio.it\/de\/\">\n<link rel=\"alternate\" hreflang=\"x-default\" href=\"https:\/\/esempio.it\/en\/\"><\/code><\/pre>\n
Il valore speciale x-default<\/code> indica la pagina da mostrare quando la lingua dell’utente non corrisponde a nessuna delle versioni disponibili. \u00c8 fondamentale che ogni pagina referenzi tutte<\/strong> 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<\/a>.<\/p>\n
Charset UTF-8 e Configurazione Multilingua<\/h2>\n
La corretta codifica dei caratteri \u00e8 il prerequisito fondamentale per qualsiasi sito multilingua. Il <meta charset=\"UTF-8\"><\/code> deve essere il primo elemento nel <head><\/strong>, idealmente entro i primi 1024 byte del documento:<\/p>\n
<!DOCTYPE html>\n<html lang=\"it\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Sito Multilingua<\/title>\n<\/head><\/code><\/pre>\n
UTF-8<\/strong> 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’\u00e8 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.<\/p>\n
Per la configurazione pratica di un sito multilingua, oltre all’HTML \u00e8 necessario che anche il server invii l’header HTTP Content-Type: text\/html; charset=UTF-8<\/code> e che il database utilizzi la codifica UTF-8 (preferibilmente utf8mb4<\/code> in MySQL per supportare tutti i caratteri Unicode, inclusi gli emoji). La content negotiation<\/strong> \u2014 il meccanismo con cui il server sceglie automaticamente la lingua in base all’header Accept-Language<\/code> del browser \u2014 \u00e8 un’opzione aggiuntiva ma non dovrebbe mai essere l’unico meccanismo: l’utente deve sempre poter scegliere manualmente la lingua preferita.<\/p>\n
Hai bisogno di aiuto con l’internazionalizzazione del tuo sito web? G Tech Group<\/strong> offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a support@gtechgroup.it<\/strong> o via WhatsApp al 0465 84 62 45<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
In un web sempre pi\u00f9 globale, creare siti che funzionino correttamente per utenti di lingue e culture diverse \u00e8 una necessit\u00e0, non un lusso. L’internazionalizzazione…<\/p>\n","protected":false},"author":2,"featured_media":164246,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"1246","_seopress_titles_title":"Internazionalizzazione in HTML: lang, dir e Contenuti Multilingua %%sep%% %%sitename%%","_seopress_titles_desc":"Guida completa all'internazionalizzazione HTML: attributo lang, dir per testo bidirezionale, hreflang, charset UTF-8 e configurazione di siti multilingua.","_seopress_robots_index":"","footnotes":""},"categories":[1246],"tags":[1551,787],"class_list":["post-164066","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-accessibilita-web","tag-sviluppo-web"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=164066"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164066\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/164246"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=164066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=164066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=164066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}