Атрибут lang тега <h2>
Описание
Атрибут lang указывает язык содержимого внутри тегов <h1>-<h6>. Это помогает браузерам, поисковым системам и скрин-ридерам правильно интерпретировать текст.
<h1 lang="en">Welcome to our website</h1>
<h2 lang="fr">Bienvenue sur notre site</h2>
<h3 lang="de">Willkommen auf unserer Website</h3>
Особенности работы:
| Значение | Описание | Пример |
|---|---|---|
| Двухбуквенный код | Основные языки (ISO 639-1) | lang="en" (английский) |
| Код с регионом | Язык + регион (ISO 3166-1) | lang="en-US" (американский английский) |
| Неизвестный язык | Специальное значение | lang="zxx" (нет лингвистического содержания) |
Динамическое изменение языка:
<h1 id="lang-heading" lang="en">Hello World</h1>
<button onclick="changeLanguage('es')">Spanish</button>
<button onclick="changeLanguage('ja')">Japanese</button>
<script>
function changeLanguage(lang) {
const heading = document.getElementById('lang-heading');
heading.lang = lang;
heading.textContent =
lang === 'es' ? 'Hola Mundo' :
lang === 'ja' ? 'こんにちは世界' : 'Hello World';
}
</script>
Рекомендации по использованию:
- Всегда указывайте основной язык страницы в теге
<html> - Используйте атрибут
langдля фрагментов на других языках - Для SEO указывайте правильные языковые коды
- Помогает скрин-ридерам правильно произносить текст
Пример с CSS для разных языков:
<style>
/* Разные шрифты для разных языков */
:lang(zh) { font-family: "SimSun", serif; }
:lang(ar) { font-family: "Traditional Arabic", serif; direction: rtl; }
:lang(ru) { font-family: "Times New Roman", serif; }
</style>
<h1 lang="zh">你好世界</h1>
<h2 lang="ar">مرحبا بالعالم</h2>
<h3 lang="ru">Привет мир</h3>
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Важно для доступности (WCAG)
- Влияет на алгоритмы поисковых систем
- Некоторые браузеры могут автоматически предлагать перевод
Примечание: Правильное использование атрибута lang особенно важно для многоязычных сайтов. Для проверки используйте валидаторы W3C и инструменты доступности.