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

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

При створенні сайту важливо одразу вказати кодування сайту. Якщо цього не зробити, текст може відображатися неправильно: замість букв з’являться дивні символи.

У цьому уроці з серії HTML з нуля розберемо тільки найнеобхідніше: що таке кодування та як правильно вказати кодування сайту в HTML.

Що таке кодування сайту

Кодування — це спосіб, яким браузер розуміє, які букви показувати на сторінці.

Якщо кодування вказане неправильно або не вказане взагалі, браузер показує не той текст, який ти написав.

Яке кодування використовувати

Для всіх сучасних сайтів використовується UTF-8.

Воно підходить, якщо на сайті є:

український текст;
російський текст;
англійський текст;
символи та емодзі.

Інші кодування зараз майже не застосовуються.

Як вказати кодування сайту в HTML

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

<!DOCTYPE html>
<html lang="uk">
<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">

Якщо її немає — текст може зламатися. Якщо є — проблем з відображенням не буде.