HTML с нуля: Как указать кодировку сайта на HTML. Урок №20 Overcod.net

HTML с нуля: Как указать кодировку сайта на HTML. Урок №20

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

В этом уроке из серии HTML с нуля разберём только самое нужное: что такое кодировка и как правильно указать кодировку сайта в HTML.

Что такое кодировка сайта

Кодировка — это способ, по которому браузер понимает, какие буквы показывать на странице.

Если кодировка указана неверно или не указана вообще, браузер показывает не тот текст, который ты написал.

Какую кодировку использовать

Для всех современных сайтов используется UTF-8.

Она подходит, если на сайте есть:

русский текст;
украинский текст;
английский текст;
символы и эмодзи.

Другие кодировки сейчас почти не применяются.

Как указать кодировку сайта в HTML

Кодировка указывается внутри тега <head>.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Кодировка сайта</title>
</head>
<body>
<p>Текст отображается правильно</p>
</body>
</html>

Если этот тег есть — браузер понимает, как читать файл.

Что будет, если кодировка указана неверно

Например, ты написал:

Привет! Это мой сайт.

А браузер показывает:

ÐŸÑ€Ð¸Ð²ÐµÑ‚! ÐÑ‚Ð¾ Ð¼Ð¾Ð¹ ÑÐ°Ð¹Ñ‚.

Или так:

������! ��� ��� ����.

Так выглядит сайт с неправильной кодировкой.

Частые ошибки

Ошибка 1. Использование старых кодировок

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

Ошибка 2. Кодировка указана не в <head> (браузер может её просто не применить.)

<body>
<meta charset="UTF-8">

Ошибка 3. Файл сохранён не в UTF-8

Даже если в HTML указано UTF-8, сам файл тоже должен быть сохранён в этой кодировке.

Как правильно сохранить файл в Блокноте

Даже если в HTML указана UTF-8, файл нужно сохранить в той же кодировке.

Как сохранить HTML в стандартном Блокноте (Windows)

Нажми Файл → Сохранить как
В поле Тип файла выбери Все файлы
Имя файла укажи, например: index.html
В поле Кодировка выбери UTF-8
Нажми Сохранить

После этого браузер будет читать файл правильно, и текст не превратится в набор странных символов.

Итог

В каждом HTML-файле должна быть строка:

<meta charset="UTF-8">

Если её нет — текст может сломаться. Если она есть — проблем с отображением не будет.