Когда нужно поставить кавычки-ёлочки « » вместо машинописных " ", длинное тире — вместо дефиса, знак евро € или копирайт ©, разработчик упирается в проблему: на клавиатуре этих символов нет. В HTML это решается двумя способами: HTML-сущностями (мнемонические имена вроде « или числовые коды) и прямой вставкой UTF-8-символов. В CSS — через шестнадцатеричный код в свойстве content у псевдоэлементов.

Ниже — готовые таблицы кодов, разбитые по категориям, и краткий разбор когда какой способ удобнее. Можно копировать прямо отсюда.

Как вставить спецсимвол в HTML

Любой спецсимвол в HTML имеет своё имя (мнемоническая сущность) и/или числовой код. Браузер при рендере увидит сущность и нарисует символ:

<p>Цена — 30&euro;.</p>
<p>Цена — 30&#8364;.</p>     <!-- то же самое числовым кодом -->
<p>Цена — 30€.</p>        <!-- прямой UTF-8 символ -->

Все три варианта выведут на странице одно и то же. Различаются они тем, как код выглядит в исходнике и как ведёт себя при разной кодировке файла.

• Именованная сущность («, —, €) — самый читаемый вариант. В исходнике понятно, что за символ — даже если файл сохранён в неправильной кодировке. Минус: список имён ограничен стандартом, для редкого символа имени может не быть.
• Числовой код («, —, €) — работает для любого символа Unicode (есть ~143 тысячи символов). Менее читаемо, зато универсально. Шестнадцатеричная форма — € вместо €.
• Прямой UTF-8 (€, —, «) — самый короткий способ, читается естественно. Работает, если файл сохранён в UTF-8 и в шапке указано <meta charset="utf-8">. На большинстве современных проектов это так по умолчанию.

Какой выбрать? Для общих текстов лучше всего прямой UTF-8 — короче и нативнее. Для символов, которые легко спутать в исходнике (неразрывный пробел &nbsp;, тонкий пробел &thinsp;, soft hyphen &shy;) — именованные сущности, чтобы было видно где они стоят. Числовые коды — на крайний случай.

Как вставить спецсимвол в CSS

В CSS спецсимвол можно вставить только в одном месте — в значение свойства content у псевдоэлементов ::before и ::after. Формат другой — шестнадцатеричный код Unicode с экранированием через обратный слэш:

.price::after {
  content: '\20AC';  /* € */
}

.note::before {
  content: '\2014\00A0';  /* — (em dash) + неразрывный пробел */
}

Где взять шестнадцатеричный код? В таблицах ниже — правая колонка с обратными слэшами. Или в DevTools: открываем Computed, ищем псевдоэлемент с символом, и копируем его escape-форму.

Зачем вообще вставлять символ через CSS? Обычно для декоративных значков — добавить стрелку рядом со ссылкой, маркер списка, единицу измерения после числа — не загромождая HTML.

/* стрелка после внешней ссылки */
a[target="_blank"]::after {
  content: '\00A0\2197';  /* nbsp + ↗ */
  font-size: 0.85em;
}

/* маркер «выполнено» в чек-листе */
.done::before {
  content: '\2713\00A0';  /* ✓ + nbsp */
  color: green;
}

Дальше — таблицы по категориям. В левой части — визуальный символ. В правой — HTML-сущность и CSS-код для копирования.

Кавычки

В русской типографике основные кавычки — ёлочки « ». Внутренние, когда кавычки нужны внутри кавычек — лапки „ “. Прямые двойные "..." в типографических текстах не используются — это машинописный пережиток.

Тире, дефисы и знаки препинания

Самая частая путаница — дефис (-), короткое тире (–) и длинное тире (—). Дефис — в составных словах (по-моему). Короткое тире — в диапазонах (стр. 10–15, понедельник–пятница). Длинное тире — для пауз в предложении и заменителя «это». В русском больше всего нужен &mdash;.

Пробелы (видимые и невидимые)

Кроме обычного пробела в HTML есть ещё несколько типов с разной шириной и поведением. Самый частый — неразрывный пробел &nbsp;: между числом и единицей (10&nbsp;кг), между предлогом и словом (в&nbsp;дом), чтобы они не разрывались переносом строки.

Закрашенная часть в таблице ниже показывает реальную ширину пробела относительно других.

* - символ &zwj; позволяет сделать склейку (лигатуру) соседних символов
** - символ &zwnj; запрещает склеивать соседние символы

Буллиты и маркеры

Используются для своих чек-листов, маркированных списков (когда хочется не стандартный <ul>), декоративных разделителей.

Валюты

Между числом и знаком валюты ставится неразрывный пробел &nbsp;, чтобы при переносе строки сумма и знак остались вместе. Правильно: 100&nbsp;€. Неправильно: 100€ вплотную или с обычным пробелом.

Дополнительные текстовые символы

Символы, которые не подходят под другие категории: знак копирайта ©, торговой марки ™, параграфа §, градуса °, многоточие … (одним символом, не три точки!).

Стрелки

Стрелки в HTML — для навигационных подсказок, индикаторов внешних ссылок, кнопок-аккордеонов. Чаще всего применяются &rarr; (вправо →) и &larr; (влево ←).

Математические символы

Математика и научная нотация — знак умножения &times; (правильнее, чем латинская x), деление &divide;, проценты ‰, бесконечность ∞.

Буквы различных алфавитов

Греческий алфавит — для математики и физики (α-частицы, λ в спектре, Σ в формулах). Умляуты — в немецких, скандинавских и других европейских именах и словах.

Подводные камни и accessibility

Декоративные символы не озвучивает скрин-ридер. ARIA (Web Accessibility Initiative — набор правил доступности) рекомендует прятать чисто декоративные значки от программ голосового чтения. Если стрелка в кнопке — визуальный декор, а не часть текста, оборачивай её в aria-hidden="true":

<button>
  Следующая
  <span aria-hidden="true">→</span>
</button>

Без этого скрин-ридер прочитает кнопку как «Следующая, стрелка вправо» — шум для пользователя.

Не все шрифты содержат все символы. Редкие математические или старославянские символы могут не отобразиться, если в установленных шрифтах их нет. Браузер покажет квадратик-плейсхолдер или попытается найти системный fallback. Перед использованием экзотических символов проверь в разных браузерах.

Кодировка файла должна быть UTF-8. Если файл сохранён в Windows-1251 или другой однобайтовой кодировке, прямой ввод € или « в HTML сломается. Используй HTML-сущности или числовые коды — они работают независимо от кодировки исходника. Проверь шапку: <meta charset="utf-8"> должна стоять до любого текстового контента.

В CSS content не индексируется поисковиками. Если важный текст вставлен через ::before/::after, Google его не увидит. Декоративные значки — ок, основной контент — всегда в HTML.

Итог

Спецсимволы в HTML вставляются тремя способами: именованной сущностью (&laquo;), числовым кодом (&#171;) или прямым UTF-8-символом («). В CSS — через шестнадцатеричный escape в свойстве content у псевдоэлементов. Таблицы выше покрывают самые частые случаи: кавычки, тире, пробелы, валюту, стрелки, математику, греческий алфавит и умляуты.

Главные практические правила: между числом и единицей или валютой — неразрывный пробел &nbsp;; в русском тексте — ёлочки « », не машинописные кавычки; длинное тире &mdash; для пауз и заменителя «это»; декоративные символы скрывать от скрин-ридеров через aria-hidden.