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

Описание

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

  • Браузерам правильно отображать текст
  • Скринридерам корректно произносить слова
  • Поисковым системам определять языковую принадлежность контента
Пример использования:
<main lang="ru"> <h1>Заголовок на русском языке</h1> <p>Основное содержимое страницы...</p> </main> <main lang="en"> <h1>English content header</h1> <p>Main page content in English...</p> </main>

Форматы языковых тегов:

Тип Формат Пример
Основной язык ISO 639-1 (2 буквы) lang="ru"
Язык с регионом язык-регион lang="pt-BR" (бразильский португальский)
Скрипт язык-скрипт lang="zh-Hans" (китайский упрощенный)

Особенности работы:

  • Лучше всего работает в сочетании с атрибутом dir для RTL-языков
  • Влияет на автоматическое определение языка проверки орфографии
  • Может изменять отображение кавычек и типографики
  • Для многоязычных страниц можно использовать вложенные элементы с разными lang

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

  • Всегда указывайте основной язык в теге <html>
  • Используйте lang для фрагментов на других языках
  • Для региональных вариантов укажите код страны
  • Проверяйте правильность кодов языков
  • Сочетайте с атрибутом translate для управления автоматическим переводом

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

<main id="content" lang="ru"> <h1>Пример динамического языка</h1> <button onclick="changeLanguage()">Switch to English</button> </main> <script> function changeLanguage() { const content = document.getElementById('content'); if(content.lang === 'ru') { content.lang = 'en'; content.querySelector('h1').textContent = 'Dynamic language example'; content.querySelector('button').textContent = 'Переключить на русский'; } else { content.lang = 'ru'; content.querySelector('h1').textContent = 'Пример динамического языка'; content.querySelector('button').textContent = 'Switch to English'; } } </script>

Примечание: Правильное использование атрибута lang особенно важно для многоязычных сайтов и веб-приложений. Для сложных проектов рассмотрите возможность автоматического определения и установки языка через CMS или специализированные JavaScript-библиотеки.