Атрибут lang и экранные дикторы
Указывайте язык страницы и элементов для правильного произношения
«Атрибут lang и экранные дикторы» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Что делает атрибут lang
Атрибут lang объявляет язык содержимого элемента с помощью языковой метки BCP-47. Программы чтения с экрана используют её для выбора правильного механизма произношения и голоса, а поисковые системы — для индексации по языку.
Установка на элементе html
Каждая страница должна объявлять основной язык в корневом элементе: <html lang="en"> для английского, <html lang="tr"> для турецкого, <html lang="ja"> для японского. Без этого программы чтения с экрана используют системный язык пользователя по умолчанию и часто неправильно произносят каждое слово.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>Метки BCP-47
Метки соответствуют формату BCP-47: код языка (en, tr, ja), при необходимости регион (en-US, en-GB, zh-Hant, zh-Hans) и, в редких случаях, письменность. Используйте наиболее точную метку, которая соответствует действительности; одного «en» достаточно, если региональные варианты написания не важны.
Изменения языка в середине страницы
Обозначьте раздел на другом языке его собственным атрибутом lang: <blockquote lang="fr">Bonjour</blockquote>. Программа чтения с экрана переключает голос для этого раздела и правильно произносит текст даже на многоязычных страницах.
<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>Выбор языка в CSS
CSS может выбирать язык с помощью :lang(en): blockquote:lang(fr)::before { content: "« "; }. Селектор находит ближайшего предка с атрибутом lang. Используйте его для типографских правил, зависящих от языка, например кавычек и пробелов.
Почему это важно для произношения
Слово «Live» в английском и французском языках произносится по-разному. Немецкое «Wir» произносится как «veer», а не как «wear». Программа чтения с экрана, настроенная на английский, неправильно произнесёт оба слова, если не указать, что окружающий раздел написан на немецком или французском.
hreflang для связанных языковых версий
Атрибут hreflang у ссылок (<a href="/fr/" hreflang="fr">Français</a>) сообщает поисковым системам и вспомогательным технологиям язык связанной страницы. Для полноценной международной поисковой оптимизации сочетайте его с тегами ссылок hreflang для всего сайта.
Определение языка пользователя
JavaScript может прочитать предпочитаемые пользователем языки из navigator.languages — это массив меток BCP-47 в порядке приоритета. Используйте его, чтобы выбрать локаль по умолчанию или предложить сменить язык, но всегда отдавайте предпочтение явному выбору пользователя, а не настройке браузера.
Определение на стороне сервера
Заголовок HTTP-запроса Accept-Language содержит языковые предпочтения пользователя из настроек браузера. Используйте его на сервере, чтобы отправить правильный локализованный HTML уже при первом запросе и показать пользователю его язык до выполнения JavaScript.
Несколько языков на одной странице
Статьи Википедии, приложения для изучения языков и словари регулярно сочетают разные языки. Отмечайте каждый фрагмент собственным атрибутом lang, даже если он очень короткий. Без lang для каждого раздела голос программы чтения с экрана и кавычки CSS возвращаются к настройкам языка страницы.
Распространённые ошибки
Отсутствие lang у <html> (очень распространённая ошибка), неправильный код языка (lang="english" вместо lang="en") или использование региональных кодов, когда достаточно указать только язык. Используйте валидатор W3C и аудит доступности Lighthouse, чтобы обнаруживать такие проблемы в процессе непрерывной интеграции.
Проверка знаний
Почему атрибут lang у особенно важен для пользователей программ чтения с экрана?
Итоги
Объявите язык страницы у <html> с помощью метки BCP-47 (en, tr, ja, zh-Hant). Обозначайте изменения языка в середине страницы атрибутами lang у элементов span и section, чтобы программы чтения с экрана переключали голоса. С помощью CSS :lang() можно применять типографские правила для конкретного языка. Всегда задавайте lang: это ничего не стоит, но значительно улучшает произношение в программах чтения с экрана, поисковую оптимизацию и выбор элементов в CSS.
Часто задаваемые вопросы
Урок «Атрибут lang и экранные дикторы» бесплатный?
Да — полный текст урока «Атрибут lang и экранные дикторы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Атрибут lang и экранные дикторы»?
Указывайте язык страницы и элементов для правильного произношения Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Атрибут lang и экранные дикторы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Атрибут lang и экранные дикторы
- dir=rtl для текста справа налево
- Элементы bdi и bdo
- charset и Unicode: обработка специальных символов