HTML-сущности: кодировать и декодировать спецсимволы
Знак «<» в HTML записывается как <, а неразрывный пробел — : всего 5 символов нужно экранировать всегда, остальные — по желанию. Вставьте текст — получите безопасный код или обратно читаемый текст.
Инструмент
Как кодировать спецсимволы HTML
Сущность — это запись символа через амперсанд: &имя; для именованных, &#число; для десятичного кода Unicode и &#xHEX; для шестнадцатеричного. Инструмент заменяет пять обязательных символов разметки и типографские знаки на именованные сущности, а при включённом флажке — все символы вне ASCII на числовые коды. Обратный режим превращает любую из трёх форм обратно в символ.
именованная: « → «
десятичная: « → «
шестнадцатеричная: « → «
кириллица (число): П → П (U+041F = 1055)
Разберём вручную фразу «Цена» — 5 €. Ёлочки заменяются на « и », длинное тире — на —, знак евро — на €. Получается «Цена» — 5 €: 4 замены, длина выросла с 12 до 35 символов. Кириллица не тронута — при кодировке UTF-8 ей ничего не угрожает. Если бы во фразе стояла ссылка <a href="/">, скобки и кавычки стали бы <a href="/"> — именно так разметку показывают на странице как текст.
Направление инструмент определяет сам: если в тексте есть хотя бы одна сущность вида &name; или &#NNN;, он декодирует, иначе кодирует. Переключатель позволяет задать режим вручную — например, закодировать текст, в котором уже встречается &.
Таблица частых HTML-сущностей
| Символ | Сущность | Код | Символ | Сущность | Код |
|---|---|---|---|---|---|
| неразрывный пробел | |   | © | © | © |
| & | & | & | ® | ® | ® |
< | < | < | ™ | ™ | ™ |
> | > | > | € | € | € |
| ” | " | " | ₽ | — | ₽ |
| ’ | ' | ' | ₸ | — | ₸ |
| « | « | « | ₴ | — | ₴ |
| » | » | » | № | № | № |
| — | — | — | ° | ° | ° |
| – | – | – | ± | ± | ± |
| … | … | … | × | × | × |
| „ | „ | „ | → | → | → |
| “ | “ | “ | ≠ | ≠ | ≠ |
| • | • | • | ≤ | ≤ | ≤ |
У знаков рубля, тенге и гривны именованных сущностей нет — только числовые коды; ' и № появились в HTML 5, поэтому для писем и старых систем надёжнее ' и №. Полный список HTML 4 содержит 252 имени, инструмент знает их все плюс частые имена из HTML 5.
Где нужно кодирование
Комментарии и формы на сайте: любой текст от пользователя перед выводом на страницу экранируют, иначе строка <script> выполнится у других посетителей. Примеры кода в статьях и документации — чтобы показать тег <div>, его пишут как <div>. Письма и рассылки — почтовые клиенты хуже браузеров переносят UTF-8, и типографика через сущности выглядит одинаково везде. RSS и XML-фиды — там допустимы только пять предопределённых сущностей (& < > " '), а или — сломают фид; используйте числовые коды   и —.
Карточки товаров на маркетплейсах и в 1С часто приходят с «двойным» кодированием — &laquo; вместо «: режим декодирования, применённый дважды, возвращает читаемый текст.
Вопросы и ответы
Какие символы обязательно кодировать в HTML?
Пять: амперсанд & (&), меньше < (<), больше > (>) в тексте, двойную кавычку " (") и апостроф ' (') внутри атрибутов. Без этого браузер примет текст за разметку, а пользовательский ввод превратится в XSS-уязвимость. Остальные сущности — типографика и удобство, а не безопасность.
Нужно ли кодировать кириллицу как П?
При кодировке страницы UTF-8 — нет: русские буквы хранятся напрямую и занимают 2 байта, а сущность П — 7. Числовая форма нужна, если файл сохранён в Windows-1251 или ASCII, при вставке в старые CMS и в письмах, где кодировка может «поехать». Включите флажок «все не-ASCII» для такого случая.
Как поставить кавычки-ёлочки и тире в HTML?
Ёлочки — « и », лапки — „ и “, длинное тире — —, короткое — –, многоточие — …, неразрывный пробел — . В UTF-8 те же знаки можно вставить напрямую («», —, …), сущности лишь страхуют от проблем с кодировкой и помогают отличить неразрывный пробел от обычного в коде.
Чем отличаются П и П?
Это одна и та же буква «П»: первая запись — десятичный код Unicode, вторая — шестнадцатеричный (41F = 1055). Обе формы равноправны и поддерживаются всеми браузерами. Именованные сущности ( , ©) — третья форма, но имена есть лишь у 2 231 символа, а числами записывается любой из почти 155 000.
Почему — превращается в тире, а не в управляющий символ?
Коды 128–159 в HTML трактуются по таблице Windows-1252, а не Unicode: — — это длинное тире, – — короткое, … — многоточие, “ и ” — кавычки. Такие коды остались от старых редакторов, инструмент декодирует их как браузер, а в новом коде используйте — или сам символ.
Источники и методика
Обновлено: