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

Описание

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

Пример использования:
<header lang="en"> <h1>Welcome to our website</h1> <p>International content</p> </header> <header lang="ar" dir="rtl"> <h1>مرحبا بكم</h1> <p>محتوى باللغة العربية</p> </header>

Форматы значений:

Формат Пример Описание
Двухбуквенный код lang="fr" Французский язык (ISO 639-1)
Код с регионом lang="pt-BR" Бразильский португальский
Языковой подтег lang="zh-Hans" Китайский (упрощенный)

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

<header id="multiLangHeader" lang="en"> <h1>Language switcher</h1> </header> <button onclick="switchLang('es')">Español</button> <button onclick="switchLang('de')">Deutsch</button> <script> function switchLang(lang) { const header = document.getElementById('multiLangHeader'); header.lang = lang; header.querySelector('h1').textContent = lang === 'es' ? 'Bienvenido' : lang === 'de' ? 'Willkommen' : 'Welcome'; } </script>

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

  • Сочетайте с атрибутом dir для RTL-языков
  • Указывайте основной язык в теге <html>
  • Для многоязычных страниц помечайте языковые секции
  • Используйте правильные коды языков (ISO 639)
  • Помогает скринридерам с произношением

Пример с CSS для разных языков:

<style> :lang(ja) { font-family: "MS Gothic", sans-serif; } :lang(he) { font-family: "David", serif; direction: rtl; } :lang(fr) { font-style: italic; } </style> <header lang="ja"> <h1>ようこそ</h1> </header> <header lang="he" dir="rtl"> <h1>ברוך הבא</h1> </header>

SEO и доступность:

  • Влияет на определение языка поисковыми системами
  • Помогает браузерам предложить перевод
  • Важен для скринридеров (произношение)
  • Учитывается в инструментах доступности
  • Не заменяет hreflang для многоязычных сайтов

Примечание: Правильное использование атрибута lang особенно важно для многоязычных сайтов и контента на редких языках. Всегда проверяйте коды языков в официальных реестрах ISO и используйте уточнения для региональных вариантов (например, en-US vs en-GB).