Как указать кодировку utf 8 в html

Для указания кодировки страницы используется тег <meta> со специальным атрибутом charset. Исходя из значения атрибута браузер понимает, в какой кодировке стоит интерпретировать текст внутри страницы. Сам тег располагают внутри секции <head>. Например,

<head>
  <meta charset="UTF-8">
</head>

Для указания кодировки UTF-8 в HTML вы можете использовать тег мета-информации <meta> с атрибутом charset. Вот пример кода HTML с указанием кодировки UTF-8:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ваш заголовок</title>
</head>
<body>
    <p>Ваш контент здесь</p>
</body>
</html>

Тег <meta> с атрибутом charset должен находиться внутри тега <head> перед любым другим контентом, чтобы правильно указать кодировку страницы. При загрузке браузер использует эту информацию для корректного отображения текста на странице.

Добавьте <meta charset="utf-8"> первой строкой внутри <head>:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Моя страница</title>
</head>
<body>
  <p>Привет</p>
</body>
</html>

Браузер читает кодировку из первых 1024 байт страницы. Поэтому тег ставят до <title>, стилей и скриптов. Регистр не важен: utf-8 и UTF-8 работают одинаково.

Файл тоже должен быть в UTF-8

Тег только сообщает браузеру кодировку. Если сам файл сохранён в Windows-1251, русский текст всё равно сломается.

В VS Code кодировка файла видна в строке состояния внизу справа. Чтобы поменять: нажмите на неё → «Сохранить с кодировкой» → UTF-8.

Как распознать проблему по кракозябрам

Кодировка в заголовке сервера

Сервер может передать кодировку в HTTP-заголовке:

Content-Type: text/html; charset=utf-8

Заголовок важнее тега <meta>. Если сервер отдаёт charset=windows-1251, тег в HTML не поможет. Проверить заголовок можно в DevTools: вкладка Network → запрос страницы → Response Headers. Или в терминале:

curl -I https://example.com

Как задать кодировку на сервере:

# nginx, в блоке server
charset utf-8;

Старая запись

В HTML4 и XHTML кодировку указывали так:

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

Браузеры её понимают. В HTML5 хватает короткой формы <meta charset="utf-8">.

Структуру HTML-документа разбирают на курсе «Профессиональная верстка».