All guides · SEO

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/layout or _document in Next.js, src/app.html in SvelteKit) where the <html> tag lives.

Multilingual sites

  • Set lang per page to the language of that page, not to the site’s default language.
  • Mark passages in another language with lang on 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>
  • lang does not tell search engines which page to show to which audience. For that, Google uses hreflang annotations between the language versions of a page.

MDN documents the attribute and valid values in the lang global attribute reference.

Last updated October 24, 2026