Skip to main content

a11y/useHtmlLang

This rule make sure that the html tag has the lang attribute.

This rule is applied to HTML and JSX files.

ESLint Equivalent: html-has-lang

Examples

Invalid

<html></html>

 file.tsx:1 lint/a11y/useHtmlLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a lang attribute when using the html element.

    <html></html>
    ^^^^^^^^^^^^^

  Setting a lang attribute on HTML elements configures the language
    used by screen readers when no user default is specified.


<html {...props}></html>

 file.tsx:1 lint/a11y/useHtmlLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a lang attribute when using the html element.

    <html {...props}></html>
    ^^^^^^^^^^^^^^^^^^^^^^^^

  Setting a lang attribute on HTML elements configures the language
    used by screen readers when no user default is specified.


<html lang=

 file.tsx:1:11 parse(js) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  JSX attribute value should be either an expression or a quoted JSX
    text

    <html lang=
               ^


></html>

 file.tsx:1 parse(js) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Unknown start to an statement expression

    ></html>
    ^


<html lang={""}></html>

 file.tsx:1 lint/a11y/useHtmlLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a lang attribute when using the html element.

    <html lang={""}></html>
    ^^^^^^^^^^^^^^^^^^^^^^^

  Setting a lang attribute on HTML elements configures the language
    used by screen readers when no user default is specified.


<html lang={``}></html>

 file.tsx:1 lint/a11y/useHtmlLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a lang attribute when using the html element.

    <html lang={``}></html>
    ^^^^^^^^^^^^^^^^^^^^^^^

  Setting a lang attribute on HTML elements configures the language
    used by screen readers when no user default is specified.


<html lang={undefined}></html>

 file.tsx:1 lint/a11y/useHtmlLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a lang attribute when using the html element.

    <html lang={undefined}></html>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting a lang attribute on HTML elements configures the language
    used by screen readers when no user default is specified.


<html lang={false}></html>

 file.tsx:1 lint/a11y/useHtmlLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a lang attribute when using the html element.

    <html lang={false}></html>
    ^^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting a lang attribute on HTML elements configures the language
    used by screen readers when no user default is specified.


<html lang={true}></html>

 file.tsx:1 lint/a11y/useHtmlLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a lang attribute when using the html element.

    <html lang={true}></html>
    ^^^^^^^^^^^^^^^^^^^^^^^^^

  Setting a lang attribute on HTML elements configures the language
    used by screen readers when no user default is specified.


<html lang={42}></html>

 file.tsx:1 lint/a11y/useHtmlLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a lang attribute when using the html element.

    <html lang={42}></html>
    ^^^^^^^^^^^^^^^^^^^^^^^

  Setting a lang attribute on HTML elements configures the language
    used by screen readers when no user default is specified.

<html></html>

 file.html:1 lint/a11y/useHtmlLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a lang attribute when using the html element.

    <html></html>
    ^^^^^^^^^^^^

  Setting a lang attribute on HTML elements configures the language
    used by screen readers when no user default is specified.


<html lang="
"></html>

 file.html:1 lint/a11y/useHtmlLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide a lang attribute when using the html element.

  > 1<html lang="
     ^^^^^^^^^^^^
  > 2"></html>
     ^^^^^^^^

  Setting a lang attribute on HTML elements configures the language
    used by screen readers when no user default is specified.

Valid

<html lang="en"></html>
<html lang={language}></html>
<html lang={() => language}></html>
<Html lang={42}></Html>
<html lang="42"></html>
<html lang="en"></html>