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

Описание

Атрибут lang указывает язык содержимого внутри элемента <div>. Это помогает браузерам, поисковым системам и скринридерам правильно интерпретировать текст.

Пример использования:
<div lang="en"> This text is in English. </div> <div lang="fr"> Ce texte est en français. </div> <div lang="ru"> Этот текст на русском языке. </div>

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

Формат Пример Описание
Двухбуквенный код lang="en" ISO 639-1 (английский)
Код с регионом lang="en-US" Английский (США)
Код сценария lang="zh-Hant" Китайский традиционный

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

<div lang="en"> <h3>Welcome</h3> <p>This section contains information in English.</p> </div> <div lang="es"> <h3>Bienvenidos</h3> <p>Esta sección contiene información en español.</p> </div>

Использование с CSS:

<style> /* Разные шрифты для разных языков */ div[lang="zh"] { font-family: "Noto Sans CJK SC", sans-serif; } div[lang="ar"] { direction: rtl; font-family: "Traditional Arabic", serif; } </style> <div lang="zh">中文文本</div> <div lang="ar">النص العربي</div>

Важность для SEO:

  • Помогает поисковым системам правильно индексировать многоязычный контент
  • Улучшает пользовательский опыт при поиске на конкретном языке
  • Может влиять на ранжирование в локальных поисковых выдачах

Советы по использованию:

  • Всегда указывайте язык для всего документа в теге <html>
  • Используйте атрибут lang для фрагментов на другом языке
  • Для сложных случаев используйте BCP 47 теги (например, sr-Latn для сербского латиницей)
  • Проверяйте правильность кодов языка на IANA Language Subtag Registry

Пример с JavaScript:

<div id="content" lang="en"> Current language: English </div> <button onclick="changeLanguage('es')">Español</button> <button onclick="changeLanguage('fr')">Français</button> <button onclick="changeLanguage('de')">Deutsch</button> <script> function changeLanguage(lang) { const div = document.getElementById('content'); div.lang = lang; // Здесь может быть код для подгрузки переводов div.textContent = `Current language: ${lang}`; } </script>

Особенности работы:

  • Браузеры используют это значение для выбора шрифтов и проверки орфографии
  • Скринридеры меняют произношение в зависимости от языка
  • Поддерживается всеми современными браузерами
  • Не влияет на отображение, если не заданы соответствующие стили

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