About This HTML Issue
The lang attribute on the <html> element sets the default language for all text content within the page. Without it, assistive technologies like screen readers have to guess which language the content is in, which can lead to garbled or incorrectly pronounced text. For example, a French screen reader attempting to read English text — or vice versa — produces a poor experience for users who rely on these tools.
Beyond accessibility, the lang attribute matters for several other reasons:
- Search engines use it to serve the correct language version of your page in search results.
- Browsers rely on it to choose appropriate fonts, hyphenation rules, and quotation mark styles.
- Translation tools use it to detect the source language of the page.
-
CSS selectors like
:lang()depend on it to apply language-specific styling.
The value of the lang attribute must be a valid BCP 47 language tag. Common examples include en (English), fr (French), es (Spanish), de (German), zh (Chinese), ja (Japanese), and ar (Arabic). You can also be more specific with region subtags, such as en-US for American English or pt-BR for Brazilian Portuguese.
If your page contains sections in a different language than the primary one, you can use the lang attribute on individual elements to override the document-level language for that section.
Examples
Missing lang attribute (triggers the warning)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Fixed with lang attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>Using a region subtag for specificity
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p>Colour is spelt differently here.</p>
</body>
</html>Overriding the language for a specific section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multilingual Page</title>
</head>
<body>
<p>This paragraph is in English.</p>
<p lang="fr">Ce paragraphe est en français.</p>
</body>
</html>In this last example, the document language is English, but the second paragraph is marked as French. A screen reader will switch to French pronunciation rules for that paragraph, then revert to English for the rest of the page.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.
Learn more: