Skip to main content

Що робить <meta charset="UTF-8">?

Тег <meta charset="UTF-8"> повідомляє браузеру, в якому кодуванні записаний HTML-документ, щоб він правильно відображав усі символи: букви, цифри, знаки, пробіли, емодзі тощо.


1. Що таке кодування

Кодування, це спосіб, яким комп'ютер зберігає і розуміє текстові символи. Кожен символ (буква, цифра, знак) має свій числовий код.

  • На старих сайтах часто використовувалися кодування на кшталт Windows-1251 (для кириличних мов) або ISO-8859-1 (для західних).
  • Сучасний стандарт, UTF-8, який підтримує всі мови світу, включно з кирилицею, арабською, китайською і навіть емодзі.

2. Що робить meta charset="UTF-8"

Коли браузер відкриває сторінку, він першим ділом зчитує тег:

html
<meta charset="UTF-8">

і розуміє:

«Усі символи в цьому файлі потрібно інтерпретувати в кодуванні UTF-8.»

Завдяки цьому текст на кшталт:

html
<h1>Привіт, світ!</h1>

відображається коректно, а не як «ÐºÐ¸ÑилиÑÑ».


3. Чому важливо ставити цей тег на початку <head>

Браузер читає HTML послідовно зверху вниз. Якщо кодування вказане не одразу, він може встигнути «прочитати» кілька символів у неправильній системі й показати їх нечитабельними знаками.

Правильно:

html
<head> <meta charset="UTF-8"> <title>Головна сторінка</title> </head>

Неправильно:

html
<head> <title>Головна сторінка</title> <meta charset="UTF-8"> </head>

4. Чому саме UTF-8

  • Універсальне: працює з будь-якими мовами.
  • Підтримує спецсимволи, емодзі, математичні знаки.
  • Сумісне з більшістю серверів і систем.
  • Це офіційний стандарт HTML5.

Підсумок:

ПараметрЗначення
Тег<meta charset="UTF-8">
ПризначенняВказує браузеру, яке кодування використовувати
Що робитьГарантує коректне відображення тексту
Чому важливийБез нього, нечитабельні символи та помилки
Стандарт HTML5Рекомендує саме UTF-8

Простими словами: <meta charset="UTF-8"> каже браузеру:

«Ця сторінка написана в універсальному кодуванні. Покажи всі символи правильно.»

Без нього кириличний текст може перетворитися на нечитабельні знаки.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.