lang
The lang attribute declares the natural language of an element and its descendants. It helps browsers, assistive technologies, and translation tools interpret content correctly.
Overview
The lang attribute declares the natural language of an element and its descendants. It helps browsers, assistive technologies, and translation tools interpret content correctly.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | ≤4 | 18 | ≤3.2 | |
| DOM API | ||||||
| The lang property of the HTMLElement interface indicates the base language of an element's attribute values and text content, in the form of a BCP 47 language tag. It reflects the element's lang attribute; the xml:lang attribute does not affect this property. | 1 | 12 | 1 | 3 | 18 | 1 |
Syntax
<html lang="ja">
<body>
<p>Japanese text</p>
<p lang="en">This is English text.</p>
<blockquote lang="fr">C'est la vie.</blockquote>
</body>
</html>Live demo
Mixed-language article
Declare the language of each fragment so pronunciation and styling stay accurate.
Language-aware labels
Style labels differently with :lang() while keeping the source text intact.
Quoted names and terms
Use nested lang values for titles, names, and quoted content inside a card.
Use cases
Page language declaration
Set the primary language of the document so pronunciation, spellchecking, and translation start from the correct assumption.
Inline language changes
Mark quotations, names, or phrases in another language so assistive tech can switch pronunciation appropriately.
Cautions
- Setting the wrong language can be worse than omitting it because it affects pronunciation and language tools incorrectly.
- Remember that nested content can need its own lang value when the language changes within the page.
Accessibility
- Correct language metadata is especially important for screen reader pronunciation and translation support.
- Use language changes sparingly but accurately wherever the content actually changes language.
Related links
Powered by web-features