Атрибут lang тега <code>
Описание
Атрибут lang определяет язык содержимого внутри тега <code>. Это особенно важно для:
- Корректной обработки текста браузерами
- Правильной работы инструментов проверки орфографии
- Автоматического перевода содержимого
- Доступности для скринридеров
<code lang="javascript">console.log("Hello");</code>
<code lang="python">print("Hello")</code>
<code lang="fr"># Commentaire en français</code>
Форматы значений:
| Тип | Формат | Пример |
|---|---|---|
| Язык программирования | Название языка | lang="html", lang="sql" |
| Язык комментариев | ISO 639-1 | lang="es" (испанский) |
| Комбинация | язык-регион | lang="pt-BR" (бразильский португальский) |
Использование с CSS:
<style>
code[lang="javascript"] {
color: #f8f8f2;
background: #282a36;
}
code[lang="python"]::before {
content: "Python: ";
font-weight: bold;
}
</style>
<code lang="javascript">const x = 10;</code>
<code lang="python">x = 10</code>
Рекомендации по применению:
- Для кода: указывайте язык программирования
- Для комментариев: указывайте естественный язык
- При смешанном содержании: используйте вложенные элементы
- Сочетайте с атрибутом
dirдля RTL-языков
Пример с JavaScript:
<code id="dynamic-lang">console.log("Hello")</code>
<script>
function setCodeLanguage(lang) {
document.getElementById('dynamic-lang').lang = lang;
}
setCodeLanguage('typescript');
</script>
Особенности доступности:
- Скринридеры используют атрибут для выбора голоса
- Влияет на произношение текста в комментариях
- Помогает браузерам предлагать перевод
Важные замечания:
- Не влияет на синтаксис самого кода
- Для подсветки синтаксиса обычно используются классы
- Наследуется от родительских элементов
- Может отличаться от языка страницы
Примечание: Хотя атрибут lang не является обязательным для тега <code>, его правильное использование улучшает обработку текста и доступность, особенно при работе с многоязычными комментариями в коде.