Атрибут lang тега <body>

Описание

Атрибут lang определяет основной язык содержимого веб-страницы. Это важный атрибут для:

  • Доступности (скринридеры используют его для правильного произношения)
  • SEO (поисковые системы учитывают язык контента)
  • Автоматического перевода
  • Типографики (правильные кавычки, переносы слов)
Пример использования:
<body lang="ru"> <!-- Русскоязычный контент --> <h1>Добро пожаловать на наш сайт</h1> </body>

Формат значения:

Тип Пример Описание
Основной язык lang="ru" Русский язык
Язык с регионом lang="pt-BR" Бразильский вариант португальского
Множественные языки lang="zh-Hans-CN" Упрощённый китайский для Китая

Рекомендации по использованию:

  • Всегда указывайте атрибут lang для всего документа
  • Используйте правильные коды языков из IANA Language Subtag Registry
  • Для многоязычных страниц переопределяйте lang для отдельных блоков
  • Сочетайте с dir для языков с RTL-направлением (арабский, иврит)
  • Проверяйте с помощью валидаторов

Пример многоязычной страницы:

<body lang="en"> <article lang="en"> <h1>Welcome</h1> <p>English content here</p> </article> <article lang="es"> <h1>Bienvenidos</h1> <p>Contenido en español aquí</p> </article> </body>

Как lang влияет на страницу:

Аспект Влияние
Скринридеры Выбор голоса и произношения
Поисковые системы Определение языка контента
Браузеры Автоматический перевод, проверка орфографии
CSS Языкозависимые стили через :lang()

Практические примеры:

1. CSS для разных языков
/* Разные кавычки для разных языков */ :lang(en) q { quotes: '"' '"' "'" "'"; } :lang(ru) q { quotes: "«" "»" "'" "'"; } :lang(fr) q { quotes: "«" "»" "‹" "›"; }
2. JavaScript-определение языка
// Получение языка страницы const pageLanguage = document.documentElement.lang || 'en'; // Языкозависимая логика if (pageLanguage === 'ar') { document.body.dir = 'rtl'; }

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

  • Использование неправильных кодов (например, "ru-RU" вместо "ru")
  • Несоответствие языка контенту
  • Отсутствие lang в многоязычных приложениях
  • Путаница между html и body lang (лучше указывать на html)
  • Использование устаревших кодов ("iw" вместо "he" для иврита)

Современные практики:

  • Указывайте lang на элементе <html>, а не <body>
  • Для SPA-приложений обновляйте lang при смене языка
  • Используйте hreflang для многоязычных версий
  • Сочетайте с мета-тегом Content-Language
  • Тестируйте с различными скринридерами
Лучшая практика: Хотя технически можно указывать lang на body, рекомендуется задавать основной язык документа на элементе <html>, а на body использовать только для переопределения языка отдельных секций.

Примечание: Правильное указание языка документа - важный аспект веб-разработки, влияющий на доступность, SEO и пользовательский опыт. Всегда проверяйте актуальные коды языков и учитывайте особенности их отображения.