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

В тексте HTML-документа разрешено применять не все символы, которые вы видите на клавиатуре. Впрочем, это логично. Если каждый тег начинается с символа (<) и заканчивается символом (>), то вполне логично, что эти символы нельзя указывать внутри обычного текста. Эти символы имеют особое значение в HTML-документах. Когда браузер их видит он думает, что это HTML-теги и пытается интерпретировать их как таковые.
Для решения проблемы с добавлением символов, запрещенных к вводу в тексте HTML-документа, был разработан набор спецсимволов – последовательностей, которые заменяют запрещенные для ввода с клавиатуры символы. Символы, которые не присутствуют на вашей клавиатуре, также могут быть заменены спецсимволами. Каждая такая последовательность (ссылка-мнемоника) обязательно начинается с символа амперсанда (&) и заканчиваются точкой с запятой (;). Между (&) и (;) можно ввести:

  • имя спецсимвола (&имя;);
  • числовой код, который вводится после знака ‰(#), то есть при наборе спецсимвола путем указания его числового кода нужно использовать следующую запись: (&#код;);
Числовой код может быть представлен в десятичном или шестнадцатеричном виде.
Например, чтобы отобразить знак меньше (<) мы должны написать: &lt; (имя символа) или &#60; (числовой код в десятичной системе) или &#x0003C; (числовой код в шестнадцатиричной системе).

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

Основное назначение неразрывного пробела (&nbsp;) (от non-breaking space) — разделять слова, но запрещать в этом месте переход на новую строку. Поскольку размер окна браузера непостоянен, переход на новую строку в абзаце происходит автоматически. При этом браузер будет разрывать строку в любом месте, где стоит пробел или дефис. Согласно правилам орфографии существуют языковые конструкции, которые нельзя разрывать. К конструкциям с неразрывным пробелом, например, можно отнести:

  • фамилии с инициалами;
  • длинные тире с предшествующим им словом;
  • односложные слова с последующим словом;
  • цифры с последующими единицами измерения.
В этих случаях в HTML-коде обычно используется неразрывный пробел (&nbsp;). Такой пробел будет выглядеть как обычный, но он гарантирует, что слова, между которыми он стоит, при любых обстоятельствах будут находиться на одной строке.

Примеры:

  • § 7
  • 15 м/с
  • 100 км/час

Как вы уже знаете, в HTML несколько идущих подряд обычных пробелов заменяются одним пробелом. Если вы напишете 10 пробелов в тексте, браузер удалит 9 из них. Чтобы добавить в тексте реальные пробелы, вы можете использовать неразрывный пробел (&nbsp;).

Неразрывный дефис (&#8209;), как и неразрывный пробел не допускает разрыв текста в месте его использования.

Кавычки.

В полиграфии существует три вида кавычек: двойные угловые кавычки или "елочки" (« »), типографские кавычки (“ ”) и рукописные "лапки" („ ”). При работе с программными кодами вы будете пользоваться двойными прямыми кавычками (" ") и одинарными прямыми кавычками (' ').
По традиции в русском языке основным видом кавычек считаются “елочки”. В HTML "елочкам" соответствуют символы &laquo; и &raquo;. Во многих изданиях вместо "елочек" используются также типографские кавычки и двойные прямые кавычки.
Левой и правой типографским кавычкам соответствуют символы &ldquo; и &rdquo; соответственно, а нижней левой кавычке — &bdquo;.
Прямым двойным кавычкам соответствует спецсимвол &quot;.

Применение спецсимволов кавычек показано в следующем примере:

Пример: Использование кавычек

Дефис и тире.

В полиграфии существует три очень похожих друг на друга знака: длинное тире, короткое тире и дефис. Из них на компьютерной клавиатуре есть только один — это дефис. Именно его обычно и используют во всех случаях, когда в тексте нужно поставить дефис или тире. Тем не менее следует придерживаться определенных правил пунктуации относительно применения этих знаков.
Так, дефис (-) применяется только внутри слов или между цифрами. Длинное тире (—), ставится между словами в предложении и отделяется от этих слов пробелами. Длинному тире соответствует ссылка-мнемоника &mdash;. Короткое тире (–) ставится между цифрами без букв или между словами, которые набраны прописными буквами, а также используется в качестве знака "минус" в математических формулах. Между коротким тире и словами пробел не ставится. Короткому тире соответствует ссылка-мнемоника &ndash;.

Применение дефиса и тире показано в следующем примере:

Пример: Спецсимволы &mdash; и &ndash;

<p>Веб-страница что-то слишком долго открывается.<br>
Она должна загружаться за 2&ndash;4 секунды.<br>
Время&nbsp;&ndash; деньги...</p>

Перечень некоторых популярных спецсимволов HTML

Символ Описание Мнемоническое имя Числовой код
неразрывный пробел &nbsp; &#160;
< меньше чем &lt; &#60;
> больше чем &gt; &#62;
& амперсанд &amp; &#38;
" прямая двойная кавычка &quot; &#34;
' апостроф &apos; &#39;
« левая двойная угловая кавычка &laquo; &#171;
» правая двойная угловая кавычка &raquo; &#187;
левая одинарная кавычка &lsquo; &#8216;
правая одинарная кавычка &rsquo; &#8217;
нижняя одинарная кавычка &sbquo; &#8218;
левая двойная кавычка &ldquo; &#8220;
правая двойная кавычка &rdquo; &#8221;
нижняя двойная кавычка &bdquo; &#8222;
euro &euro; &#8364;
© копирайт &copy; &#169;
® знак зареrистрированной торrовой марки &reg; &#174;

Разновидности спецсимволов

На обычной клавиатуре вы не найдете большенство математических, технических, геометрических и других спецсимволов.
Чтобы применить такие символы в HTML-странице, вы можете использовать соответствующие им мнемонические имена.

Обратите внимание: Не все спецсимволы имеют соответствующее мнемоническое имя. Тем не менее, всем символам присваивается числовой код, который является уникальным. Поэтому, если вы не найдете имя нужного символа, используйте его аналог — числовой код.

В слудующем примере видно как один и тот-же символ можно отобразить, использую разные коды:

Пример: Спецситмвол €

<p>Мнемоническое имя: &euro;</p>
<p>Десятичный код: &#8364;</p>
<p>Шестнадцатиричный код: &#x20AC;</p>

Перечень некоторых математических спецсимволов

Символ Описание Мнемоническое имя Числовой код
Математический знак "для всех" &forall; &#8704;
Частный дифференциал &part; &#8706;
Математический знак "существует" &exist; &#8707;
Пустое множество; диаметр &empty; &#8709;
Знак принадлежности &isin; &#8712;
Знак "не принадлежит" &notin; &#8713;
Сумма последовательности &sum; &#8721;
Квадратный корень &radic; &#8730;
Пропорционально &prop; &#8733;
Бесконечность &infin; &#8734;





Профессия‌ ‌веб-разработчик‌
Веб-разработчик с нуля‌
Старт в программировании‌
Курс HTML/CSS‌
Школа фриланса
Курс Верстальщик 2020 - HTML 5, CSS‌
Профессия‌ тестировщик‌