Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Что такое спецсимволы HTML?

Сегодня вы узнаете, что такое спецсимволы HTML и для чего они нужны на странице. Начнем мы с вами изучение со скучной технической стороны вопроса, ну а сладкое оставим на потом. Итак, спецсимволы HTML — это условные кодовые обозначения, которые преобразуются браузером в различные текстовые знаки: буквы, цифры, знаки препинания, стрелки и так далее. Например, если мы напишем в HTML-странице вот такой код:

<p>&#177;</p>

То браузер нам его не покажет, а отобразит в параграфе знак плюс-минус:

±

Спецсимволы HTML можно указывать двумя способами:

  • Код символа — В этом случае ставится амперсанд (&), за ним решетка (#), потом идут цифры и в конце ставится точка с запятой (;), как показано выше.
  • Мнемоника — Сначала также идет амперсанд, потом пишется ключевое слово и тоже в конце точка с запятой, например: &copy;

Естественно удобней использовать вариант с мнемониками, так как, если вы хоть чуть-чуть знаете английский язык, то сможете догадаться, что за символ выводит каждый из них на страницу и не будете путаться в цифрах. Но, к сожалению, мнемоники есть не у всех символов, поэтому часто приходится использовать именно кодовый вариант.

На сайте Сеодон.ру есть очень обширные таблицы спецсимволов HTML на все случаи жизни, можете посмотреть. Кстати, я на их написание дней пять «убил». :) Обратите особое внимание на то, что спецсимволы-мнемоники чувствительны к регистру, то есть &copy; и &COPY; — не одно и то же. Поэтому указывайте их всегда именно так, как показано в таблицах.

Так, теперь давайте с вами подумаем, внутри каких тегов можно указывать эти спецсимволы. И сразу вопрос. А чем они являются по сути? Правильно, текстом. А текст в HTML считается чем? Да, встроенным (inline) элементом, как и многие HTML-теги. Соответственно, указывайте спецсимволы также, как обычный текст — внутри тегов, которые могут содержать встроенные элементы.

Для чего нужны спецсимволы HTML?

Спецсимволы HTML используются для совершенно разных целей. Я думаю, вы уже догадались, что их применяют, когда нужно вставить на страницу символ, которого нет в стандартной компьютерной клавиатуре. Но это далеко не все. Кроме этого они указываются, когда кодировка страницы не поддерживает какие-то символы в «готовом» виде (к этому мы еще вернемся).

Или, например, есть такой спецсимвол, как неразрывный пробел (&nbsp;). И если его поставить вплотную между двумя словами, то в этом месте будет запрещен перенос строки. А если указать его несколько раз подряд (&nbsp;&nbsp;&nbsp;...), то получим нужный отступ строки, так как эти указанные подряд пробелы браузеры не игнорируют.

Довольно часто спецсимволы используются для отображения на странице HTML-разметки. И правда, ведь если мы захотим отобразить на странице какой-нибудь тег, то просто так у нас это сделать не получится, так как браузер его скроет, посчитав за разметку. Поэтому придется использовать спецсимволы заменяющие угловые скобки тегов (&lt; и &gt;) и кавычки атрибутов (&quot;).

Пример использования спецсимволов HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Использование спецсимволов HTML</title>
</head>
<body>
 <p>&lt;P&gt; - Тег для создания параграфов.</p>

 <p><strong>&reg;</strong> - Знак зарегистрированной торговой марки.</p>

 <p>При написании статьи лучший вариант &mdash; это использование
    между словами длинного тире и дефиса, а не только дефиса во всех случаях.</p>
</body>
</html>

Результат в браузере

<P> - Тег для создания параграфов.

® - Знак зарегистрированной торговой марки.

При написании статьи лучший вариант — это использование между словами длинного тире и дефиса, а не только дефиса во всех случаях.

Домашнее задание.

  1. Создайте заголовок статьи и два подзаголовка. Пусть заголовок статьи располагается по центру.
  2. В начале каждого подзаголовка поставьте знак параграфа и выделите этот знак красным цветом.
  3. Создайте под каждым заголовком по одному параграфу.
  4. Напишите в первом параграфе слова: Яблоко, Груша, Слива и Когерентность. Зачеркните лишнее слово и расставьте в них ударения.
  5. Во втором параграфе напишите четыре слова и поставьте между ними стрелки, указывающие вправо.
  6. Напишите в третьем параграфе формулу неопределенного интеграла — ∫ ƒ(t)dt и через тире напишите «Это неопределенный интеграл». Пусть у формулы будет шрифт 120%.
Цитаты и обрыв строки← Содержание →Горизонтальные линии
Учебник HTML