Атрибут charset тега <meta> — кодування UTF-8

Тег <meta> дозволяє повідомити браузеру відвідувача, який набір символів і яке кодування необхідно встановити на веб-сторінці. Атрибут charset (HTML тега <meta>) задає кодування символів для HTML документа.

автор: NagarD

Загальний опис

автор: NagarD

Порада

Атрибут charset може бути локально перевизначений за допомогою атрибута lang у будь-якому елементі.

автор: NagarD
Порада

Стандарт HTML 5 не запитує конкретне кодування, але дає рекомендацію використовувати кодування UTF-8. Не рекомендується використовувати кодування ASCII, CESU-8, UTF-7, BOCU-1, SCSU і UTF-32 з різних причин.

автор: NagarD
Нотатка

Вважається доброю практикою, і настійно рекомендується визначати набір символів (кодування), використовуючи атрибут charset. Атрибут charset є лише частиною алгоритму визначення кодування сторінки браузером. Рекомендується вказувати кодування символів першим <meta> елементом (якщо використовується кілька). Зверніть увагу, що для одного документа вказується тільки одне кодування.

автор: NagarD

Синтаксис

<meta charset="character_set">

Атрибут charset може отримувати єдине значення:

character_set

Задає кодування символів для HTML документа.

Загальні значення:

  • UTF-8 - Кодування символів для Unicode
  • ISO-8859-1 - Кодування символів для латинського алфавіту

Теоретично, будь-яке кодування символів може бути використане, але жоден браузер не розуміє всі з них. Чим ширше кодування символів використовується, тим вища ймовірність того, що браузер зрозуміє це.

автор: NagarD

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
1 1 3 15 12 ≤11
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 4 2

Приклади

+ запропонувати свій приклад у пісочниці

Найпростіший приклад використання HTML атрибута charset теґа <meta>

<!DOCTYPE HTML>
<html>
 <head>
  <title>META</title>
  <meta charset="utf-8">
 </head>
  <body> 
  <p>Атрибут charset тегу meta</p>
 </body
</html>
автор: NagarD

Ті самі байти, прочитані правильно і як windows-1251. Друге — і є те, що бачить читач, коли кодування оголошено не те.

HTML

<p class="ok">Привіт, світе! — UTF-8, прочитаний як UTF-8</p>
<p class="bad">РџСЂРёРІС–С‚, світе! — ті самі байти, прочитані як windows-1251</p>

CSS

p {
  font: 16px/1.5 system-ui, sans-serif;
  padding: 10px 14px;
  border-radius: 4px;
}

.ok {
  background: #dcfce7;
  color: #14532d;
}

.bad {
  background: #fee2e2;
  color: #7f1d1d;
}
автор: NagarD

Різниця між HTML 4.01 та HTML5

Атрибут charset з'явився тільки у HTML5 і замінює необхідність <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">.

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід