Кодировка и язык документа (meta charset, lang)

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

Опубликовано 04.04.2025
Просмотры 21
Автор
Рек. время прохождения 3 минуты
Упражнений 10
Комментарии 0
Тренажер HTML
Список тем

Указываем язык документа

id: 37891_meta-lang-1

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

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
h1 {
  font-size: 1.5em;
}
HTML
<!DOCTYPE html>
<html input1="ru">
<head>
  <title>Язык документа</title>
</head>
<body>
  <h1>Привет, мир!</h1>
  <p>Это простая страница на русском языке.</p>
</body>
</html>
Для указания языка документа используется атрибут `lang`. Добавьте его в открывающий тег `<html>` перед значением.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Английская версия страницы

id: 37891_meta-lang-2

Теперь представим, что вы создаете страницу на английском языке. Измените значение атрибута `lang`, чтобы указать, что основной язык документа — английский.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
h1 {
  font-size: 1.5em;
}
HTML
<!DOCTYPE html>
<html lang="input1">
<head>
  <title>Document Language</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple page in English.</p>
</body>
</html>
Стандартный двухбуквенный код для английского языка — `en`. Укажите его в качестве значения атрибута `lang`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Объявляем кодировку

id: 37891_meta-charset-1

Правильная кодировка — ключ к корректному отображению текста, особенно с кириллицей. Вставьте в секцию `<head>` недостающий тег, который устанавливает самую популярную на сегодня кодировку UTF-8.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
h1 {
  font-size: 1.5em;
}
p {
  font-size: 1.1em;
}
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Моя страница</title>
  input1
</head>
<body>
  <h1>Заголовок</h1>
  <p>Текст с кириллическими символами.</p>
</body>
</html>
Чтобы объявить кодировку, используется тег `<meta>`. Полная конструкция для установки UTF-8 выглядит так: `<meta charset="UTF-8">`. Вставьте этот тег целиком.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Заполняем атрибуты мета-тега

id: 37891_meta-charset-2

Тег `<meta>` может иметь разные атрибуты. Чтобы задать кодировку, используется специальный атрибут. Заполните пропуски, чтобы правильно указать кодировку UTF-8.

CSS
body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
p {
  font-size: 1.1em;
  font-weight: bold;
  color: #007bff;
}
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta input1="input2">
  <title>Атрибуты</title>
</head>
<body>
  <p>Кодировка установлена!</p>
</body>
</html>
Атрибут для указания кодировки называется `charset`. Его значением для универсальной кодировки должно быть `UTF-8`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37891_meta-lang-3

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

CSS
body {
  font-family: serif;
  padding: 15px;
  color: #333;
}
h1 {
  font-size: 1.5em;
  font-style: italic;
}
HTML
<!DOCTYPE html>
<html lang="input1">
<head>
  <title>Regional variant</title>
</head>
<body>
  <h1>My Favourite Colour</h1>
  <p>This text is for British audience.</p>
</body>
</html>
Региональные варианты указываются через дефис после основного кода языка. Для британского английского используется код `en-GB` (English - Great Britain).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37891_meta-lang-4

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

CSS
p {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
}
p:last-child {
  background-color: #f0f8ff;
  font-style: italic;
}
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Разные языки</title>
</head>
<body>
  <p>Это основной текст на русском языке.</p>
  <p input1="en">This is a text in English.</p>
</body>
</html>
Атрибут `lang` можно применять не только к `<html>`, но и к любому другому тегу, чтобы указать язык его содержимого. Добавьте атрибут `lang` к тегу `<p>` с цитатой.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Спасаем кириллицу!

id: 37891_meta-charset-3

Без указания кодировки браузер может неправильно отобразить кириллические символы. Добавьте в `<head>` тег, который исправит эту проблему, установив современную и универсальную кодировку UTF-8.

CSS
body {
  font-family: 'Times New Roman', serif;
}
p {
  font-size: 24px;
  color: #222;
  font-weight: bold;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <title>Проблема с кодировкой</title>
  input1
</head>
<body>
  <p>Тест кириллицы</p>
</body>
</html>
Проблема возникает из-за отсутствия информации о кодировке. Добавьте в `<head>` тег `<meta charset="UTF-8">`, чтобы браузер понял, как правильно интерпретировать символы.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Полная настройка документа

id: 37891_meta-combo-1

Хорошей практикой является одновременное указание и языка, и кодировки документа. Заполните все пропуски, чтобы объявить, что страница написана на русском языке и использует кодировку UTF-8.

CSS
body {
  font-family: sans-serif;
  color: #111;
  padding: 10px;
}
h1 {
  color: #0056b3;
}
p {
  line-height: 1.6;
}
HTML
<!DOCTYPE html>
<html input1="ru">
<head>
  <meta input2="input3">
  <title>Комплексная настройка</title>
</head>
<body>
  <h1>Главный заголовок</h1>
  <p>Абзац с текстом на странице.</p>
</body>
</html>
Используйте атрибут `lang` в теге `<html>` со значением `ru`. Внутри `<head>` используйте тег `<meta>` с атрибутом `charset` и значением `UTF-8`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Работа с устаревшей кодировкой

id: 37891_meta-charset-4

Представьте, что вы работаете со старым сайтом, страницы которого сохранены в кодировке `windows-1251`. Чтобы браузер правильно отобразил кириллические символы, укажите эту кодировку в мета-теге.

CSS
p {
  font-size: 1.1em;
  font-family: 'Courier New', monospace;
  background-color: #f0f0f0;
  padding: 15px;
  border-left: 3px solid #666;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <meta charset="input1">
  <title>Старый сайт</title>
</head>
<body>
  <p>Этот текст был сохранен в windows-1251.</p>
</body>
</html>
В качестве значения атрибута `charset` можно использовать не только `UTF-8`. Для поддержки старых документов укажите значение `windows-1251`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Сборка мета-тега по частям

id: 37891_meta-charset-5

Давайте закрепим знания о структуре мета-тега для кодировки. Заполните все пропущенные части: имя тега, имя атрибута и его значение, чтобы объявить кодировку UTF-8.

CSS
body {
  text-align: center;
  padding-top: 50px;
  font-size: 20px;
}
p {
  color: green;
  border: 2px solid green;
  padding: 10px;
  display: inline-block;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <input1 input2="input3">
  <title>Сборка тега</title>
</head>
<body>
  <p>Тег собран правильно!</p>
</body>
</html>
Сначала идет имя тега — `meta`. Затем атрибут — `charset`. И, наконец, его значение — `UTF-8`. Обратите внимание, что тег не нужно оборачивать в скобки, они уже есть в коде.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру