#13. Специальные символы:  , <, & и другие мнемоники

В уроке #12 в подвале страницы мы написали © и пообещали объяснить. Настал черёд спецсимволов — мнемоник.

Зачем они нужны

Во-первых, некоторые символы заняты самим HTML: если написать в тексте <, браузер решит, что начинается тег, и «съест» кусок текста. Во-вторых, часть символов не набрать с клавиатуры: ©, —, неразрывный пробел.

Как записываются

Мнемоника — это амперсанд, имя и точка с запятой: &имя;. Например, < превращается в <, а © — в ©. Точка с запятой на конце обязательна.

Пример: показать тег как текст

Чтобы на странице отобразился текст «тег <b>», угловые скобки заменяют мнемониками:

<p>Тег &lt;b&gt; делает текст жирным</p>

На странице это выглядит так: Тег <b> делает текст жирным — именно так мы показываем код во всех уроках этого курса.

Таблица основных мнемоник

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

В уроке #5 мы видели, что браузер схлопывает лишние пробелы и переносы.   — пробел, который не схлопывается и не даёт разорвать строку:

<p>Цена: 100&nbsp;руб.</p>

Теперь «100 руб.» при узком окне всегда останется в одной строке — число и единица измерения не расстанутся.

Как показать саму мнемонику

Небольшая рекурсия: чтобы вывести текст «&nbsp;», амперсанд заменяют на &:

<p>Вот мнемоника: &amp;nbsp;</p>

На странице это выглядит так: Вот мнемоника: &nbsp;

У каждого символа есть и числовой код вида © — он выводит то же, что ©, но именованные мнемоники запоминать проще.

Практика

Создайте страницу с абзацем, в котором: буквально показан код какого-нибудь тега (как в уроках курса), есть цена с неразрывным пробелом, копирайт с © и длинное тире —. Сузьте окно браузера и убедитесь, что «100 руб.» не разрывается.