How do I fix a missing lang attribute on the html element?

A missing lang attribute on the html element means the page never states which human language its content is written in. The lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that editable elements should be written in by the user, and its value is a single BCP 47 language tag. Leave it off and every downstream consumer, from screen readers to translation tooling, has to guess.

Why this matters

Language detection is one of the cheapest accessibility wins you can ship. MDN notes that providing a lang attribute with a valid BCP 47 language tag on the html element helps screen-reading technology determine the proper language to announce, and that without it, screen readers will typically default to the operating system's set language, which may cause mispronunciations. A French page rendered with an English voice produces fluent nonsense rather than the correct words. The same attribute also ensures that metadata in the head, such as the page title, is announced in the right language.

The failure is not only cosmetic. WCAG Success Criterion 3.1.1 requires the page language to be specified in a way that can be programmatically determined, and the purpose of that requirement is primarily to let assistive technologies such as screen readers invoke the correct pronunciation. Success Criterion 3.1.2 extends the same obligation to passages that switch languages inside an otherwise monolingual page.

The attribute also has an inheritance rule worth knowing. If an element has no lang of its own it inherits from its parent, so a single value on the root element covers the whole document. If no ancestor sets a language, the browser may fall back to a meta http-equiv="content-language" element or the HTTP Content-Language header. When none of those cues exist, the content language is left as unknown, which is exactly the state a missing lang attribute produces.

How to fix it

Declare the language once, on the root element, using a valid BCP 47 subtag such as en, en-GB, or fr. Do not annotate every element; inheritance already carries the value down the tree. For a passage written in a different language, set lang on the smallest element that contains it. If you also emit xml:lang, the HTML spec requires the two values to match case-insensitively, and xml:lang takes priority, so keep them identical to avoid surprises.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <p>This paragraph is written in English.</p>
    <p lang="fr">Ce paragraphe est écrit en français.</p>
  </body>
</html>

How to verify the fix

Fetch the page and confirm the start tag carries a language. The one-liner below prints the opening html element so you can read the value directly; you can also use View Source in the browser or the Elements panel. Pick a tag that describes the language of the majority of the content, not the location of your servers.

curl -s https://example.com/ | grep -i -m1 '<html'

Related issues