# Consider adding a “lang” attribute to the “html” start tag to declare the language of this document.

> Canonical HTML version: https://rocketvalidator.com/html-validation/consider-adding-a-lang-attribute-to-the-html-start-tag-to-declare-the-language-of-this-document
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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)

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>
```

### Fixed with `lang` attribute

```html
<!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

```html
<!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

```html
<!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.
