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

Описание

Атрибут 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 и инструменты доступности.