Кодировка символов в HTML: правильное использование мета-кодировки UTF-8

Что означает кодировка символов в HTML, какая строка мета-кодировки нужна каждой странице, как заголовок HTTP и спецификация переопределяют ее и как исправить искаженные символы на многоязычных сайтах.
Начать
Отправьтесь на экскурсию
Нет данных карты Никаких обязательств

· Обновлено · Алекс Б · Блог

Подведите итог этому посту следующим образом: 9 мин чтения
ChatGPT ЧатGPT Perplexity Недоумение Grok Грок Google AI Google ИИ

Кодировка символов HTML-страницы — это правило, которое превращает байты в файле обратно в буквы. Для каждой современной страницы ответ один и тот же: сохранить файл как UTF-8 и объявить его с помощью <meta charset="utf-8"> как первый элемент внутри <head>, в пределах первых 1024 байт документа. Стандарт HTML требует UTF-8, и если ваш сервер также отправляет Content-Type заголовок с кодировкой, они должны согласоваться.

Ключевые выводы

  • Используйте UTF-8. Стандарт HTML гласит, что фактическая кодировка документа “должна быть UTF-8”, и W3Techs В сентябре 2026 года сообщалось, что 99,1% веб-сайтов с известной кодировкой уже используют ее.
  • Объявите об этом с помощью <meta charset="utf-8"> сразу после <head>. Он должен поместиться в первые 1024 байта.
  • Объявления недостаточно: сам файл, ваша база данных и заголовок вашего сервера также должны быть в формате UTF-8.
  • Когда объявления не совпадают, отметка порядка байтов превосходит заголовок HTTP, который превосходит <meta> ярлык.
  • Искаженный текст, например é вместо é почти всегда означает, что байты UTF-8 считываются как устаревшая кодировка или текст был преобразован дважды.

Что такое кодировка символов

Компьютеры хранят текст в виде чисел. Кодировка — это таблица, которая сопоставляет эти числа с символами. Старые кодировки, такие как ISO-8859-1 или Windows-1252, охватывают один байт на символ и всего пару сотен символов, чего достаточно для западноевропейских языков и ничего больше. UTF-8 кодирует каждый символ в Unicode, поэтому английский, арабский, хинди, японский и эмодзи могут располагаться на одной странице, используя от одного до четырех байтов на символ.

W3C четко определяет риск: если вы не укажете кодировку, “вы рискуете, что символы в вашем контенте будут неправильно интерпретированы”, и добавляет, что объявление кодировки также необходимо для обработки текста, отличного от ASCII, который пользователи вводят в формы (Интернационализация W3C).

Единственная строка, которая вам нужна

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>…</title>
  </head>
</html>

Несколько деталей, в которых люди ошибаются:

  • Позиция. Стандарт HTML гласит, что элемент, содержащий объявление “, должен быть полностью сериализован в пределах первых 1024 байт документа” (Стандарт жизни HTML). Поставьте его первым <head>, перед заголовком, сценариями и длинными комментариями.
  • Только один. Документ может иметь только один <meta>-основанное объявление кодировки.
  • Случай не имеет значения. UTF-8 и utf-8 оба в порядке. W3C отмечает более длинную форму, <meta http-equiv="Content-Type" content="text/html; charset=utf-8">, работает так же, но больше требует набора текста.
  • Никакое другое значение не действительно для новых страниц. Стандарт кодирования гласит: “Авторы должны использовать кодировку UTF-8” и должны ее маркировать utf-8 (Стандарт кодирования WHATWG). Старые лейблы, такие как iso-8859-1 по-прежнему работают в браузерах, но не соответствуют новым документам.

Декларация должна соответствовать байтам

The <meta> тег описывает файл. Он его не конвертирует. Если ваш редактор сохраняет файл как Windows-1252 (который некоторые инструменты Windows называют “ANSI”) и в теге указано UTF-8, все символы с ударением или нелатинские символы будут сломаны. W3C напоминает авторам, что использование UTF-8 означает “вам также необходимо сохранить свой контент в формате UTF-8” (W3C).

Проверьте формат сохранения вашего редактора. В большинстве редакторов кода текущая кодировка отображается в строке состояния с возможностью “Сохранить с кодировкой” или “Повторно открыть с кодировкой”. Выберите UTF-8.

ANSI против UTF-8. “ANSI” — это не единая кодировка. В Windows это означает устаревшую кодовую страницу системы, которой в западноевропейских системах обычно является Windows-1252. Он не может отображать арабский, китайский или большинство других шрифтов, и файлы, сохраненные таким образом, будут отображаться некорректно, если на странице указан UTF-8. Для Интернета всегда выбирайте UTF-8.

Какая декларация побеждает, когда они не согласны

Браузер может найти кодировку в трех местах. В W3C указан приоритет:

  1. Метка порядка байтов (BOM). Несколько невидимых байтов в самом начале файла. Если он присутствует, он переопределяет все остальное “включая заголовок HTTP”.
  2. HTTP Content-Type заголовок, например Content-Type: text/html; charset=utf-8. Это лучше, чем заявления в документах.
  3. The <meta charset> элемент.

Итак, если ваш сервер отправляет charset=iso-8859-1 и на вашей странице написано UTF-8, сервер выигрывает, и страница ломается. Совет W3C — в любом случае указывать кодировку в документе, а если вы также используете заголовок, убедиться, что там написано то же самое.

Как установить заголовок на общих серверах:

  • Апачи: AddDefaultCharset utf-8 добавляет кодировку в text/html и text/plain ответы (Документы Apache). Apache отмечает, что использовать его следует только в том случае, если все затронутые файлы действительно находятся в этой кодировке.
  • нгинкс: к charset utf-8; директива в http, server или location блок добавляет кодировку в Content-Type заголовок (документы Nginx).
  • PHP: header('Content-Type: text/html; charset=utf-8'); перед любым выводом.

Вы можете увидеть, что отправляет ваш сервер curl -I https://your-site.example/ или в инструментах разработчика браузера в разделе Сеть, заголовки ответов.

Исправление искаженных символов (mojibake)

Искаженный текст следует узнаваемым закономерностям. Вот как их читать:

Что вы видитеЧто случилосьИсправить
café вместо caféБайты UTF-8 читаются как Windows-1252 или ISO-8859-1Сделайте так, чтобы заголовок и метаданные были написаны в кодировке UTF-8
caf� (бриллиант с вопросительным знаком)Устаревшие байты читаются как UTF-8Повторно сохраните файл или преобразуйте данные в UTF-8
caféТекст преобразован в UTF-8 дваждыНайдите двойное преобразование, обычно при импорте или в подключении к базе данных
??? вместо каждого нелатинского символаСимволы теряются при сохранении в столбце или файле, который не может их хранитьИзмените хранилище на UTF-8 и повторно импортируйте из источника

Проработайте цепочку по порядку: файл на диске, база данных, соединение между ними, заголовок HTTP и <meta> ярлык. Каждая ссылка должна быть UTF-8.

Базы данных. В MySQL старый utf8 набор символов — это псевдоним для utf8mb3, который хранит не более трех байтов на символ и поэтому не может содержать “дополнительные” символы, такие как большинство смайлов. Документы MySQL utf8mb3 как устаревший (Справочное руководство по MySQL). Использовать utf8mb4 для таблиц и для подключения.

HTML-сущности: когда они вам еще нужны

С помощью UTF-8 вы можете печатать é, ü, ж или 中 прямо в источник. Вам нужны только ссылки на персонажей, такие как &amp;, &lt; и &gt; для символов, имеющих значение в HTML-разметке. Сущности также удобны для невидимых символов, которые трудно обнаружить в источнике, например, пространство без перерыва (&nbsp;) или указатели направления в тексте справа налево.

Кодирование на многоязычных сайтах

Проблемы с кодировкой проявляются в тот момент, когда сайт добавляет языки. Страница, на которой отображался только английский язык, может годами скрывать неправильное объявление, поскольку простые английские буквы одинаковы в UTF-8 и в устаревших западных кодировках. Первый польский, греческий или японский перевод раскрывает это.

Прежде чем добавлять языки, проверьте три вещи:

  1. Каждый шаблон и статический файл сохраняются в формате UTF-8 и заявляет <meta charset="utf-8">.
  2. The lang атрибут устанавливается для каждого языка, например <html lang="ja">, и страницы справа налево также получают dir="rtl". Кодировка говорит, как читать байты; lang сообщает, на каком языке находится текст, что важно для шрифтов, переносов и программ чтения с экрана.
  3. URL-адреса с нелатинскими символами имеют кодировку UTF-8 и процентную кодировку. В руководстве Google по многоязычным сайтам говорится, что локализованные слова в URL-адресах допустимы, но “следует использовать кодировку UTF-8 в URL-адресе (на самом деле, мы рекомендуем использовать UTF-8 везде, где это возможно)” и правильно экранировать URL-адреса при ссылках (Центр поиска Google).

ConveyThis переводит текст на ваших страницах на любой из 210 поддерживаемых языков, включая такие письменности, как арабский, китайский, хинди и иврит, и обслуживает переведенные страницы с URL-адресов на их родном языке. Однако он не может исправить шаблон, объявляющий неправильную кодировку, поэтому сначала выполните проверки, описанные выше. Для языков справа налево есть настройка переключить направление текста на переведенных страницах; наш Руководство по проектированию RTL закрывает сторону макета. Смотреть полный список функций и как обрабатываются переведенные страницы многоязычное SEO, или сравнить планы и цены.

Быстрый контрольный список

  • Файл сохранен как UTF-8 (без спецификации, если у вас нет причин ее сохранять)
  • <meta charset="utf-8"> является первым элементом в <head>
  • Заголовок сервера говорит: charset=utf-8, или ничего, никогда не другая кодировка
  • Таблицы базы данных и использование соединений utf8mb4 (MySQL/MariaDB)
  • Формы и API отправляют и принимают UTF-8
  • lang (и dir для языков RTL) устанавливается для каждой языковой версии

Часто задаваемые вопросы

Какова правильная кодировка символов для HTML?

УТФ-8. Живой стандарт HTML требует, чтобы фактическая кодировка документа была UTF-8 и чтобы в любом объявлении использовалась метка utf-8.

Куда следует поместить мета-символ?

Как первый элемент внутри головы. Весь элемент должен находиться в пределах первых 1024 байт документа, поэтому поместите его перед заголовком, сценариями и стилями.

Требуется ли по-прежнему meta charset=“utf-8” с заголовком HTTP?

W3C рекомендует объявлять кодировку внутри документа даже тогда, когда сервер его отправляет, поскольку заголовок теряется при локальном сохранении или открытии файла. Если вы используете оба варианта, они должны говорить одно и то же.

Почему на моей странице отображается é вместо é?

Текст имеет кодировку UTF-8, но декодируется как устаревшая западная кодировка, например Windows-1252. Обычно заголовок сервера или метатег объявляет неправильную кодировку. Пусть оба скажут UTF-8.

В чем разница между ANSI и UTF-8?

ANSI обычно относится к устаревшей кодовой странице Windows, такой как Windows-1252, которая охватывает только западноевропейские символы. UTF-8 может представлять каждый символ Unicode на любом языке, и это единственная кодировка, которую стандарт HTML допускает для новых документов.

Готовы добавить языки?

Как только ваши страницы станут чистыми UTF-8, добавление языков в основном станет задачей контента. Ты можешь создать учетную запись ConveyThis для перевода вашего сайта и публикации каждого языка по отдельному URL-адресу.

Поделиться:
G2 High Performer Spring 2023
G2 Easiest Setup Fall 2024
G2 Best Support Spring 2025