Атрибут lang тега <article>
Описание
Атрибут lang определяет основной язык содержимого элемента <article>. Это важный атрибут для доступности, SEO и правильного отображения текста.
<article lang="ru">
<h2>Статья на русском языке</h2>
<p>Этот контент предназначен для русскоязычной аудитории.</p>
</article>
<article lang="en">
<h2>English version</h2>
<p>This content is in English for international readers.</p>
</article>
Формат значений:
| Тип | Пример | Описание |
|---|---|---|
| Основной язык | lang="ru" |
Двухбуквенный код языка по ISO 639-1 |
| Язык с регионом | lang="pt-BR" |
Язык + регион (Бразильский португальский) |
| Скрипт варианта | lang="zh-Hans" |
Упрощённый китайский |
Правильное использование для многоязычного контента:
<article lang="ru">
<h2>Многоязычная статья</h2>
<section lang="ru">
<h3>Русская секция</h3>
<p>Содержание на русском...</p>
</section>
<section lang="en">
<h3>English section</h3>
<p>English version content...</p>
</section>
</article>
Важность для различных технологий:
| Область | Значение |
|---|---|
| Доступность | Скринридеры используют lang для выбора правильного голоса и произношения |
| SEO | Поисковики учитывают язык при индексации и ранжировании |
| Веб-шрифты | Некоторые шрифты автоматически выбирают глифы в зависимости от языка |
| Стилизация | CSS может применять разные стили для разных языков |
Использование в CSS:
<style>
/* Разные шрифты для разных языков */
article[lang="ja"] {
font-family: "MS Gothic", "Hiragino Kaku Gothic Pro", sans-serif;
}
article[lang="ar"] {
font-family: "Traditional Arabic", sans-serif;
direction: rtl;
}
/* Разные кавычки */
:lang(ru) q { quotes: "«" "»"; }
:lang(en) q { quotes: '"' '"'; }
</style>
<article lang="ru">
<p>Цитата: <q>Пример русских кавычек</q></p>
</article>
<article lang="en">
<p>Quote: <q>English quotes example</q></p>
</article>
Важно: Всегда указывайте атрибут lang для всего документа в теге <html>, даже если используете его для отдельных статей.
Рекомендации:
- Используйте стандартные коды языков из IETF BCP 47
- Для многоязычных статей указывайте основной язык в <article>, а варианты в отдельных секциях
- Проверяйте правильность кодов языка (например, "zh-CN" для китайского в Китае)
- Не используйте устаревшие коды (например, "iw" вместо "he" для иврита)
Пример с микроданными:
<article lang="ru" itemscope itemtype="https://schema.org/Article">
<h2 itemprop="headline">Статья с метаданными</h2>
<div itemprop="articleBody">
<p>Содержание статьи...</p>
</div>
<meta itemprop="inLanguage" content="ru-RU"/>
</article>
Совет: Для многоязычных сайтов используйте hreflang в <link> вместе с атрибутом lang для правильной индексации поисковиками.
Ошибки и лучшие практики:
<!-- Плохо: неправильный код языка -->
<article lang="Russian">...</article>
<!-- Плохо: избыточный регион -->
<article lang="ru-RU-RU">...</article>
<!-- Хорошо: правильное использование -->
<article lang="ru">
<h2>Правильная статья</h2>
<p lang="en">Some English text inside Russian article</p>
</article>
Примечание: Хотя современные браузеры достаточно умны, чтобы определить язык автоматически, явное указание через атрибут lang обеспечивает точность и предсказуемость.