Guida HTML interattiva: Attributo lang

Q: Cosa devo mettere nell'attributo lang di html?

Un codice lingua dello standard BCP 47: en per l'inglese, es per lo spagnolo, fr per il francese, ja per il giapponese. Aggiungi una regione solo quando conta, come in en-US, en-GB o pt-BR.

Q: Devo usare lang="en" o lang="en-US"?

Sono validi entrambi. en basta per la maggior parte delle pagine in inglese. Usa en-US o en-GB quando la variante regionale conta, per esempio per l'ortografia, le date o la pronuncia di alcune parole.

Q: Come indico un testo in un'altra lingua?

Aggiungi lang all'elemento che lo contiene: bon appétit . Gli screen reader cambiano pronuncia per quella frase, e il CSS può darle uno stile con :lang(fr).

Q: Che differenza c'è tra lang e hreflang?

lang dice in che lingua è il contenuto di un elemento. hreflang va su un link e dice in che lingua è la pagina collegata: è così che i siti indicano ai motori di ricerca le altre versioni linguistiche di una pagina.

Impostare la lingua della pagina

Metti l'attributo lang sull'elemento <html>, con il codice della lingua in cui è scritta la pagina:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lang</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>Hello! This page is in English.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    document.getElementById('out').textContent =
      'Page language: ' + document.documentElement.lang +
      '. Your browser language: ' + navigator.language + '.';
  </script>
</body>
</html>

L'attributo non ha effetti visibili su questo paragrafo, ma cambia il modo in cui la pagina viene trattata: uno screen reader la legge con una voce inglese, il browser lo usa per decidere se proporre una traduzione e un correttore ortografico può usarlo per scegliere il dizionario inglese. Senza l'attributo gli strumenti devono tirare a indovinare, e uno screen reader impostato su un'altra lingua può leggere il testo inglese con la pronuncia sbagliata.

Codici lingua

Il valore è un tag di lingua dello standard BCP 47. Quasi sempre è un codice di lingua di due lettere, seguito facoltativamente da una regione o da una scrittura:

Codice	Lingua
`en`	Inglese
`en-US`, `en-GB`	Inglese come si usa negli Stati Uniti, nel Regno Unito
`es`, `es-MX`	Spagnolo, spagnolo come si usa in Messico
`pt-BR`	Portoghese come si usa in Brasile
`fr`, `de`, `it`	Francese, tedesco, italiano
`ar`, `he`	Arabo, ebraico (da destra a sinistra, vedi più avanti)
`ja`, `ko`	Giapponese, coreano
`zh-Hans`, `zh-Hant`	Cinese in caratteri semplificati, tradizionali

I codici non distinguono tra maiuscole e minuscole, ma per convenzione la lingua si scrive in minuscolo e la regione in maiuscolo. Aggiungi una regione solo quando la variante conta; en è un valore completo e corretto.

Cose visibili che lang cambia

Quasi tutti gli effetti di lang riguardano il software, ma alcuni si vedono sullo schermo. Le virgolette dell'elemento <q> seguono la lingua, e lo stesso vale per le regole di maiuscole e minuscole:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Visible effects</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; font-size: 18px; }
    td { padding: 4px 12px; border-bottom: 1px solid #e5e7eb; }
    .up { text-transform: uppercase; }
  </style>
</head>
<body>
  <table>
    <tr><td>English</td><td lang="en"><q>quote</q></td><td lang="en" class="up">istanbul</td></tr>
    <tr><td>French</td><td lang="fr"><q>quote</q></td><td lang="fr" class="up">istanbul</td></tr>
    <tr><td>German</td><td lang="de"><q>quote</q></td><td lang="de" class="up">istanbul</td></tr>
    <tr><td>Japanese</td><td lang="ja"><q>quote</q></td><td lang="ja" class="up">istanbul</td></tr>
    <tr><td>Turkish</td><td lang="tr"><q>quote</q></td><td lang="tr" class="up">istanbul</td></tr>
  </table>
</body>
</html>

Ogni riga ha il suo stile di virgolette. Nell'ultima colonna lo stesso text-transform: uppercase dà "ISTANBUL" in inglese e "İSTANBUL" in turco, perché il turco mantiene il puntino sulla i maiuscola. Cambia il lang della riga turca in en e il puntino sparisce. Anche la sillabazione automatica (hyphens: auto in CSS) dipende da lang: il browser deve conoscere la lingua per sapere dove si possono spezzare le parole.

Indicare frasi in un'altra lingua

lang funziona su qualsiasi elemento, non solo su <html>. Quando una pagina in una lingua cita una frase in un'altra, racchiudi la frase e dalle il suo codice. Il CSS può selezionare le lingue con il selettore :lang():

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mixed languages</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    :lang(fr), :lang(es) { font-style: italic; color: #2563eb; }
  </style>
</head>
<body>
  <p>The chef said <span lang="fr">bon appétit</span> and left.</p>
  <p>Our team motto is <span lang="es">poco a poco</span>: little by little.</p>
</body>
</html>

Uno screen reader passa alla pronuncia francese per "bon appétit" e torna all'inglese subito dopo. :lang(fr) trova anche fr-CA e ogni altra variante del francese, e trova gli elementi che ereditano la lingua da un antenato, cosa che un selettore di attributo come [lang="fr"] non farebbe.

Lingue da destra a sinistra: dir

Arabo, ebraico, persiano e urdu si scrivono da destra a sinistra. lang indica la lingua; l'attributo dir imposta la direzione. Un'intera pagina in arabo li usa entrambi su <html>:

<html lang="ar" dir="rtl">

Per una breve frase da destra a sinistra dentro una pagina da sinistra a destra, mettili entrambi sull'elemento che la contiene:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dir</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    blockquote { border-inline-start: 4px solid #16a34a; margin: 12px 0; padding-inline-start: 12px; }
  </style>
</head>
<body>
  <p>The Arabic word for hello is <span lang="ar" dir="rtl">مرحبا</span>.</p>
  <blockquote lang="ar" dir="rtl">مرحبا بكم في الموقع</blockquote>
</body>
</html>

Il blockquote si allinea a destra e anche la sua barra verde si sposta a destra, perché border-inline-start segue la direzione. Usare proprietà logiche come margin-inline-start al posto di margin-left mantiene i layout corretti in entrambe le direzioni.

lang vs hreflang

lang descrive il contenuto di un elemento. hreflang va su un link e descrive la pagina a cui punta. I siti tradotti elencano ogni versione nell'<head> così i motori di ricerca possono mandare ogni lettore a quella giusta:

<link rel="alternate" hreflang="en" href="https://example.com/">
<link rel="alternate" hreflang="de" href="https://example.com/de/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

Ogni pagina tradotta imposta comunque il proprio lang su <html>: lang="de" su quella tedesca.

Errori comuni

Dimenticare lang. Molti template non lo mettono; impostalo accanto al doctype su ogni pagina.
Copiare lang="en" nelle pagine tradotte. Una pagina tedesca segnata come inglese viene letta con la pronuncia inglese. Fai corrispondere il contenuto.
Usare un codice di paese come lingua. lang="jp" e lang="gr" non sono giapponese e greco; i codici sono ja ed el.
Usare lang per impostare la direzione. lang="ar" da solo non fa scorrere il testo da destra a sinistra. Aggiungi dir="rtl".
Scrivere lang="en_US". Il separatore è un trattino: en-US.

Domande frequenti

Cosa fa l'attributo lang in HTML?

Dichiara la lingua del contenuto dell'elemento. Gli screen reader lo usano per scegliere la voce e la pronuncia giuste, i browser per proporre la traduzione, scegliere le virgolette e sillabare, e alcuni correttori ortografici per scegliere il dizionario.

Cosa devo mettere nell'attributo lang di html?

Un codice lingua dello standard BCP 47: en per l'inglese, es per lo spagnolo, fr per il francese, ja per il giapponese. Aggiungi una regione solo quando conta, come in en-US, en-GB o pt-BR.

Devo usare lang="en" o lang="en-US"?

Sono validi entrambi. en basta per la maggior parte delle pagine in inglese. Usa en-US o en-GB quando la variante regionale conta, per esempio per l'ortografia, le date o la pronuncia di alcune parole.

L'attributo lang influisce sulla SEO?

Google ha detto che riconosce la lingua dal testo stesso e non si basa sull'attributo lang. Impostalo comunque bene: altri motori di ricerca, strumenti di traduzione e screen reader lo usano. Per collegare le versioni tradotte di una pagina, usa i link hreflang.

Come indico un testo in un'altra lingua?

Aggiungi lang all'elemento che lo contiene: <span lang="fr">bon appétit</span>. Gli screen reader cambiano pronuncia per quella frase, e il CSS può darle uno stile con :lang(fr).

Che differenza c'è tra lang e hreflang?

lang dice in che lingua è il contenuto di un elemento. hreflang va su un link e dice in che lingua è la pagina collegata: è così che i siti indicano ai motori di ricerca le altre versioni linguistiche di una pagina.

Concetti correlati