Специальные символы

Некоторые символы в HTML служебные: < начинает тег, а & — особый код. Если написать их в тексте как есть, браузер может понять их неправильно. Для таких случаев есть мнемоники (по-английски entities) — короткие коды, которые браузер заменяет нужным символом.

Почему нельзя просто написать <

Встретив знак <, браузер считает, что дальше идёт тег:

<p>Если a <b и b> c, то a > c.</p>

Браузер принял <b и b> за тег жирного текста: часть строки пропала, а остаток стал жирным.

Мнемоники для служебных знаков

Мнемоника начинается с & и заканчивается точкой с запятой. Вместо < пишут <, вместо & — &:

<p>Если a &lt; b и b &lt; c, то a &lt; c.</p>
<p>Абзац размечают тегом &lt;p&gt;.</p>
<p>Кофе &amp; выпечка</p>

" нужна внутри значения атрибута, которое само записано в двойных кавычках: title="Кофейня "Зерно"".

Неразрывный пробел

  (non-breaking space) — пробел, на котором браузер не переносит строку. Его ставят между числом и единицей измерения, чтобы «100» не осталось в конце одной строки, а «км» — в начале следующей:

<style>
  p { width: 175px; padding: 4px; border: 1px solid silver; }
</style>
 
<p>До города осталось 100 км пути.</p>
<p>До города осталось 100&nbsp;км пути.</p>

В первом абзаце число и единица разъехались по разным строкам, во втором перенеслись вместе.

Типографские знаки

У частых знаков есть мнемоники с понятными именами:

<p>&copy; 2026 Кофейня &laquo;Зерно&raquo;</p>
<p>Капучино &mdash; 4&nbsp;&euro;</p>

Символ по номеру

У каждого символа в таблице Юникод есть номер. Его можно записать десятичным числом после &# или шестнадцатеричным после &#x:

<p>&#169; и &#xA9; — один и тот же знак</p>
<p>Погода: &#9728; &#9729; &#9731;</p>

Номера символов можно найти в справочниках Юникода.

Кодировка UTF-8

Если в <head> есть <meta charset="utf-8"> (как в уроке о структуре документа), почти любой символ можно набрать прямо в коде: ©, —, €, ✓. Поэтому сегодня мнемоники нужны в основном для < и &, а также для невидимых знаков вроде   — в коде его не отличить от обычного пробела:

<p>© 2026 — цена 4 € ✓</p>

Частая ошибка

Отступы из цепочки  . Браузер схлопывает обычные пробелы, и кажется, что неразрывные — удобный способ сдвинуть текст. Но такой отступ зависит от шрифта и ломается на узком экране. Отступы задают в CSS:

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Отступ из шести &amp;nbsp;</p>
<p style="text-indent: 2em;">Отступ через CSS-свойство text-indent</p>

text-indent задаёт отступ первой строки, а padding и margin — отступы блока; они разобраны в главе об основах CSS.