Кодировщик / декодер HTML-сущностей
Преобразуйте обычный текст в HTML-сущности (&, <, ©) или декодируйте сущности обратно в читаемые символы. Вставьте строку, выберите кодирование или декодирование и скопируйте результат.
Кодирование и декодирование HTML-сущностей
Формула HTML-сущностей
Где:
- \(E(c)\) — результат кодирования для одного входного символа \(c\)
- \(S\) — пять специальных символов HTML:
&,<,>,"и' - \(n(c)\) — именованная сущность для символа, например
&превращается в& - \(r(c)\) — десятичная числовая ссылка:
&#, за которой следуют кодовая точка Юникода и точка с запятой, например©превращается в© - \(\mathrm{cp}(c)\) — кодовая точка Юникода символа \(c\); эта ветка применяется только при включённом преобразовании символов вне ASCII
Кодирование заменяет каждый специальный символ HTML его именованной сущностью и, по желанию, каждый символ с кодовой точкой выше 127 — числовой ссылкой. Декодирование — обратная операция: именованные, десятичные и шестнадцатеричные ссылки преобразуются обратно в символы, которые они обозначают.
HTML-сущности — пример вычисления
Пример: кодирование текста по умолчанию Tom & Jerry said "5 < 10" — it's © WPCalc с опцией «Символы вне ASCII», установленной в значение «Преобразовать в числовые сущности».
\[ \text{длинное тире: кодовая точка } 8212 \;\to\; \text{числовая ссылка}, \qquad \text{знак копирайта: кодовая точка } 169 \;\to\; \text{числовая ссылка} \]
Результат: Tom & Jerry said "5 < 10" — it's © WPCalc
Сводка сущностей перечисляет шесть различных преобразований: & → &, " → " (дважды), < → <, ' → ', — → — и © → ©.
Как пользоваться калькулятором HTML-сущностей
- Вставьте содержимое в поле Текст или HTML-кодированная строка — обычный текст для кодирования или текст, содержащий сущности вроде
&,<или©, для декодирования. - Установите Операцию в значение Кодировать → HTML-сущности или Декодировать сущности → обычный текст.
- При кодировании выберите, как обрабатываются Символы вне ASCII (только для кодирования): Преобразовать в числовые сущности (© → ©) или Оставить без изменений. При декодировании этот параметр игнорируется.
- Прочитайте результат в разделе Преобразованный вывод и скопируйте его. Сводка сущностей перечисляет каждое выполненное преобразование со счётчиком для каждого; при декодировании она также отмечает все нераспознанные сущности, оставленные без изменений.
Что такое HTML-сущности?
HTML-сущность — это escape-последовательность, обозначающая один символ. Она существует в трёх равнозначных формах: именованные ссылки, такие как & и ©, десятичные числовые ссылки, такие как ©, и шестнадцатеричные ссылки, такие как ©. Все три варианта знака копирайта отображаются в браузере абсолютно одинаково, поэтому их можно свободно смешивать.
Сущности существуют потому, что несколько символов имеют структурное значение в HTML. Амперсанд начинает ссылку, а < и > ограничивают теги. «Сырой» знак < в вашем тексте может быть разобран как начало тега и незаметно «поглотить» следующие за ним слова, а случайный & делает разметку некорректной. Замена этих символов сущностями гарантирует, что они будут отображены как обычный текст.
Экранирование — это также базовая мера безопасности. Всякий раз, когда введённые пользователем данные выводятся обратно на страницу — комментарий, поисковый запрос, сообщение об ошибке — неэкранированный < позволяет злоумышленнику внедрить разметку или скрипты. Кодирование пяти специальных символов нейтрализует самые распространённые пути инъекций. У числовых ссылок есть дополнительное преимущество: они позволяют встроить любой символ Юникода, от длинных тире до эмодзи, в файл, который в остальном является чистым ASCII.
При декодировании имейте в виду, что превращается в неразрывный пробел (U+00A0), который выглядит как обычный пробел, но ведёт себя иначе при переносе строк и поиске. Декодер распознаёт наиболее распространённые именованные ссылки HTML5, а также все корректные числовые ссылки; всё, что он не распознаёт, остаётся без изменений и отображается под сводкой.
Справочник распространённых HTML-сущностей
| Символ | Именованная | Десятичная | Типичное использование |
|---|---|---|---|
| & | & |
& |
Строки запроса, значения атрибутов |
| < | < |
< |
Примеры кода, сравнения в математике |
| > | > |
> |
Примеры кода, закрывающие скобки |
| " | " |
" |
Двойные кавычки в атрибутах |
| ' | ' |
' |
Апострофы (форма, совместимая с HTML4) |
| © | © |
© |
Уведомления об авторских правах |
| — | — |
— |
Длинное тире в пунктуации |
| … | … |
… |
Многоточие |
| ™ | ™ |
™ |
Знак товарного знака |
| (пробел) | |
|
Неразрывный пробел |
| € | € |
€ |
Денежные суммы |
| ° | ° |
° |
Температуры, углы |
Советы и ограничения
- Избегайте двойного кодирования: запуск кодировщика на тексте, уже содержащем сущности, превращает
&в&amp;. Сначала декодируйте, а затем кодируйте заново, если нужна однократная обработка. - Апостроф кодируется как
', а не как', появившийся только в HTML5, поэтому результат остаётся корректным и в документах HTML 4. - Кодирование заменяет только пять специальных символов HTML и (опционально) символы вне ASCII; латинские буквы с диакритикой затрагиваются только при включённой опции числовых ссылок.
- HTML-сущности — это не URL-кодирование. Процентные экранирования вроде
%26относятся к URL — для них используйте URL-кодировщик или URL-декодировщик, а не этот инструмент. - Чтобы узнать кодовую точку отдельного символа перед преобразованием, ASCII-конвертер показывает числовое значение напрямую.
- Если вам нужно транспортно-безопасное представление целых блоков текста, а не посимвольное экранирование, Base64-кодировщик обычно подходит лучше.
Часто задаваемые вопросы
Как закодировать HTML-сущности вручную, без инструмента?
Просмотрите текст в поисках пяти специальных символов и замените каждый: & → &, → >, " → ", ' → '. Для других символов найдите кодовую точку Юникода символа и оберните её как &#...; с точкой с запятой — например, у © кодовая точка 169, поэтому вы пишете ©. Подходит и шестнадцатеричная форма: © отображается идентично. Всегда кодируйте амперсанды первыми; если сначала заменить < и останется &, результат всё ещё может запутать парсер.
Почему мой текст отображается буквально как < вместо знака «меньше»?
Ваш текст был кодирован дважды: < превратился в <, а затем & в этой сущности был закодирован снова, в результате получился <. Исправьте это двойным декодированием — первый проход даёт <, второй даёт <. Чтобы избежать проблемы, декодируйте существующие сущности перед повторным кодированием и никогда не запускайте кодировщик на уже экранированной строке. Сводка сущностей поможет вам обнаружить дважды закодированные записи &.
В чём разница между HTML-сущностями и URL-кодированием (процентным кодированием)?
Они решают разные задачи. HTML-сущности (&, ©) экранируют символы, чтобы браузер безопасно отображал их внутри веб-страницы. Процентные экранирования (%26, %C2%A9) экранируют символы для использования в URL и строках запроса, где пробелы, & и = имеют специальное значение. Если вставить %26 в HTML-страницу, он отобразится буквально как %26, а не как амперсанд. Используйте этот инструмент для разметки, а URL-кодировщик — для ссылок.
Какие символы нужно всегда кодировать, чтобы HTML был безопасным?
Как минимум амперсанд и знаки «меньше» и «больше», потому что & начинает ссылку на сущность, а < открывает тег. Экранирование кавычек важно в основном внутри значений атрибутов: " → " и ' → ' предотвращают преждевременное завершение значения атрибута. При отображении пользовательского контента — комментариев, поисковых запросов, значений форм — кодирование этих символов блокирует самые распространённые техники инъекций HTML и скриптов, поскольку любой тег, написанный злоумышленником, отображается как безвредный видимый текст.
Стоит ли преобразовывать символы вне ASCII, например é, © или —, в числовые сущности?
Это зависит от кодировки вашего файла. Если документ объявлен как UTF-8 (charset=utf-8), буквы с диакритикой, тире и символы можно оставить как есть — браузеры обрабатывают их нативно, а исходный код остаётся читаемым. Преобразование их в числовые ссылки, такие как ©, гарантирует, что файл будет чистым ASCII, что помогает, когда кодировка неизвестна, при отправке HTML по электронной почте или при вставке в системы, портящие Юникод. Эмодзи тоже отлично работают в виде числовых ссылок с полной кодовой точкой.
Почему пробел ведёт себя странно после декодирования моего текста?
Потому что декодируется в неразрывный пробел (U+00A0), а не в обычный пробел (U+0020). Визуально они выглядят одинаково, но неразрывный вариант запрещает перенос строки в этой точке, может нарушать сравнение и поиск строк, а также мешает коду, который обрезает или разбивает строки по пробелам. Если декодированный текст содержит невидимые различия, попробуйте заменить U+00A0 на обычные пробелы — большинство текстовых редакторов умеют искать этот символ напрямую или по его числовой форме.
В чём разница между ', ' и ' для апострофа?
Все три обозначают символ одинарной кавычки. ' — десятичная числовая ссылка, а ' — её шестнадцатеричный эквивалент; обе действительны везде. ' — именованная ссылка, появившаяся только в HTML5; старые парсеры HTML 4 её не распознают, поэтому многие кодировщики (включая этот) выдают числовую форму для максимальной совместимости. На практике любой современный браузер отображает все три идентично, поэтому можно свободно декодировать и кодировать заново без потери символа.