The lang Attribute

The `lang` Attribute

Global Attribute

The lang attribute specifies the language of an element’s content. It helps search engines, screen readers, translation tools, and browsers provide appropriate language-specific features like spell-checking and hyphenation.

Syntax

<element lang="language-code">Content</element>

Values

Value	Description
`language-code`	A valid BCP 47 language tag (e.g., `en`, `es`, `fr-CA`, `zh-Hans`)

Examples

Document Language

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>English Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This entire page is in English.</p>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>English Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This entire page is in English.</p>
</body>
</html>

Mixed Language Content

<article lang="en">
<h2>International Greetings</h2>

<p>English: Hello, how are you?</p>

<p lang="es">Spanish: ¡Hola! ¿Cómo estás?</p>

<p lang="fr">French: Bonjour! Comment allez-vous?</p>

<p lang="de">German: Hallo! Wie geht es dir?</p>

<p lang="ja">Japanese: こんにちは！お元気ですか？</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article lang="en">
<h2>International Greetings</h2>

<p>English: Hello, how are you?</p>

<p lang="es">Spanish: ¡Hola! ¿Cómo estás?</p>

<p lang="fr">French: Bonjour! Comment allez-vous?</p>

<p lang="de">German: Hallo! Wie geht es dir?</p>

<p lang="ja">Japanese: こんにちは！お元気ですか？</p>
</article>

Quotes in Different Languages

<article lang="en">
<h2>Famous Quotes</h2>

<blockquote lang="la">
  <p>Carpe diem.</p>
  <footer>— Horace (Latin)</footer>
</blockquote>

<blockquote lang="fr">
  <p>Je pense, donc je suis.</p>
  <footer>— René Descartes (French)</footer>
</blockquote>

<blockquote lang="zh-Hans">
  <p>千里之行，始于足下。</p>
  <footer>— 老子 (Simplified Chinese)</footer>
</blockquote>
</article>

<style>
blockquote {
  margin: 15px 0;
  padding: 15px 20px;
  background: #f8fafc;
  border-left: 4px solid #3b82f6;
}
blockquote p {
  margin: 0 0 8px 0;
  font-style: italic;
}
footer {
  font-size: 0.9em;
  color: #64748b;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<article lang="en">
<h2>Famous Quotes</h2>

<blockquote lang="la">
  <p>Carpe diem.</p>
  <footer>— Horace (Latin)</footer>
</blockquote>

<blockquote lang="fr">
  <p>Je pense, donc je suis.</p>
  <footer>— René Descartes (French)</footer>
</blockquote>

<blockquote lang="zh-Hans">
  <p>千里之行，始于足下。</p>
  <footer>— 老子 (Simplified Chinese)</footer>
</blockquote>
</article>

<style>
blockquote {
  margin: 15px 0;
  padding: 15px 20px;
  background: #f8fafc;
  border-left: 4px solid #3b82f6;
}
blockquote p {
  margin: 0 0 8px 0;
  font-style: italic;
}
footer {
  font-size: 0.9em;
  color: #64748b;
}
</style>

Regional Variants

<div lang="en">
<h3>Color vs Colour</h3>

<p lang="en-US">
  American English: The color of the sky is blue.
</p>

<p lang="en-GB">
  British English: The colour of the sky is blue.
</p>

<hr>

<h3>Portuguese Variants</h3>

<p lang="pt-BR">
  Brazilian Portuguese: Você fala português?
</p>

<p lang="pt-PT">
  European Portuguese: Falas português?
</p>
</div>

<style>
h3 {
  color: #1e293b;
  margin-top: 20px;
}
p {
  padding: 10px;
  background: #f1f5f9;
  border-radius: 4px;
  margin: 8px 0;
}
hr {
  border: none;
  border-top: 2px solid #e2e8f0;
  margin: 20px 0;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div lang="en">
<h3>Color vs Colour</h3>

<p lang="en-US">
  American English: The color of the sky is blue.
</p>

<p lang="en-GB">
  British English: The colour of the sky is blue.
</p>

<hr>

<h3>Portuguese Variants</h3>

<p lang="pt-BR">
  Brazilian Portuguese: Você fala português?
</p>

<p lang="pt-PT">
  European Portuguese: Falas português?
</p>
</div>

<style>
h3 {
  color: #1e293b;
  margin-top: 20px;
}
p {
  padding: 10px;
  background: #f1f5f9;
  border-radius: 4px;
  margin: 8px 0;
}
hr {
  border: none;
  border-top: 2px solid #e2e8f0;
  margin: 20px 0;
}
</style>

Common Language Codes

Major Languages

Code	Language	Example
`en`	English	`<p lang="en">Hello</p>`
`es`	Spanish	`<p lang="es">Hola</p>`
`fr`	French	`<p lang="fr">Bonjour</p>`
`de`	German	`<p lang="de">Hallo</p>`
`it`	Italian	`<p lang="it">Ciao</p>`
`pt`	Portuguese	`<p lang="pt">Olá</p>`
`ru`	Russian	`<p lang="ru">Привет</p>`
`ja`	Japanese	`<p lang="ja">こんにちは</p>`
`zh`	Chinese	`<p lang="zh">你好</p>`
`ar`	Arabic	`<p lang="ar">مرحبا</p>`
`ko`	Korean	`<p lang="ko">안녕하세요</p>`
`hi`	Hindi	`<p lang="hi">नमस्ते</p>`

Regional Variants

Code	Language & Region
`en-US`	English (United States)
`en-GB`	English (United Kingdom)
`en-AU`	English (Australia)
`es-ES`	Spanish (Spain)
`es-MX`	Spanish (Mexico)
`fr-FR`	French (France)
`fr-CA`	French (Canada)
`pt-BR`	Portuguese (Brazil)
`pt-PT`	Portuguese (Portugal)
`zh-Hans`	Chinese (Simplified)
`zh-Hant`	Chinese (Traditional)

Accessibility Benefits

<article lang="en">
<h2>Screen Reader Example</h2>

<p>
  English screen readers will pronounce this correctly.
</p>

<p lang="es">
  Spanish screen readers will pronounce "gracias" correctly,
  even though the page is primarily in English.
</p>

<p>
  Without proper <code>lang</code> attributes, screen readers
  might mispronounce foreign words:
  <span lang="fr">rendez-vous</span>,
  <span lang="de">schadenfreude</span>,
  <span lang="ja">karaoke</span>.
</p>
</article>

<style>
code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<article lang="en">
<h2>Screen Reader Example</h2>

<p>
  English screen readers will pronounce this correctly.
</p>

<p lang="es">
  Spanish screen readers will pronounce "gracias" correctly,
  even though the page is primarily in English.
</p>

<p>
  Without proper <code>lang</code> attributes, screen readers
  might mispronounce foreign words:
  <span lang="fr">rendez-vous</span>,
  <span lang="de">schadenfreude</span>,
  <span lang="ja">karaoke</span>.
</p>
</article>

<style>
code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}
</style>

Voice Selection

Screen readers use the lang attribute to:

Select the appropriate voice or pronunciation rules
Apply correct intonation and stress patterns
Pronounce special characters properly

Browser Features

Spell Checking

<div>
<h3>Spell Check Demo</h3>

<label for="english">English Text (lang="en"):</label>
<textarea id="english" lang="en" rows="2" style="width: 100%; margin-bottom: 15px;">
The quikc brown fox jumps ovr the lazy dog.
</textarea>

<label for="spanish">Spanish Text (lang="es"):</label>
<textarea id="spanish" lang="es" rows="2" style="width: 100%;">
El pérro marrón salta sobrr el gato perezoso.
</textarea>

<p style="margin-top: 10px; font-size: 0.9em; color: #64748b;">
  Try typing in different languages. Browsers will use language-specific dictionaries.
</p>
</div>

<style>
label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}
textarea {
  padding: 8px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div>
<h3>Spell Check Demo</h3>

<label for="english">English Text (lang="en"):</label>
<textarea id="english" lang="en" rows="2" style="width: 100%; margin-bottom: 15px;">
The quikc brown fox jumps ovr the lazy dog.
</textarea>

<label for="spanish">Spanish Text (lang="es"):</label>
<textarea id="spanish" lang="es" rows="2" style="width: 100%;">
El pérro marrón salta sobrr el gato perezoso.
</textarea>

<p style="margin-top: 10px; font-size: 0.9em; color: #64748b;">
  Try typing in different languages. Browsers will use language-specific dictionaries.
</p>
</div>

<style>
label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}
textarea {
  padding: 8px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
}
</style>

Translation Tools

Browsers use the lang attribute to:

Offer automatic translation when content language differs from browser language
Improve translation accuracy by knowing source language
Skip translation for specific elements

<!-- Tell translation tools not to translate this element -->
<p lang="en" translate="no">
  Product code: SKU-12345
</p>

Font Selection

Browsers may select different fonts based on language:

<!-- Japanese text -->
<p lang="ja">日本語のテキスト</p>

<!-- Chinese text (may use different glyphs) -->
<p lang="zh">中文文本</p>

<!-- Korean text -->
<p lang="ko">한국어 텍스트</p>

SEO Benefits

Search Engine Understanding

Search engines use lang to:

Index content in the appropriate language database
Show content to users searching in that language
Understand regional targeting

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>US-focused content</title>
</head>
<body>
  <!-- Content optimized for US English speakers -->
</body>
</html>

Hreflang and International SEO

Combined with hreflang for multi-language sites:

<!-- English version -->
<html lang="en">
<head>
  <link rel="alternate" hreflang="es" href="https://example.com/es/">
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/">
</head>

<!-- Spanish version -->
<html lang="es">
<head>
  <link rel="alternate" hreflang="en" href="https://example.com/">
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/">
</head>

Best Practices

Always Set on HTML Element

<!-- Good: Language set on root element -->
<!DOCTYPE html>
<html lang="en">
  <!-- page content -->
</html>

<!-- Avoid: No language specified -->
<!DOCTYPE html>
<html>
  <!-- page content -->
</html>

Use Specific Codes When Needed

<!-- Generic when region doesn't matter -->
<html lang="es">

<!-- Specific when targeting a region -->
<html lang="es-MX">  <!-- Mexican Spanish -->
<html lang="es-ES">  <!-- Castilian Spanish -->

Mark Language Changes

<article lang="en">
  <p>In French, hello is <span lang="fr">bonjour</span>.</p>
  <p>The German word is <span lang="de">hallo</span>.</p>
</article>

Don’t Overuse

<!-- Avoid: Unnecessary language tags -->
<p lang="en">
  <span lang="en">This</span> <span lang="en">is</span>
  <span lang="en">excessive</span>.
</p>

<!-- Better: One tag on container -->
<p lang="en">
  This is better.
</p>

Common Mistakes

Invalid Language Codes

<!-- Wrong: Not a valid BCP 47 code -->
<html lang="english">
<html lang="EN">
<html lang="en_US">

<!-- Correct -->
<html lang="en">
<html lang="en-US">

Missing Lang on HTML

<!-- Problematic: Screen readers won't know the language -->
<!DOCTYPE html>
<html>
<body>
  <p>Content without language specification</p>
</body>
</html>

<!-- Better -->
<!DOCTYPE html>
<html lang="en">
<body>
  <p>Content with language specified</p>
</body>
</html>

Wrong Language Code

<!-- Wrong: Using wrong code -->
<p lang="sp">Spanish text</p>  <!-- 'sp' is not Spanish -->

<!-- Correct -->
<p lang="es">Spanish text</p>  <!-- 'es' is Spanish -->

Dynamic Language Switching

<div id="app">
<div>
  <label for="lang-select">Choose Language:</label>
  <select id="lang-select" onchange="changeLanguage()">
    <option value="en">English</option>
    <option value="es">Español</option>
    <option value="fr">Français</option>
    <option value="de">Deutsch</option>
  </select>
</div>

<div id="content" lang="en" style="margin-top: 20px; padding: 20px; background: #f8fafc; border-radius: 6px;">
  <h3 id="greeting">Hello!</h3>
  <p id="message">Welcome to our website.</p>
</div>
</div>

<script>
const translations = {
  en: { greeting: 'Hello!', message: 'Welcome to our website.' },
  es: { greeting: '¡Hola!', message: 'Bienvenido a nuestro sitio web.' },
  fr: { greeting: 'Bonjour!', message: 'Bienvenue sur notre site web.' },
  de: { greeting: 'Hallo!', message: 'Willkommen auf unserer Website.' }
};

function changeLanguage() {
  const lang = document.getElementById('lang-select').value;
  const content = document.getElementById('content');

  content.setAttribute('lang', lang);
  document.getElementById('greeting').textContent = translations[lang].greeting;
  document.getElementById('message').textContent = translations[lang].message;
}
</script>

<style>
select {
  padding: 6px 10px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  margin-left: 10px;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<div id="app">
<div>
  <label for="lang-select">Choose Language:</label>
  <select id="lang-select" onchange="changeLanguage()">
    <option value="en">English</option>
    <option value="es">Español</option>
    <option value="fr">Français</option>
    <option value="de">Deutsch</option>
  </select>
</div>

<div id="content" lang="en" style="margin-top: 20px; padding: 20px; background: #f8fafc; border-radius: 6px;">
  <h3 id="greeting">Hello!</h3>
  <p id="message">Welcome to our website.</p>
</div>
</div>

<script>
const translations = {
  en: { greeting: 'Hello!', message: 'Welcome to our website.' },
  es: { greeting: '¡Hola!', message: 'Bienvenido a nuestro sitio web.' },
  fr: { greeting: 'Bonjour!', message: 'Bienvenue sur notre site web.' },
  de: { greeting: 'Hallo!', message: 'Willkommen auf unserer Website.' }
};

function changeLanguage() {
  const lang = document.getElementById('lang-select').value;
  const content = document.getElementById('content');

  content.setAttribute('lang', lang);
  document.getElementById('greeting').textContent = translations[lang].greeting;
  document.getElementById('message').textContent = translations[lang].message;
}
</script>

<style>
select {
  padding: 6px 10px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  margin-left: 10px;
}
</style>

Browser Support

The lang attribute is supported by all browsers.

Browser	Support
Chrome	All versions
Firefox	All versions
Safari	All versions
Edge	All versions

dir - Text direction (ltr/rtl)
translate - Whether to translate content

The lang Attribute

The lang Attribute

Syntax

Values

Examples

Document Language

Mixed Language Content

Quotes in Different Languages

Regional Variants

Common Language Codes

Major Languages

Regional Variants

Accessibility Benefits

Screen Reader Pronunciation

Voice Selection

Browser Features

Spell Checking

Translation Tools

Font Selection

SEO Benefits

Search Engine Understanding

Hreflang and International SEO

Best Practices

Always Set on HTML Element

Use Specific Codes When Needed

Mark Language Changes

Don’t Overuse

Common Mistakes

Invalid Language Codes

Missing Lang on HTML

Wrong Language Code

Dynamic Language Switching

Browser Support

Related Attributes

Specifications

The `lang` Attribute