Атрибут lang
Назначение
Атрибут lang указывает язык содержимого элемента. Значение — код языка по стандарту BCP 47 (на основе ISO 639-1 и ISO 3166-1). Атрибут можно применять к любому HTML-элементу, а также задавать на корневом <html> для объявления языка всей страницы.
Что даёт
- Скринридеры используют
langдля выбора правильного произношения и голоса. Без указания языка программа чтения с экрана может читать английский текст русским голосом — результат непонятен. - Поисковые системы учитывают
langпри определении языковой принадлежности страницы и выборе релевантных результатов для пользователя. - Браузеры используют
langдля подбора шрифтов, переноса слов (свойствоhyphens), оформления кавычек (CSS-свойствоquotes) и активации проверки орфографии. - Переводчики (встроенные в браузер) опираются на
langпри определении исходного языка.
Синтаксис
Базовый код языка состоит из двухбуквенного кода по ISO 639-1:
<html lang="ru">
Расширенный формат может включать подкод страны (ISO 3166-1) и другие подкоды через дефис:
<html lang="en-US"> <!-- английский, американский вариант --> <html lang="en-GB"> <!-- английский, британский вариант --> <html lang="pt-BR"> <!-- португальский, бразильский вариант --> <html lang="zh-Hans"> <!-- китайский, упрощённые иероглифы --> <html lang="zh-Hant"> <!-- китайский, традиционные иероглифы -->
Примеры
Объявление языка всей страницы:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Пример страницы</title> </head> <body> <p>Текст на русском языке.</p> </body> </html>
Переключение языка для отдельного фрагмента:
<p>Статья была опубликована в журнале <cite lang="en">Nature</cite> в 2023 году.</p>
Слово «Nature» будет прочитано скринридером английским голосом, а не как «натюре».
Разные языки в одной странице:
<article lang="ru"> <h1>Новости</h1> <section lang="en"> <h2>Breaking News</h2> <p>Content in English.</p> </section> </article>
Коды без подкода страны
Когда достаточно указать только язык без региональной принадлежности, используют двухбуквенный код:
<html lang="fr"> <!-- французский --> <html lang="de"> <!-- немецкий --> <html lang="es"> <!-- испанский --> <html lang="ja"> <!-- японский --> <html lang="ar"> <!-- арабский --> <html lang="hi"> <!-- хинди -->
Распространённые ошибки
- Использование
lang="ru-RU"без необходимости. Если региональные отличия не важны,lang="ru"достаточно. Код страны добавляют, когда языковые или орфографические различия между регионами существенны (британский и американский английский). - Указание
langтолько на<html>при наличии значительных фрагментов на другом языке. Вложенные элементы с чужим языком нужно размечать отдельно. - Устаревший формат
lang="ru_RU"с подчёркиванием. По стандарту BCP 47 разделитель — дефис:ru-RU.
Атрибут dir
Назначение
Атрибут dir задаёт направление текста. Применяется к любому элементу. Два значения:
ltr— слева направо (англичй, русский, французский, немецкий).rtl— справа налево (арабский, иврит, фарси, урду).
Что даёт
- Определяет визуальное направление текста и порядок размещения строчных элементов.
- Задаёт направление потока для блочных элементов: выравнивание по умолчанию, порядок колонок в таблицах, позиционирование списков.
- Влияет на начальное значение CSS-свойства
directionиtext-align. - Влияет на расположение полос прокрутки в некоторых браузерах (при
dir="rtl"полоса может отображаться слева).
Синтаксис и примеры
Страница на арабском языке:
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="utf-8"> <title>صفحة تجريبية</title> </head> <body> <p>هذا نص باللغة العربية.</p> </body> </html>
Вставка фрагмента с направлением, отличным от основного:
<html lang="ar" dir="rtl"> <body> <p>الجملة بالعربية <span dir="ltr">with an English insert</span> ومتابعة بالعربية.</p> </body> </html>
Английский фрагмент будет отображаться слева направо внутри rtl-контекста.
Страница со смешанным контентом, где преобладает язык с направлением ltr:
<html lang="ru" dir="ltr"> <body> <article lang="ar" dir="rtl"> <h2>العنوان بالعربية</h2> <p>نص عربي يُقرأ من اليمين إلى اليسار.</p> </article> <p>Этот текст — на русском, слева направо.</p> </body> </html>
Разница между dir и CSS direction
CSS-свойство direction меняет визуальное направление, но не передаёт семантическую информацию браузеру и вспомогательным технологиям. Атрибут dir делает и то, и другое. Правильный подход — задавать dir в разметке, а CSS использовать для переопределения визуальных аспектов при необходимости.
Автоопределение направления
Для текста, в котором смешаны языки с разным направлением, можно использовать Unicode Bidirectional Algorithm (Bidi). Атрибут dir="auto" включает автоматическое определение направления на основе первого сильного символа (буквы) содержимого:
<textarea dir="auto" placeholder="اكتب هنا"></textarea>
Полезно для пользовательского ввода, когда язык заранее неизвестен (формы комментариев, чаты).
Атрибут hreflang
Назначение
Атрибут hreflang указывает язык и (опционально) регион целевого документа, на который ведёт ссылка. Применяется к элементам <link> и <a>. Значение — код языка по BCP 47, как и у lang.
Что даёт
- Поисковые системы используют
hreflangдля выбора правильной языковой или региональной версии страницы в результатах поиска. Если пользователь из Германии ищет на немецком, Google покажет немецкую версию страницы, а не английскую. - В элементе
<link rel="alternate">формирует карту языковых версий страницы, помогая поисковику понять, что это не дубликаты, а локализованные варианты. - В элементе
<a>даёт браузеру и вспомогательным технологиям информацию о языке целевого документа до перехода.
Синтаксис на уровне <link>
Для страницы доступны несколько языковых версий. Каждая версия указывает на все остальные, включая себя:
<head> <!-- Русская версия (текущая страница) --> <link rel="alternate" hreflang="ru" href="https://example.com/ru/page"> <!-- Английская версия --> <link rel="alternate" hreflang="en" href="https://example.com/en/page"> <!-- Немецкая версия --> <link rel="alternate" hreflang="de" href="https://example.com/de/page"> <!-- Французская версия --> <link rel="alternate" hreflang="fr" href="https://example.com/fr/page"> <!-- Версия по умолчанию для пользователей без соответствующей локали --> <link rel="alternate" hreflang="x-default" href="https://example.com/en/page"> </head>
Значение x-default — зарезервированное, указывает страницу по умолчанию для пользователей, чьему языку не соответствует ни одна из перечисленных версий.
Синтаксис на уровне <a>
<nav> <ul> <li><a href="/ru/page" hreflang="ru">Русский</a></li> <li><a href="/en/page" hreflang="en">English</a></li> <li><a href="/de/page" hreflang="de">Deutsch</a></li> </ul> </nav>
Региональные варианты
<link rel="alternate" hreflang="en-US" href="https://example.com/us/page"> <link rel="alternate" hreflang="en-GB" href="https://example.com/uk/page"> <link rel="alternate" hreflang="en-AU" href="https://example.com/au/page"> <link rel="alternate" hreflang="x-default" href="https://example.com/us/page">
Поисковик покажет американскую версию пользователям из США, британскую — из Великобритании, австралийскую — из Австралии, остальным — x-default.
Правила корректного применения
- Двусторонность. Каждая языковая версия должна содержать
hreflang-ссылки на все остальные версии, включая обратную ссылку на себя. Если немецкая страница ссылается на русскую, а русская не ссылается на немецкую, поисковик может проигнорировать аннотацию. x-defaultобязателен. Без страницы по умолчанию поведение поисковика для неперечисленных языков непредсказуемо.- Канонический URL. Если страница имеет
hreflang-аннотации, она также должна содержать<link rel="canonical">, указывающий на собственный канонический URL, а не на одну из локализованных версий. - Полный URL. В
hrefследует указывать абсолютный URL (https://example.com/ru/page), а не относительный (/ru/page). Относительные URL поддерживаются спецификацией, но абсолютные надёжнее. - Совпадение с
lang. Язык, указанный вhreflangцелевой страницы, должен совпадать с языком, объявленным в атрибутеlangна<html>этой страницы. Несовпадение — частая ошибка, ведущая к неверному определению языка.
Распространённые ошибки
- Указание
hreflangбезx-default. - Односторонние ссылки: русская страница ссылается на английскую, но английская — не на русскую.
- Несовпадение кода в
hreflangиlangцелевой страницы:hreflang="ru"ведёт на страницу сlang="en". - Использование
hreflangдля страниц с одинаковым содержанием, но разными URL-параметрами (например,?session=123).hreflangпредназначен для языковых и региональных вариантов, а не для дубликатов.
Сводная таблица
| Атрибут | Элементы | Формат значения | Для чего |
|---|---|---|---|
lang |
Любой | BCP 47 (ru, en, zh-Hans) |
Язык содержимого |
dir |
Любой | ltr, rtl, auto |
Направление текста |
hreflang |
<link>, <a> |
BCP 47 (ru, en-US, x-default) |
Язык целевого документа |
Итог
lang объявляет язык содержимого страницы или её части. dir задаёт направление чтения. hreflang указывает язык документа, на который ведёт ссылка, и помогает поисковикам выбирать правильную локализацию. Все три атрибута принимают коды языков по стандарту BCP 47, но решают разные задачи: lang и dir работают с текущей страницей, hreflang — с целевой.
Загрузка...