useValidLang (HTML)

Summary

Rule available since: v2.4.0
Diagnostic Category: lint/a11y/useValidLang
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Inspired from jsx-a11y/lang

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useValidLang": "error"
6
      }
7
    }
8
  }
9
}

Description

Require a supported language tag on the <html> element.

For static values, the rule accepts a language code such as en, optionally followed by a script or region (zh-Hant or en-GB), or by both (zh-Hant-TW). Tags with additional variants or extensions are outside the supported subset and are reported. Dynamic values are not evaluated.

Examples

Invalid

1
<html lang="lorem" />

code-block.html:1:12 lint/a11y/useValidLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a valid value for the lang attribute.
  
  > 1 │ <html lang="lorem" />
      │            ^^^^^^^
    2 │ 
  
  ℹ Some of valid languages:
  
  - ab
  - aa
  - af
  - sq
  - am
  - ar
  - an
  - hy
  - as
  - ay
  - az
  - ba
  - eu
  - bn
  - dz

1
<html lang="en-babab" />

code-block.html:1:12 lint/a11y/useValidLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a valid value for the lang attribute.
  
  > 1 │ <html lang="en-babab" />
      │            ^^^^^^^^^^
    2 │

1
<html lang="en-GB-typo" />

code-block.html:1:12 lint/a11y/useValidLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a valid value for the lang attribute.
  
  > 1 │ <html lang="en-GB-typo" />
      │            ^^^^^^^^^^^^
    2 │ 
  
  ℹ Some of valid scripts:
  
  - Arab
  - Armn
  - Beng
  - Cyrl
  - Deva
  - Ethi
  - Grek
  - Gujr
  - Guru
  - Hang
  - Hani
  - Hans
  - Hant
  - Hebr
  - Hira

Valid

1
<html lang="en-GB" />