`lang` глобальный атрибут HTML

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

lang глобальный атрибут помогает определить язык элемента: язык, на котором написаны нередактируемые элементы, или язык, на котором пользователь должен вводить текст в редактируемые элементы. Атрибут содержит одну языковую метку BCP 47.

Примечание: Если значению lang присвоена пустая строка, язык считается явно неизвестным. Поэтому рекомендуется всегда указывать подходящее значение этого атрибута.

Попробуйте

<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) ";
}

Если значением атрибута является пустая строка (lang=""), язык считается неизвестным; если языковая метка недействительна согласно BCP47, он считается недействительным.

Даже если задан атрибут lang, он может не учитываться, поскольку атрибут xml:lang имеет приоритет.

Для псевдокласса CSS :lang две недействительные языковые метки считаются разными, если различаются их названия. Поэтому, хотя :lang(es) соответствует и lang="es-ES", и lang="es-419", :lang(xyzzy) не будет соответствовать lang="xyzzy-Zorp!".

Вопросы доступности

Критерий успеха WCAG 3.1.1 требует, чтобы язык страницы был указан способом, позволяющим «определить его программно» (то есть с помощью атрибута lang).

Критерий успеха WCAG 3.1.2 требует указывать языки для страниц, содержащих части на разных языках. И здесь правильным механизмом является атрибут lang.

Основная цель этих требований — дать вспомогательным технологиям, например программам экранного доступа, возможность использовать правильное произношение.

Например, меню выбора языка на этом сайте (MDN) содержит атрибут lang для каждой записи:

<div class="dropdown-container language-menu">
  <button
    id="header-language-menu"
    type="button"
    class="dropdown-menu-label"
    aria-haspopup="true"
    aria-owns="language-menu"
    aria-label="Current language is English. Choose your preferred language.">
    English
    <span class="dropdown-arrow-down" aria-hidden="true">▼</span>
  </button>
  <ul
    id="language-menu"
    class="dropdown-menu-items right show"
    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"
        id="translations-add">
        Add a translation
      </a>
    </li>
  </ul>
</div>

Наследование

Если у элемента нет атрибута lang, он наследует значение lang, заданное для его родительского узла, который, в свою очередь, может унаследовать его от своего родителя, и так далее.

Спецификации

Спецификация
HTML> # attr-lang>

Совместимость с браузерами

	Настольные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`lang`	1	12	1	15	≤4	18	4	14	≤3.2	1.0	4.4	≤3.2

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/lang