# The <html> element must have a lang attribute.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/readable/html-has-lang
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<html>` element is the root of every HTML page, and its `lang` attribute tells browsers and assistive technologies what language the page content is written in. When this attribute is missing, empty, or contains only whitespace, screen readers cannot determine which language rules and pronunciation to apply. This leads to garbled or incorrect speech output, making the page difficult or impossible to understand for people who rely on screen readers.

Screen readers support dozens of languages, each with its own pronunciation engine. A screen reader set to English that encounters unlabeled French content will attempt to read the French words using English phonetic rules, producing nonsensical audio. The `lang` attribute on the `<html>` element sets the default language for the entire page, so screen readers can switch to the correct pronunciation engine automatically.

This rule maps to WCAG 2 Success Criterion 3.1.1: Language of Page (Level A). This is a baseline requirement at the lowest conformance level, meaning every web page must satisfy it. The success criterion requires that the default human language of each page can be programmatically determined. Setting the `lang` attribute on the `<html>` element is the standard technique for meeting this requirement in HTML documents.

While the page language can theoretically be set through HTTP headers or `<meta>` elements, these methods are not reliably supported across assistive technologies. The `lang` attribute on `<html>` is the only method that works consistently.

Note that `xml:lang` alone is not sufficient for HTML pages served as `text/html`. The `lang` attribute must be present. You can include both `lang` and `xml:lang` if needed for XHTML compatibility, but `lang` is required.

## How to fix it

Add a `lang` attribute to the `<html>` element with a valid BCP 47 language tag that matches the primary language of the page content. Common language tags include:

- `en` for English
- `es` for Spanish
- `fr` for French
- `de` for German
- `ja` for Japanese
- `zh` for Chinese
- `pt` for Portuguese
- `ar` for Arabic

You can also use region subtags for more specificity, such as `en-US` for American English or `pt-BR` for Brazilian Portuguese. The language tag is not case sensitive.

If sections of the page are in a different language than the primary language, use the `lang` attribute on those specific elements (e.g., `<p lang="fr">`) to override the page default for that section.

## Examples

### Missing `lang` attribute

This page has no `lang` attribute. Screen readers will guess the language or fall back to the user's default, which may not match the actual content.

```html
<html>
  <head>
    <title>Welcome</title>
  </head>
  <body>
    <p>The quick brown fox jumps over the lazy dog.</p>
  </body>
</html>
```

### Empty `lang` attribute

An empty string or whitespace-only value does not satisfy the requirement.

```html
<html lang="">
  <head>
    <title>Welcome</title>
  </head>
  <body>
    <p>The quick brown fox jumps over the lazy dog.</p>
  </body>
</html>
```

### Using `xml:lang` without `lang`

For HTML pages served as `text/html`, `xml:lang` alone is not recognized by browsers or most assistive technologies. The `lang` attribute must also be present.

```html
<html xml:lang="en">
  <head>
    <title>Welcome</title>
  </head>
  <body>
    <p>The quick brown fox jumps over the lazy dog.</p>
  </body>
</html>
```

### Correct: `lang` attribute with a valid language tag

```html
<html lang="en">
  <head>
    <title>Welcome</title>
  </head>
  <body>
    <p>The quick brown fox jumps over the lazy dog.</p>
  </body>
</html>
```

### Correct: page in Spanish

```html
<html lang="es">
  <head>
    <title>Bienvenido</title>
  </head>
  <body>
    <p>El zorro marrón rápido salta sobre el perro perezoso.</p>
  </body>
</html>
```

### Correct: page with a mixed language section

When the page is primarily in English but contains a passage in French, set the page `lang` to `en` and override it on the French section.

```html
<html lang="en">
  <head>
    <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>
```
