HTML lang global attribute

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thelangglobal attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user. The attribute contains a singleBCP 47 language tag.

Note:The default value oflang is the empty string, which means that the language is unknown. Therefore, it is recommended to always specify an appropriate value for this attribute.

Try it

<p>This paragraph is English, but the language is not specifically defined.</p><p lang="en-GB">This paragraph is defined as British English.</p><p lang="fr">Ce paragraphe est défini en français.</p>

p::before {  padding-right: 5px;}[lang="en-GB"]::before {  content: "(In British English) ";}[lang="fr"]::before {  content: "(In French) ";}

If the attribute value is theempty string (lang=""), the language is set tounknown; if the language tag is not valid according to BCP47, it is set toinvalid.

Even if thelang attribute is set, it may not be taken into account, as thexml:lang attribute has priority.

For the CSS pseudo-class:lang, two invalid language names are different if their names are different. So while:lang(es) matches bothlang="es-ES" andlang="es-419",:lang(xyzzy) wouldnot matchlang="xyzzy-Zorp!".

Accessibility concerns

WCAG Success Criterion 3.1.1requires that a page language is specified in a way which may be 'programmatically determined' (i.e., via thelang attribute).

WCAG Success Criterion 3.1.2 requires that pages withparts in different languages have the languages of those parts specified too. Again, thelang attribute is the correct mechanism for this.

The purpose of these requirements is primarily to allow assistive technologies such as screen readers to invoke the correct pronunciation.

For example, the language menu on this site (MDN) includes alang attribute for each entry:

html

<div>  <button       type="button"       aria-haspopup="true"    aria-owns="language-menu"    aria-label="Current language is English. Choose your preferred language.">    English    <span aria-hidden="true">▼</span>  </button>  <ul          aria-expanded="true"    role="menu">    <li role="menuitem">      <a        href="/ca/docs/Web/HTML/Reference/Global_attributes/lang"        title="Catalan">        <bdi lang="ca">Català</bdi>      </a>    </li>    <li role="menuitem">      <a        href="/de/docs/Web/HTML/Reference/Global_attributes/lang"        title="German">        <bdi lang="de">Deutsch</bdi>      </a>    </li>    <li role="menuitem">      <a        href="/es/docs/Web/HTML/Reference/Global_attributes/lang"        title="Spanish">        <bdi lang="es">Español</bdi>      </a>    </li>    <li role="menuitem">      <a        href="/fr/docs/Web/HTML/Reference/Global_attributes/lang"        title="French">        <bdi lang="fr">Français</bdi>      </a>    </li>    <li role="menuitem">      <a        href="/ja/docs/Web/HTML/Reference/Global_attributes/lang"        title="Japanese">        <bdi lang="ja">日本語</bdi>      </a>    </li>    <li role="menuitem">      <a        href="/ko/docs/Web/HTML/Reference/Global_attributes/lang"        title="Korean">        <bdi lang="ko">한국어</bdi>      </a>    </li>    <li role="menuitem">      <a        href="/pt-BR/docs/Web/HTML/Reference/Global_attributes/lang"        title="Portuguese (Brazilian)">        <bdi lang="pt-BR">Português (do&nbsp;Brasil)</bdi>      </a>    </li>    <li role="menuitem">      <a        href="/ru/docs/Web/HTML/Reference/Global_attributes/lang"        title="Russian">        <bdi lang="ru">Русский</bdi>      </a>    </li>    <li role="menuitem">      <a        href="/uk/docs/Web/HTML/Reference/Global_attributes/lang"        title="Ukrainian">        <bdi lang="uk">Українська</bdi>      </a>    </li>    <li role="menuitem">      <a        href="/zh-CN/docs/Web/HTML/Reference/Global_attributes/lang"        title="Chinese (Simplified)">        <bdi lang="zh-Hans">中文 (简体)</bdi>      </a>    </li>    <li>      <a        href="/en-US/docs/Web/HTML/Reference/Global_attributes/lang"        rel="nofollow"       >        Add a translation      </a>    </li>  </ul></div>