Атрибут lang тега <dl>
Описание
Атрибут lang определяет язык содержимого элемента <dl> (списка определений) и его дочерних элементов. Это важно для правильного отображения текста, синтеза речи и автоматического перевода.
<dl lang="ru">
<dt>HTML</dt>
<dd>Язык гипертекстовой разметки</dd>
</dl>
<dl lang="en">
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Форматы значений:
| Формат | Пример | Описание |
|---|---|---|
| Двухбуквенный код | lang="ru" |
ISO 639-1 (русский язык) |
| Код с регионом | lang="en-US" |
Английский (США) |
| Код сценария | lang="zh-Hant" |
Китайский традиционный |
Практическое применение:
<dl lang="en">
<dt>API</dt>
<dd>Application Programming Interface</dd>
<dt lang="la">Lorem ipsum</dt>
<dd lang="en">Placeholder text commonly used in design</dd>
</dl>
Влияние на различные системы:
- Браузеры: Выбор правильного шрифта, кавычек, направления текста
- Скринридеры: Правильное произношение текста
- Поисковые системы: Определение языка контента для индексации
- Сервисы перевода: Автоматическое определение языка
Пример с CSS:
<style>
dl[lang="en"] {
font-family: "Times New Roman", serif;
}
dl[lang="ru"] {
font-family: "Helvetica Neue", sans-serif;
}
dl[lang="zh"] {
font-family: "SimSun", serif;
}
</style>
<dl lang="en">
<dt>Web</dt>
<dd>World Wide Web</dd>
</dl>
Рекомендации по использованию:
- Всегда указывайте основной язык документа в теге
<html> - Используйте
langдля фрагментов на другом языке - Для сложных случаев используйте BCP 47 теги
- Проверяйте правильность кодов языка
- Сочетайте с атрибутом
dirдля RTL-языков
Пример с JavaScript:
<dl id="multilang-glossary">
<dt>Computer</dt>
<dd>Electronic device</dd>
</dl>
<button onclick="changeLanguage('ru')">Русский</button>
<button onclick="changeLanguage('en')">English</button>
<script>
const translations = {
en: {
Computer: "Electronic device",
Network: "Group of interconnected devices"
},
ru: {
Computer: "Электронное устройство",
Network: "Группа соединенных устройств"
}
};
function changeLanguage(lang) {
const dl = document.getElementById('multilang-glossary');
dl.lang = lang;
// Здесь должна быть логика замены текста
}
</script>
Особенности наследования:
| Сценарий | Поведение |
|---|---|
| Явное указание | Переопределяет унаследованное значение |
| Без указания | Наследует значение от родительского элемента |
| Пустое значение | Сбрасывает наследование (не рекомендуется) |
Примечание: Правильное использование атрибута lang особенно важно для многоязычных сайтов и приложений. Он не только помогает браузерам и вспомогательным технологиям, но и улучшает SEO и пользовательский опыт.