Атрибут lang для локализации

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 42
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
Атрибут `lang` является одним из глобальных атрибутов в HTML и играет ключевую роль в локализации и доступности веб-страниц. Он сообщает браузеру, поисковым системам и вспомогательным технологиям, на каком языке написан контент. Это позволяет правильно отображать шрифты, использовать корректные правила переноса слов, выбирать правильные кавычки и даже настраивать голосовой синтез для программ чтения с экрана. В этой серии заданий вы отработаете как базовое использование атрибута `lang` для всей страницы, так и его применение к отдельным фрагментам текста. Вы также увидите, как `lang` может взаимодействовать с CSS для создания стилей, зависящих от языка, что открывает интересные возможности для дизайна мультиязычных сайтов.
Список тем

Основной язык документа

id: 37787_html-lang-1

Чтобы поисковые системы и браузеры правильно индексировали и отображали вашу страницу, необходимо указать ее основной язык. Добавьте в тег `<html>` атрибут, который определит язык всего документа как русский.

CSS
body {
  font-family: sans-serif;
  color: #333;
}

p {
  background-color: #f0f8ff;
  border-left: 4px solid #4682b4;
  padding: 15px;
  margin: 10px;
}
HTML
<html input1>
  <head>
    <title>Моя страница</title>
  </head>
  <body>
    <p>Это пример текста на русском языке.</p>
  </body>
</html>
Для указания основного языка документа используется атрибут `lang` в открывающем теге `<html>`. Значением атрибута должен быть двухбуквенный код языка по стандарту ISO 639-1. Для русского языка это 'ru'. Пример для английского: `lang="en"`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Указание языка для отдельного фрагмента

id: 37787_html-lang-2

На вашей странице есть цитата на английском языке. Чтобы вспомогательные технологии, например, программы чтения с экрана, смогли правильно ее произнести, укажите язык непосредственно для этого абзаца.

CSS
p {
  font-family: sans-serif;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.quote {
  font-style: italic;
  color: #555;
}
HTML
<body>
  <p>Мой любимый афоризм:</p>
  <p class="quote" input1>"The only way to do great work is to love what you do."</p>
</body>
Атрибут `lang` можно применять не только ко всему документу, но и к любому HTML-элементу. Чтобы указать язык для конкретного абзаца, добавьте атрибут `lang` с кодом 'en' для английского языка в тег `<p>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стилизация текста на основе языка

id: 37787_html-lang-3

В CSS уже подготовлен специальный стиль для текста на французском языке. Ваша задача — правильно указать язык для соответствующего абзаца, чтобы к нему автоматически применился стиль (текст станет курсивным и синим).

CSS
p {
  padding: 10px;
  margin: 5px 0;
}

p:lang(fr) {
  font-style: italic;
  color: #1e3a8a;
  background-color: #eff6ff;
  border-left: 3px solid #3b82f6;
}
HTML
<body>
  <p lang="ru">Это текст на русском.</p>
  <p input1>Bonjour le monde !</p>
</body>
В CSS можно использовать псевдокласс `:lang()` для применения стилей к элементам с определённым языковым атрибутом. Например, `p:lang(fr)` выберет все абзацы с атрибутом `lang="fr"`. Вам нужно лишь добавить этот атрибут в HTML.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Региональные варианты языка

id: 37787_html-lang-4

Атрибут `lang` позволяет указывать не только язык, но и его региональный диалект. Отметьте два абзаца: один с американским английским, другой — с британским. В CSS уже есть стили, которые добавят флаг страны перед каждым из них.

CSS
p {
  position: relative;
  padding-left: 35px;
  line-height: 24px;
  margin: 15px 0;
}

p:lang(en-US)::before {
  content: '🇺🇸';
  position: absolute;
  left: 5px;
  top: 0;
  font-size: 20px;
}

p:lang(en-GB)::before {
  content: '🇬🇧';
  position: absolute;
  left: 5px;
  top: 0;
  font-size: 20px;
}
HTML
<body>
  <p input1>My favorite color is blue.</p>
  <p input2>My favourite colour is blue.</p>
</body>
Для указания регионального варианта используется код языка, дефис и код региона. Для американского английского используется 'en-US', а для британского — 'en-GB'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Стилизация ссылок на разных языках

id: 37787_html-lang-5

У вас есть список ссылок, ведущих на ресурсы на разных языках. Используя атрибут `lang`, укажите язык для ссылок на немецком и испанском. CSS автоматически добавит иконку языка после текста ссылки.

CSS
a {
  display: block;
  padding: 8px;
  margin: 4px 0;
  text-decoration: none;
  color: #007bff;
}

a::after {
  margin-left: 8px;
  font-size: 0.8em;
  padding: 2px 4px;
  border-radius: 3px;
}

a:lang(de)::after {
  content: 'DE';
  background-color: #ffc107;
  color: #333;
}

a:lang(es)::after {
  content: 'ES';
  background-color: #f44336;
  color: white;
}
HTML
<body>
  <a href="#">Статья на русском</a>
  <a href="#" input1>Artikel auf Deutsch</a>
  <a href="#" input2>Artículo en español</a>
</body>
Примените атрибут `lang` к тегам `<a>`. Для немецкого языка используйте код 'de', для испанского — 'es'. CSS-правила `a:lang(de)::after` и `a:lang(es)::after` уже настроены.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Исключение из общих правил

id: 37787_html-lang-6

В CSS задан стиль (серый фон) для всех абзацев, у которых язык не определён. Ваша задача — указать для одного из абзацев итальянский язык. Это исключит его из общего правила, и серый фон у него пропадёт.

CSS
p {
  padding: 10px;
  border: 1px dashed #ccc;
  margin: 10px 0;
}

p:not([lang]) {
  background-color: #eee;
}
HTML
<body>
  <p>У этого абзаца нет атрибута `lang`.</p>
  <p input1>Questo paragrafo è in italiano.</p>
  <p>И у этого тоже нет `lang`.</p>
</body>
CSS-селектор `:not([lang])` выбирает все элементы, у которых отсутствует атрибут `lang`. Чтобы абзац перестал соответствовать этому правилу, просто добавьте ему любой атрибут `lang`. Для итальянского языка используйте код 'it'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Вложенные языки

id: 37787_html-lang-7

Внутри русскоязычного текста есть термин на латыни. Основной абзац уже помечен как русский. Ваша задача — указать, что отдельное слово внутри этого абзаца написано на латыни, используя тег `<span>`.

CSS
p {
  line-height: 1.6;
}

span:lang(la) {
  font-style: italic;
  color: #8b5cf6;
  border-bottom: 1px dotted #8b5cf6;
}
HTML
<body>
  <p lang="ru">
    Статус-кво — это латинское выражение, означающее «существующее положение». В юриспруденции часто используется термин <span input1>de facto</span>, что значит «фактически».
  </p>
</body>
Вы можете обернуть иностранное слово или фразу в тег `<span>` и применить к этому тегу атрибут `lang`. Для латинского языка используется код 'la'. CSS подсветит это слово.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру