Declaring the page language with the lang attribute
The lang attribute on the <html> element states the main language of the page:
<html lang="en"></html>
It is one attribute, it takes a minute to add, and many sites still leave it out.
Why it matters
Screen readers use lang to pick the right voice and pronunciation rules. Without it, a screen
reader set to English may read a French page with English pronunciation, which can make it hard to
understand. Declaring the page language is a WCAG 2 Level A requirement (success criterion 3.1.1,
Language of Page).
Browsers use it for automatic translation prompts, spell checking in form fields, choosing fonts for some scripts, and language-specific behaviour such as hyphenation and quotation marks.
Search engines handle it differently. Google has said it detects the language of a page from
its visible content and does not use the lang attribute for that. Other search engines and tools
may read it. Either way, lang is not a ranking factor to optimize; it is basic, correct markup.
What we check
| Result | When |
|---|---|
| Pass | the <html> element has a non-empty lang attribute |
| Fail | lang is missing or empty |
The report shows the value we found. We check that the attribute is present, not whether the value is a valid language tag, so make sure it is correct yourself.
How to fix
Add lang to the opening <html> tag, using a language tag from BCP 47:
<!doctype html>
<html lang="en">
<head>
…
</head>
</html>
Common values:
| Language | Tag |
|---|---|
| English | en |
| English (United Kingdom) | en-GB |
| German | de |
| Turkish | tr |
| Portuguese (Brazil) | pt-BR |
| Chinese (Simplified) | zh-Hans |
A plain language code such as en is usually enough. Add a region (en-GB) only when it changes
spelling or vocabulary in a way that matters for your content.
Where to set it:
- Static sites and templates: edit the base layout that contains
<html>. - WordPress: themes normally output
language_attributes()on the<html>tag; the value comes from Settings → General → Site Language. If it is missing, the theme is not calling that function. - Frameworks: most have a root layout or document file (for example
app/layoutor_documentin Next.js,src/app.htmlin SvelteKit) where the<html>tag lives.
Multilingual sites
- Set
langper page to the language of that page, not to the site’s default language. - Mark passages in another language with
langon the containing element, so screen readers switch pronunciation for that part:
<p>The French call it <span lang="fr">l’esprit de l’escalier</span>.</p>
langdoes not tell search engines which page to show to which audience. For that, Google useshreflangannotations between the language versions of a page.
MDN documents the attribute and valid values in the lang global attribute reference.