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

Описание

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

Пример использования:
<details lang="en"> <summary>English Content</summary> <p>This section contains information in English.</p> </details> <details lang="ru"> <summary>Контент на русском</summary> <p>Этот раздел содержит информацию на русском языке.</p> </details>

Основные языковые коды:

Код Язык Пример
en Английский lang="en"
ru Русский lang="ru"
es Испанский lang="es"
ar Арабский lang="ar" dir="rtl"

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

  • Влияет на выбор шрифтов и правила переноса слов
  • Определяет язык для проверки орфографии (если включена)
  • Используется скринридерами для правильного произношения
  • Наследуется дочерними элементами, если не переопределён
  • Рекомендуется сочетать с атрибутом dir для RTL-языков

Пример с CSS:

<style> /* Разные стили для разных языков */ details[lang="en"] { font-family: "Times New Roman", serif; } details[lang="ja"] { font-family: "MS Gothic", "Hiragino Kaku Gothic Pro", sans-serif; } </style> <details lang="en"> <summary>English Section</summary> <p>Content in English language</p> </details> <details lang="ja"> <summary>日本語セクション</summary> <p>日本語のコンテンツ</p> </details>

Динамическое изменение языка:

<details id="language-switcher"> <summary>Language Content</summary> <p>This content will change language</p> </details> <button onclick="switchToRussian()">Русский</button> <button onclick="switchToEnglish()">English</button> <script> function switchToRussian() { const details = document.getElementById('language-switcher'); details.lang = 'ru'; details.querySelector('summary').textContent = 'Контент на русском'; details.querySelector('p').textContent = 'Этот контент на русском языке'; } function switchToEnglish() { const details = document.getElementById('language-switcher'); details.lang = 'en'; details.querySelector('summary').textContent = 'English Content'; details.querySelector('p').textContent = 'This content in English'; } </script>

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

  • Указывайте язык для всех языковых фрагментов, отличающихся от основного языка страницы
  • Для китайского языка уточняйте письменность (zh-Hans или zh-Hant)
  • Сочетайте с атрибутом dir для RTL-языков (арабский, иврит)
  • Проверяйте правильность кодов языков (ISO 639-1)
  • Для форм внутри <details> указывайте язык явно

Примечание: Правильное использование атрибута lang улучшает доступность вашего сайта и помогает поисковым системам лучше понимать структуру многоязычного контента. Для динамических интерфейсов с переключением языка рассмотрите использование специализированных библиотек i18n.