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

Описание

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

Пример использования:

<!-- Боковая панель на русском --> <aside lang="ru"> <h3>Дополнительная информация</h3> <p>Этот контент предназначен для русскоязычных пользователей.</p> </aside> <!-- Боковая панель на английском --> <aside lang="en"> <h3>Additional Information</h3> <p>This content is in English for international visitors.</p> </aside>

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

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

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

  • Влияет на выбор шрифтов и отображение текста
  • Используется скринридерами для правильного произношения
  • Учитывается поисковыми системами при индексации
  • Может переопределять язык, указанный для всего документа

Правильное применение:

<!-- Основной язык документа --> <html lang="ru"> <body> <!-- Боковая панель на другом языке --> <aside lang="en"> <h3>English Content</h3> <p>This section contains specific English-language information.</p> </aside> <!-- Многоязычная панель --> <aside> <div lang="ru"> <h3>Русский контент</h3> <p>Информация на русском языке.</p> </div> <div lang="en"> <h3>English Content</h3> <p>Information in English.</p> </div> </aside> </body> </html>

Рекомендации:

  • Всегда указывайте основной язык в теге <html>
  • Используйте lang для фрагментов на других языках
  • Для смешанного контента применяйте lang к внутренним элементам
  • Проверяйте коды языков в IETF BCP 47

Техническое воздействие:

Область Влияние
Доступность Скринридеры выбирают правильный голос и произношение
SEO Поисковики учитывают язык при ранжировании
Шрифты Некоторые шрифты автоматически выбирают глифы
CSS Можно стилизовать элементы по языку

Пример стилизации по языку:

<style> /* Разные шрифты для разных языков */ aside[lang="ja"] { font-family: "MS Gothic", "Hiragino Kaku Gothic Pro"; } aside[lang="ar"] { font-family: "Traditional Arabic"; direction: rtl; } /* Разные кавычки */ :lang(ru) q { quotes: "«" "»"; } :lang(en) q { quotes: '"' '"'; } </style> <aside lang="ru"> <p>Цитата: <q>Пример русских кавычек</q></p> </aside> <aside lang="en"> <p>Quote: <q>English quotes example</q></p> </aside>

Совет: Для многоязычных сайтов используйте комбинацию lang с атрибутом translate для лучшего контроля над автоматическим переводом.

Лучшие практики:

  • Используйте действительные коды языков из IETF BCP 47
  • Избегайте устаревших кодов (например, "iw" вместо "he" для иврита)
  • Для региональных вариантов указывайте и язык и регион (ru-RU, en-US)
  • Тестируйте с реальными скринридерами

Примечание: Хотя современные браузеры могут автоматически определять язык текста, явное указание через атрибут lang обеспечивает точность и предсказуемость отображения.