Исполняемые доки HTML: Атрибут lang

Q: Что писать в атрибуте lang у html?

Код языка по стандарту BCP 47: en для английского, ru для русского, es для испанского, ja для японского. Регион добавляйте, только когда он важен, как в en-US, en-GB или pt-BR.

Q: Как отметить текст на другом языке?

Добавьте lang элементу вокруг него: bon appétit . Программы чтения с экрана переключают произношение для этой фразы, а CSS может оформить ее через :lang(fr).

Q: Чем lang отличается от hreflang?

lang говорит, на каком языке содержимое элемента. hreflang ставится у ссылки и говорит, на каком языке страница, на которую она ведет, и так сайты указывают поисковикам версии страницы на других языках.

Язык страницы

Поставьте атрибут lang элементу <html> с кодом языка, на котором написана страница:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lang</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>Hello! This page is in English.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    document.getElementById('out').textContent =
      'Page language: ' + document.documentElement.lang +
      '. Your browser language: ' + navigator.language + '.';
  </script>
</body>
</html>

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

Коды языков

Значение это языковой тег по стандарту BCP 47. Чаще всего это двухбуквенный код языка, за которым может идти регион или письменность:

Код	Язык
`en`	Английский
`en-US`, `en-GB`	Английский в США, в Великобритании
`es`, `es-MX`	Испанский, испанский в Мексике
`pt-BR`	Португальский в Бразилии
`fr`, `de`, `it`	Французский, немецкий, итальянский
`ar`, `he`	Арабский, иврит (справа налево, см. ниже)
`ja`, `ko`	Японский, корейский
`zh-Hans`, `zh-Hant`	Китайский в упрощенных, традиционных иероглифах

Коды не зависят от регистра, но принято писать язык строчными, а регион заглавными. Добавляйте регион, только когда вариант языка важен; en это полное и правильное значение.

Что lang меняет визуально

Большинство эффектов lang предназначены для программ, но некоторые видны на экране. Кавычки элемента <q> зависят от языка, как и правила смены регистра:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Visible effects</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; font-size: 18px; }
    td { padding: 4px 12px; border-bottom: 1px solid #e5e7eb; }
    .up { text-transform: uppercase; }
  </style>
</head>
<body>
  <table>
    <tr><td>English</td><td lang="en"><q>quote</q></td><td lang="en" class="up">istanbul</td></tr>
    <tr><td>French</td><td lang="fr"><q>quote</q></td><td lang="fr" class="up">istanbul</td></tr>
    <tr><td>German</td><td lang="de"><q>quote</q></td><td lang="de" class="up">istanbul</td></tr>
    <tr><td>Japanese</td><td lang="ja"><q>quote</q></td><td lang="ja" class="up">istanbul</td></tr>
    <tr><td>Turkish</td><td lang="tr"><q>quote</q></td><td lang="tr" class="up">istanbul</td></tr>
  </table>
</body>
</html>

В каждой строке свой стиль кавычек. В последнем столбце одно и то же text-transform: uppercase дает «ISTANBUL» в английском и «İSTANBUL» в турецком, потому что в турецком у заглавной i сохраняется точка. Замените lang у турецкой строки на en, и точка исчезнет. Автоматическая расстановка переносов (hyphens: auto в CSS) тоже зависит от lang: браузеру нужно знать язык, чтобы понимать, где можно переносить слова.

Фразы на другом языке

lang работает у любого элемента, а не только у <html>. Когда страница на одном языке цитирует фразу на другом, оберните фразу и дайте ей собственный код. CSS может выбирать языки селектором :lang():

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mixed languages</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    :lang(fr), :lang(es) { font-style: italic; color: #2563eb; }
  </style>
</head>
<body>
  <p>The chef said <span lang="fr">bon appétit</span> and left.</p>
  <p>Our team motto is <span lang="es">poco a poco</span>: little by little.</p>
</body>
</html>

Программа чтения с экрана переключается на французское произношение для «bon appétit» и обратно на английское после нее. :lang(fr) также совпадает с fr-CA и любым другим вариантом французского и совпадает с элементами, которые наследуют язык от предка, чего не сделал бы селектор атрибута вроде [lang="fr"].

Языки с письмом справа налево: dir

Арабский, иврит, персидский и урду пишутся справа налево. lang называет язык; атрибут dir задает направление. Целая страница на арабском использует оба атрибута у <html>:

<html lang="ar" dir="rtl">

Для короткой фразы справа налево внутри страницы с письмом слева направо поставьте оба атрибута элементу вокруг нее:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dir</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    blockquote { border-inline-start: 4px solid #16a34a; margin: 12px 0; padding-inline-start: 12px; }
  </style>
</head>
<body>
  <p>The Arabic word for hello is <span lang="ar" dir="rtl">مرحبا</span>.</p>
  <blockquote lang="ar" dir="rtl">مرحبا بكم في الموقع</blockquote>
</body>
</html>

Blockquote выравнивается по правому краю, и его зеленая полоса тоже переходит вправо, потому что border-inline-start следует направлению. Логические свойства вроде margin-inline-start вместо margin-left сохраняют правильную раскладку в обоих направлениях.

lang и hreflang

lang описывает содержимое элемента. hreflang ставится у ссылки и описывает страницу, на которую она ведет. Сайты с переводами перечисляют все версии в <head>, чтобы поисковики отправляли каждого читателя на нужную:

<link rel="alternate" hreflang="en" href="https://example.com/">
<link rel="alternate" hreflang="de" href="https://example.com/de/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

Каждая переведенная страница все равно задает собственный lang у <html>: lang="de" у немецкой.

Частые ошибки

Нет lang. Многие шаблоны его забывают; задавайте его рядом с doctype на каждой странице.
lang="en", скопированный в переводы. Немецкая страница, помеченная как английская, читается с английским произношением. Код должен соответствовать содержимому.
Код страны вместо кода языка. lang="jp" и lang="gr" это не японский и греческий; их коды ja и el.
lang для задания направления. Один lang="ar" не заставляет текст идти справа налево. Добавьте dir="rtl".
lang="en_US". Разделитель это дефис: en-US.

Часто задаваемые вопросы

Что делает атрибут lang в HTML?

Он объявляет язык содержимого элемента. Программы чтения с экрана используют его, чтобы выбрать правильный голос и произношение, браузеры предлагают по нему перевод, выбирают кавычки и расставляют переносы, а некоторые программы проверки орфографии выбирают по нему словарь.

Что писать в атрибуте lang у html?

Код языка по стандарту BCP 47: en для английского, ru для русского, es для испанского, ja для японского. Регион добавляйте, только когда он важен, как в en-US, en-GB или pt-BR.

Что использовать: lang="en" или lang="en-US"?

Оба варианта корректны. Для большинства английских страниц достаточно en. Используйте en-US или en-GB, когда важен региональный вариант, например для орфографии, дат или произношения некоторых слов.

Влияет ли атрибут lang на SEO?

Google заявлял, что определяет язык по самому тексту и не полагается на атрибут lang. Все равно задавайте его правильно: его используют другие поисковики, переводчики и программы чтения с экрана. Чтобы связать переведенные версии страницы, используйте ссылки hreflang.

Как отметить текст на другом языке?

Добавьте lang элементу вокруг него: <span lang="fr">bon appétit</span>. Программы чтения с экрана переключают произношение для этой фразы, а CSS может оформить ее через :lang(fr).

Чем lang отличается от hreflang?

lang говорит, на каком языке содержимое элемента. hreflang ставится у ссылки и говорит, на каком языке страница, на которую она ведет, и так сайты указывают поисковикам версии страницы на других языках.

Связанные концепции