HTML-сущности - это специальные коды вида < или ©, которыми в тексте страницы записывают символы, которые браузер иначе принял бы за разметку (<, >, &) или которые неудобно набрать с клавиатуры (символ copyright, неразрывный пробел). Без сущности такой символ может отобразиться не так, как задумано - а иногда браузер молча подставит вместо него совсем другой символ.
В этом уроке
Присмотрись к результату справа: вместо ожидаемого © там "©right;" - лишний хвост никуда не делся. Замени ©right; на правильный © - хвост исчезнет, останется чистый ©.
Зачем нужны HTML-сущности: как избежать поломки разметки
Символы <, > и & зарезервированы под саму разметку. Одиночный символ перед пробелом или цифрой современный браузер обычно показывает как есть - но стоит написать что-то похожее на имя настоящей сущности, и браузер попытается прочитать это как код символа: он ищет самое длинное совпадение с известным ему именем и подставляет символ вместо него, даже если очевидно, что имелся в виду обычный текст. HTML-сущность - это способ заранее и однозначно сказать браузеру, какой именно символ нужен.
<p>Все права защищены © 2026</p> - браузер знает имя "copy" целиком, получится чистый символ ©.
<p>Все права защищены ©right; 2026</p> - такого имени сущности не существует, но браузер узнаёт первые четыре буквы ("copy") и молча подставляет ©, а "right;" остаётся лишним текстом рядом с ним.
< и &, а раздел о наборе символов документа ссылается на набор "Added Latin 1" - готовый список мнемонических кодов для символов Latin-1, которые неудобно набрать в чистом ASCII. Источник.
Как писать HTML-сущности: именованные и числовые коды
У сущности есть два способа записи: именованная (&, ©, - легче читать в коде) и числовая, decimal (©) или hex (©) - обе всегда указывают на один и тот же символ по его коду в Unicode, а не на конкретное имя. Числовой код работает для абсолютно любого символа Unicode, даже если у него нет собственного имени; живой стандарт WHATWG сегодня определяет более 2000 именованных сущностей, но помнить их все не нужно - в тексте обычно хватает десятка самых частых.
- неразрывный пробел: в отличие от обычного пробела, браузер не схлопывает его при повторах и никогда не переносит строку в этом месте (удобно между числом и единицей: 10 кг).
' для одиночной кавычки в обычном тексте - в официальный список именованных сущностей HTML 4.0 эта запись не входила и в старых браузерах могла не сработать; для кавычки надёжнее использовать числовой код ' или просто оставить кавычку как есть - вне атрибута она не опасна.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Писать сущность наугад, по смыслу слова (например, ©right; вместо ©) | Браузер узнаёт только реально существующее имя целиком или его начало - лишний хвост остаётся рядом как обычный текст | Сверяться со шпаргалкой или проверять символ в блокноте перед публикацией |
| Использовать ' для одиночной кавычки, считая её такой же надёжной, как & | В HTML4 этой сущности официально не было - в старых браузерах могла не отобразиться | Использовать числовой код ' или не экранировать кавычку вне атрибута |
| Вставлять "сырую" ссылку с параметрами (?a=1&b=2) прямо в текст поста, а не в атрибут href | Амперсанд перед похожим на сущность именем параметра может быть понят парсером не так, как задумано | Каждый амперсанд в адресе, который печатается как текст, писать как & |
| Ставить обычный пробел там, где текст обязательно должен остаться на одной строке ("10 кг") | Браузер схлопывает повторные пробелы и может перенести строку в неподходящем месте | Использовать между словами, которые нельзя разрывать переносом |
Шпаргалка
| Сущность | Символ и назначение |
|---|---|
| < / > | < и > - разметочные скобки |
| & | & - амперсанд |
| " / ' | Двойная и одиночная кавычка (важно внутри атрибутов) |
| | Неразрывный пробел - не схлопывается, не переносится |
| © / — | © и длинное тире — |
| © / © | Числовой код (decimal / hex) - работает для любого символа Unicode |
Коротко: отвечаем на вопросы
Что такое и когда его использовать?
Это неразрывный пробел - в отличие от обычного, браузер не переносит строку в этом месте и не схлопывает его при повторах. Используется там, где два слова не должны разъезжаться по разным строкам - например, между числом и сокращением единицы измерения или между инициалом и фамилией.
Нужно ли экранировать амперсанд в ссылке (href)?
Формально да - по спецификации амперсанд в атрибуте href стоит записывать как &, если после него в адресе идёт ещё один параметр. Современные браузеры в большинстве случаев прощают необработанный амперсанд перед знаком равенства, но полагаться на это не стоит - экранирование остаётся правилом хорошего тона и подстраховкой от неожиданного поведения.
Можно ли использовать ' для апострофа?
Работать будет в любом современном браузере, но исторически эта запись не входила в официальный список именованных сущностей HTML 4.0 - её добавили только в HTML5. Если важна совместимость со старыми браузерами, надёжнее числовой код '.
Всегда ли нужно экранировать амперсанд в обычном тексте?
Строго по спецификации - только если после амперсанда идут буквы или цифры и точка с запятой, совпадающие с именем настоящей сущности: такой амперсанд считается "неоднозначным". Простое "Текст & текст" браузер разберёт правильно и без экранирования, но привычка экранировать амперсанд всегда проще, чем каждый раз проверять, не похож ли следующий кусок текста на имя сущности.
