Атрибут lang тега <dir>
Описание
Атрибут lang определяет язык содержимого элемента <dir>, но важно отметить, что сам тег <dir> является устаревшим в HTML5. В современных реализациях следует использовать <ul> или <ol> с атрибутом lang.
Важно: Элемент <dir> устарел в HTML5. Для указания языка списков используйте <ul> или <ol> с атрибутом lang.
Историческое использование (не рекомендуется):
<!-- Устаревший подход -->
<dir lang="en">
<li>File 1</li>
<li>File 2</li>
</dir>
Современная альтернатива:
<ul lang="en">
<li>Document.pdf</li>
<li>Image.jpg</li>
</ul>
<ol lang="ru">
<li>Документ 1</li>
<li>Документ 2</li>
</ol>
Форматы языковых тегов:
| Пример | Язык/регион | Стандарт |
|---|---|---|
lang="en" |
Английский | ISO 639-1 |
lang="es-AR" |
Испанский (Аргентина) | BCP 47 |
lang="zh-Hans" |
Китайский (упрощенный) | BCP 47 |
Использование с CSS:
<style>
/* Стили для разных языков */
[lang="en"] {
font-family: "Helvetica", sans-serif;
}
[lang="ja"] {
font-family: "MS Gothic", monospace;
}
[lang="ar"] {
direction: rtl;
text-align: right;
}
</style>
<ul lang="ar">
<li>ملف 1</li>
<li>ملف 2</li>
</ul>
Динамическое изменение языка:
<ul id="langList">
<li>Item</li>
<li>Element</li>
</ul>
<button onclick="changeLang('ru')">Русский</button>
<button onclick="changeLang('en')">English</button>
<script>
const translations = {
ru: ["Элемент 1", "Элемент 2"],
en: ["Item 1", "Item 2"]
};
function changeLang(lang) {
const list = document.getElementById('langList');
list.lang = lang;
const items = list.querySelectorAll('li');
items.forEach((item, i) => {
item.textContent = translations[lang][i];
});
}
</script>
Рекомендации по использованию:
- Всегда указывайте язык основного контента страницы
- Для многоязычных списков используйте динамическое изменение
- Сочетайте с атрибутом
dirдля RTL-языков - Для смешанного контента используйте вложенные элементы с разными
lang - Проверяйте работу со скринридерами
Примечание: Для профессиональных многоязычных приложений рассмотрите использование систем интернационализации (i18n), таких как i18next или formatjs, которые предоставляют более мощные инструменты управления переводами.