charset и Unicode: обработка специальных символов
Используйте UTF-8 и сущности HTML для корректного отображения любых символов
«charset и Unicode: обработка специальных символов» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Объявление кодировки charset
Каждый документ HTML должен объявлять используемую кодировку. Стандарт — UTF-8: <meta charset="utf-8"> как самый первый элемент <head>. Без этого браузер угадывает кодировку, что часто приводит к ошибкам в тексте, содержащем символы не из ASCII.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>Почему UTF-8
UTF-8 кодирует каждый символ Юникода: любую систему письменности, любой эмодзи и любой символ. Она обратно совместима с ASCII (символы a-z и 0-9 остаются однобайтными) и является преобладающей кодировкой в современном вебе: к 2024 году UTF-8 используют более 98% страниц.
Расположение имеет решающее значение
Мета-тег charset должен находиться в первых 1024 байтах документа — обычно в первой строке <head>. Браузер определяет кодировку по этим байтам; объявление charset позже может не повлиять на результат этого определения.
Сохраняйте файлы в UTF-8
Мета-тег объявляет кодировку, но редактор должен действительно сохранять файл в этой кодировке. В современных версиях VS Code, IntelliJ и Sublime по умолчанию используется UTF-8. Файлы, сохранённые как Windows-1252 или ISO-8859-1, приводят к появлению искажённых символов даже при правильном мета-теге.
Сущности HTML
Специальные символы HTML (<, >, &, ") необходимо экранировать, чтобы парсер не запутался: < для <, > для >, & для &, " для ". В значениях атрибутов " обязательно, если значение заключено в двойные кавычки.
Числовые ссылки на символы
Любой символ Юникода можно указать по его кодовой точке: ☃ или ☃ для символа снеговика (☃). Используйте этот способ, когда непосредственный ввод символа непрактичен (например, для редких символов или управляющих символов), но предпочитайте сам символ Юникода, если редактор его поддерживает.
Эмодзи и суррогатные пары
Эмодзи — это символы Юникода с кодовыми точками выше U+FFFF; в UTF-16 (кодировке, используемой внутри строк JavaScript) они представляются суррогатными парами. UTF-8 кодирует их последовательностями из 4 байт. Если задан charset="utf-8", эмодзи отображаются как обычные символы без сущностей.
Распространённые ошибки кодировки
Отображение "Don't" как "Donât" означает, что файл интерпретируется как Latin-1, хотя сохранён в UTF-8. Исправьте это, сохранив файл в UTF-8 и убедившись, что присутствует <meta charset="utf-8">. Современные браузеры используют UTF-8 по умолчанию только если метатег отсутствует AND файл правдоподобно соответствует UTF-8.
Заголовок HTTP Content-Type
Сервер также может объявить кодировку через заголовок ответа: Content-Type: text/html; charset=utf-8. Заголовок имеет приоритет над мета-тегом, поэтому неправильно настроенные серверы могут вызывать ошибки кодировки даже в безупречно написанном HTML.
Работа с формами
По умолчанию формы отправляют данные в кодировке страницы. Страницы UTF-8 отправляют данные формы в UTF-8, и сервер должен декодировать их как UTF-8. Несоответствие между кодировкой страницы и декодированием на сервере — частый источник искажённых пользовательских данных на многоязычных сайтах.
Избегайте BOM
Файлы UTF-8 могут начинаться с метки порядка байтов (BOM, 0xEF 0xBB 0xBF). Большинство браузеров допускают её, но некоторые инструменты и CDN — нет; кроме того, в некоторых текстовых редакторах BOM отображается как видимый символ. Сохраняйте файлы как "UTF-8 без BOM", чтобы избежать неожиданностей.
Проверка знаний
Почему тег должен находиться в первых 1024 байтах документа HTML?
Краткое содержание
Объявляйте <meta charset="utf-8"> как первый дочерний элемент <head> и сохраняйте файлы в UTF-8. UTF-8 кодирует каждый символ Юникода, включая эмодзи и символы всех систем письменности. Экранируйте <, >, & и " с помощью сущностей; для редких символов используйте числовые ссылки. Помните, что HTTP Content-Type может переопределить мета-тег, а BOM в некоторых инструментах отображается как видимый символ.
Часто задаваемые вопросы
Урок «charset и Unicode: обработка специальных символов» бесплатный?
Да — полный текст урока «charset и Unicode: обработка специальных символов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «charset и Unicode: обработка специальных символов»?
Используйте UTF-8 и сущности HTML для корректного отображения любых символов Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «charset и Unicode: обработка специальных символов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Атрибут lang и экранные дикторы
- dir=rtl для текста справа налево
- Элементы bdi и bdo
- charset и Unicode: обработка специальных символов