lang
Declare the language of content. Screen readers use it to switch pronunciation, and browsers use it for hyphenation, spell-checking, and font selection.
Overview
The lang attribute declares the language of an element's content. It is one of the most impactful accessibility attributes — screen readers use it to switch pronunciation engines, and browsers use it for hyphenation, spell-checking, quote marks, and font selection.
Set lang on the <html> element for the page's primary language, and on inline elements when the language changes mid-content.
Language Codes
The value is a BCP 47 language tag. The most common codes:
| Code | Language |
|---|---|
en | English |
es | Spanish |
fr | French |
de | German |
ja | Japanese |
zh | Chinese |
ar | Arabic |
hi | Hindi |
ko | Korean |
pt | Portuguese |
ru | Russian |
it | Italian |
Regional Variants
Add a region subtag to distinguish dialects. The browser inherits the base language, so en-GB still matches :lang(en) in CSS.
| Code | Variant |
|---|---|
en-US | American English |
en-GB | British English |
pt-BR | Brazilian Portuguese |
pt-PT | European Portuguese |
zh-Hans | Simplified Chinese |
zh-Hant | Traditional Chinese |
es-MX | Mexican Spanish |
fr-CA | Canadian French |
Page Language
Every page should declare its primary language on the <html> element. This is the single most important use of lang.
Inline Language Switches
When content in a different language appears inside the page, wrap it in an element with the appropriate lang. This tells screen readers to switch pronunciation — without it, a screen reader using English rules will mangle French, Japanese, or any other language.
The French word bonjour means "hello".
In Japanese, thank you is ありがとう.
Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.
Effects of lang
Setting the correct lang value affects more than you might expect:
Hyphenation
The CSS hyphens: auto property requires a correct lang attribute to know where words can be broken. Without it, automatic hyphenation will not work.
Screen Reader Pronunciation
Screen readers maintain pronunciation dictionaries for each language. When lang changes, the screen reader switches to the appropriate voice and pronunciation rules. Without this, "bonjour" would be read with English phonetics.
Spell-Checking
Browsers use lang to select the correct spell-check dictionary. A <textarea lang="fr"> will check spelling against French, not the page's default language.
Font Selection
When the primary font lacks glyphs for a language's characters, the browser uses lang to select the best fallback. This is especially important for CJK (Chinese, Japanese, Korean) text, where the same Unicode codepoint can render differently depending on language.
Quote Marks
The <q> element generates language-appropriate quotation marks based on the inherited lang value.
She said, Hello!
Elle a dit, Bonjour!
Sie sagte, Hallo!
CSS :lang() Pseudo-Class
The :lang() pseudo-class matches elements by their computed language, including inherited values. It is more reliable than [lang="..."] attribute selectors because it accounts for inheritance.
Code and Non-Language Content
Programming code is not natural language. Setting lang="" (empty string) signals that the content has no linguistic meaning, preventing screen readers from attempting to pronounce variable names as words.