ПаветтаТаблица HTML-символов
Спецсимволы в HTML записываются тремя способами: сам символ, мнемоника вида — и числовой код вида —.
Экранирование текста
Три записи одного символа
Спецсимволы в HTML записываются тремя способами: сам символ, мнемоника вида — и числовой код вида —. Все три дают одинаковый результат, разница в надёжности и читаемости. Инструмент собирает символы по группам — типографика, пробелы и переносы, валюты, математика, стрелки, греческие буквы, служебные знаки — и отдаёт любую из трёх записей.
Экранировать обязательно нужно всего четыре знака: меньше, больше, амперсанд и кавычку внутри атрибута. Остальные символы в файле с кодировкой UTF-8 можно писать напрямую, и так даже лучше — разметка остаётся читаемой, а поиск по тексту работает.
Отдельная группа — невидимые символы. Неразрывный пробел держит вместе число и единицу, мягкий перенос подсказывает браузеру место разрыва длинного слова, а узкий неразрывный пробел разделяет разряды в числах. Их нельзя увидеть в коде, и мнемоника здесь надёжнее самого символа.
| Символ | Мнемоника | Код | Где нужен |
|---|---|---|---|
| — | — | — | Тире в предложении |
| «» | « » | « | Кавычки в русском тексте |
| | |   | Неразрывный пробел |
| & | & | & | Амперсанд в тексте |
| × | × | × | Знак умножения |
От SGML и машинописи до Unicode
Мнемоники достались HTML по наследству от языка разметки SGML, на котором он был основан. В версии HTML 2.0 1995 года их было немного, к четвёртой версии список разросся до двухсот пятидесяти двух имён, включая греческий алфавит и математические знаки. Сегодняшний стандарт знает больше двух тысяч мнемоник, и почти все они избыточны.
Параллельно шла работа над Unicode: первая версия вышла в 1991 году и обещала единое место для всех письменностей мира. До неё каждая кодировка описывала свой набор из двухсот пятидесяти шести знаков, и русский текст в чужой таблице превращался в набор латинских букв со значками — те самые кракозябры.
Многие привычки набора идут от пишущей машинки. На её клавиатуре не было ни длинного тире, ни типографских кавычек, ни знака умножения, и их заменяли дефисом, прямыми штрихами и латинской буквой x. Эти замены дожили до экрана, хотя ограничение исчезло полвека назад. Сегодняшний стандарт Unicode описывает больше ста пятидесяти тысяч знаков, включая исторические письменности и эмодзи, и продолжает пополняться раз в год.
Что писать символом, а что мнемоникой
Найдите символ поиском по названию или выберите группу и скопируйте нужную запись. Для видимых знаков вроде тире и кавычек берите сам символ: файл в UTF-8 покажет его правильно, а код останется читаемым. Для невидимых пробелов берите мнемонику, иначе через неделю никто не поймёт, что там за странный отступ.
Четыре обязательных к экранированию знака подставляйте всегда, особенно если текст приходит от пользователя или из базы: незакрытая угловая скобка ломает разметку, а амперсанд в адресе ссылки может съесть часть параметров.
В русском тексте держите набор из четырёх знаков: длинное тире, кавычки-ёлочки, неразрывный пробел перед единицами и после коротких предлогов, узкий пробел в разрядах чисел. Этого хватает, чтобы текст выглядел набранным, как в книге. Расставить их по готовому тексту поможет типограф.
Проверяйте результат в готовой странице. Мнемоника внутри атрибута или в поле, которое потом снова экранируется, превращается в видимый текст вида ampersand-mdash-точка-с-запятой — самая частая ошибка при переносе текста между системами.
| Способов записи | три |
| Обязательно экранировать | четыре знака |
| Мнемоник в HTML 4 | 252 |
| Мнемоник сегодня | больше 2000 |
| Первая версия Unicode | 1991 |
| Длинное тире | U+2014 |
| Неразрывный пробел | U+00A0 |
| Кодировка файла | UTF-8 |
Как пользоваться
Работают все три, но у каждого своя область: мнемоники читаемее в коде, числовые коды выручают там, где мнемоники нет, а прямая вставка символа требует, чтобы у страницы была объявлена кодировка UTF-8. Здесь собрана таблица ходовых символов с поиском по названию: типографика, валюты, математика, стрелки, знаки и греческие буквы. Любую из трёх записей можно скопировать кликом. Ниже — отдельный блок для экранирования: он превращает произвольный текст в безопасный HTML и разворачивает обратно.
- Поиском по названию, по мнемонике или по самому символу. Фильтр сверху отбирает группу.
- Символ, мнемоника или числовой код — переключателем.
- Клик по карточке копирует запись в выбранном формате.
- Блок внизу экранирует произвольный текст в HTML и разворачивает обратно.
Частые вопросы
Какие символы обязательно экранировать
Только четыре: амперсанд, левую и правую угловые скобки и кавычку внутри значения атрибута. Всё остальное экранируется по желанию. Амперсанд важнее всех: незакрытый & в тексте браузер попытается прочитать как начало мнемоники.
Мнемоника или числовой код
Мнемоника читаемее: — в коде понятнее, чем —. Но именованных мнемоник около двух с половиной тысяч, а символов в Unicode — сотни тысяч, поэтому для редких знаков остаётся только числовой код. Для рубля, например, мнемоники нет вовсе, только ₽.
Можно ли вставлять символы напрямую
Да, если у страницы объявлена кодировка UTF-8 через мета-тег и файл в ней же сохранён. Тогда тире, кавычки-ёлочки и стрелки пишутся как есть, и код читается лучше. Мнемоники остаются нужны для четырёх служебных символов и для неразрывного пробела, который иначе неотличим от обычного.
Чем отличаются виды тире
Короткое тире используется в диапазонах чисел: 10–15 минут. Длинное — в предложениях вместо пропущенного сказуемого и в прямой речи. Дефис соединяет части слова и тире не является. Смешивать их — самая частая типографская ошибка на сайтах, и она заметна.
Зачем неразрывный пробел
Чтобы строка не переносилась в неудачном месте. Его ставят между числом и единицей, после коротких предлогов и союзов, внутри инициалов и в номерах. Правило простое: если перенос в этом месте выглядит как ошибка, нужен неразрывный пробел.
Почему мнемоника показывается пустой у части символов
Потому что именованной мнемоники у этого символа в спецификации нет. Так с рублём, тенге, значком номера и большинством пиктограмм. В таких случаях остаётся числовой код либо прямая вставка символа.
Спросите нейросети об инструменте
Больше возможностей: Нейросеть для кода, написать, найти ошибку, объяснить.
Похожие инструменты
Кавычки-ёлочки «», дефис → тире, неразрывные пробелы после предлогов, чистка двойных пробелов. Аккуратная типографика для сайта.
ОткрытьВеб-безопасные цветаТаблица 216 безопасных цветов с кодами HEX и RGB, поиск и подбор ближайшего безопасного цвета к любому вашему.
ОткрытьПалитра flat-цветовГотовые палитры плоского дизайна: Flat UI и три ступени Material. Названия, коды, контраст текста и выгрузка в CSS.
ОткрытьКроссворды онлайнГотовый кроссворд по теме: шестнадцать наборов от детских слов до городов и стран. Разгадывается прямо на странице с проверкой, подсказками и печатью, каждый раз новая сетка.
ОткрытьРассадка гостейПлан рассадки гостей на свадьбу и банкет: список с компаниями, столы и главный стол, авторассадка с парами «не сажать вместе», ручные перестановки, план, карточки на столы и список для входа.
ОткрытьВыкройка юбки по меркамВыкройка юбки по вашим меркам: солнце, полусолнце, клёш, прямая, карандаш, трапеция и на резинке. Чертёж с размерами, печать 1:1 на листах А4 и расход ткани под её ширину.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.