Что делают эти спецсимволы laquo и raquo. Спецсимволы HTML


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

Вставить символ в html-документ можно одним из способов:

  1. скопировать изображение символа из окна браузера в окно своего визуального html-редактора
  2. скопировать html-код символа непосредственно в код html-документа
Унимаем, что это два разных способа:
  1. вставлять визуальное в визуальное
  2. вставлять код в код.

Шрифт для символа, его размер и цвет в HTML можно задать кодом, вида:
КОД_СИМВОЛА
где,
Arial - шрифт,
10px - размер шрифта в пикселях,
#ff0000 - код цвета шрифта (красный)

Например:
☎ - размер шрифта символа 30px,
☎ - размер шрифта символа 30px, цвет - красный
☎ - размер шрифта символа 20px,
☎ - размер шрифта символа 10px.
Прим. Рекомендуемые шрифты для вставки спецсимволов - Arial, Verdana и Tahoma. Эти шрифты корректно отображают символы Юникод и сами, в свою очередь, корректно поддерживаются веб-приложениями.

  1. «Символ»
    (видимое отображение символа)
    Из этой графы можно скопировать изображение символа и вставить его в окно текстового html-редактора. Символ скопируется с размером шрифта 20px. После завершения копирования может потребоваться индивидуальная подгонка размера шрифта непосредственно для скопированного знака.
  2. «Наименование»
    (только для важных или непонятных символов)
    Пояснение назначения символа, его область применения, примеры...
  3. «Мнемоника»
    Мнемоника - это буквенная конструкция вида ", обозначающая буквенный код символа в HTML. Вставляется непосредственно в html-код html-документа. Мнемоники очень популярны среди профессиональных верстальщиков. Они прекрасно запоминаются человеком и поддерживаются всеми html-приложениями. Каждая мнемоника содержит буквенное имя (обозначение) своего символа и служебный знак (&), который служит сигналом к прочтению кода для браузера и не отображается на экране монитора. Имя каждой мнемоники уникально и легко читаемо, потому что образовано от англоязычного слова, характеризующего символ.

    Мнемоника (греч.) - искусство запоминать что-либо. Мнемотехника применяется для облегчения восприятия труднозапоминаемой информации, когда объект запоминания приводится в ассоциативное состояние с чем-либо.

  4. «Код»
    Код - числовой десятичный код символа в HTML, вида &. Вставляется непосредственно в html-код html-документа. Числовой десятичный код состоит из числа, обозначающего порядковый номер символа в системе Юникод и нескольких служебных знаков (& и #), которые служат сигналом к прочтению кода для браузера и не отображаются на экране монитора. Числовой десятичный код имеет широкое распространение и применение, благодаря своей универсальности и простоте восприятия.

Символы управления в HTML (XHTML)

Символы управления в HTML (XHTML) - это служебные символы HTML-языка, которые используются при HTML-вёрстке веб-страницы. Эти символы обязан поддерживать любой браузер, поскольку без них невозможно правильное отображение HTML-текста. Символы управления не отображаются в тексте и, при прямом введении с клавиатуры - интерпретируются браузером как знаки препинания, призывающие к выполнению какого-либо действия при отрисовке страницы на экране.

Допускается использовать символы управления в обычных текстах, где они символизируют общечеловеческие понятия и трактуются браузером как обычные типографские знаки. При таком использовании служебных символов в HTML-текстах требуется вводить не значение самого символа, а именно его HTML-код. Ибо, повторяюсь - в противном случае браузер будет воспринимать служебный символ, как призыв к действию и не будет корректно отображать HTML-текст на экране монитора.

Символы управления и их HTML-код знают и понимают все браузеры без исключения, чего нельзя сказать, увы - про остальные знаки, которые могут отображаться некорректно в разных браузерах или, что ещё хуже - не отображаться совсем.

Синтаксис и пунктуация

пробел длины N (обычный пробел)
пробел длины M (длинныйпробел)
- мягкий перенос (непечатный знак) - ­
дефис –
- тире длины N (обычное тире) -
тире длины M (длинное тире)
. точка .
, запятая ,
многоточие …
: двоеточие :
; точка с запятой ;
! знак восклицания !
ǃ
? вопросительный знак ?
@ «собачка» @
* «звездочка» *
# «решетка» #
одиночная верхняя левая кавычка ‘
одиночная верхняя правая кавычка ’
одиночная нижняя правая кавычка ‚
двойная верхняя левая кавычка “
двойная верхняя правая кавычка ”
двойная нижняя правая кавычка &bdquo „
« двойная левая угловая кавычка (рус) « «
» двойная правая угловая кавычка (рус) » »
́ знак ударения, пример: Вася́ ́
" апостроф, пример: Вас"я "
´ акут, пример: Вас´я ´ ´
абзац (непечатный знак)
§ параграф § §
ˆ акцент (перевёрнутая птичка) ˆ ˆ
ˆ
˜ малая тильда ˜ ˜
˜
¦ вертикальный пунктир ¦ ¦
( круглая скобка влево (
) круглая скобка вправо )
угловая скобка влево
угловая скобка вправо
угловая скобка влево, вариант
угловая скобка вправо, вариант
[ квадратная скобка влево [
] квадратная скобка вправо ]
/ слэш (slash) - cимвол косой черты /
\ обратный слэш (backslash) \
косая дробная черта (знак деления)
ǀ вертикальная черта ǀ
ǁ двойная вертикальная черта ǁ
надчеркивание, пример: Вася‾вася
¯ macron, пример: Вася¯вася ¯ ¯

Товарные знаки и валюта

+ плюс + +
минус -
= равно =
± плюс-минус ± ±
× знак умножения × ×
÷ знак деления ÷ ÷
оператор «точка» (середина строки) ·
оператор «звёздочка» (середина строки)
оператор «тильда»
. маркер списка (середина строки) . •
¹ верхний индекс «1» ¹ ¹
² верхний индекс «2» ² ²
³ верхний индекс «3» ³ ³
Надстрочный и подстрочный индекс в HTML (XHTML)
можно вставить при помощи тегов и , соответственно:
ЧИСЛОНадстрочный индекс → ЧИСЛО Надстрочный индекс
ЧИСЛОПодстрочный индекс → ЧИСЛО Подстрочный индекс
½ дробь «одна вторая» ½ ½
дробь «одна треть»
¼ дробь «одна четвёртая» ¼ ¼
¾ дробь «три четверти» ¾ ¾
знак номера
% процент %
промилле ‰
° градусы ° °
штрих (минуты, футы)
двойной штрих (секунды, дюймы)
Пример 1: 30° 25′ 12″
Пример 2: 25′ 12
µ микро µ µ
π Пи π π
ƒ знак функции
(не путать с «интеграл»)
ƒ ƒ
ƒ
интеграл
перечеркнутый ноль, пустое множество
(не путать с «диаметр»)
диаметр (не путать с перечёркнутой латинской «о»)
ø латинская "o" диагонально перечёркнутая ø ø
Ø латинская заглавная "O" диагонально перечёркнутая Ø Ø
знак произведения
знак суммирования
радикал
(квадратный корень или корень степени x)
пропорционально
бесконечность
угол
ортогонально (перпендикулярно)
знак «cледовательно»
приблизительно равно
почти равно
не равно
идентично
меньше или равно
больше или равно
логическое И
логическое ИЛИ
знак «плюс в круге»
(прямая сумма)
знак «умножение в круге»
(векторное произведение, стрела от наблюдателя)
ʘ точка в круге
(стрела на наблюдателя)
ʘ

✵ ✵

Здравствуйте, уважаемые читатели блога сайт! Те, кто хотя бы поверхностно успел ознакомиться с , наверное, уже приняли к сведению, пусть и в общих чертах. А значит, имеют представление о том, какие вообще HTML символы используются в коде документа.

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

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

Пробелы и пробельные символы в HTML

Сначала необходимо сделать важное замечание. На клавиатуре компьютера есть специальные клавиши, которые позволяют реализовать разделение текста (чуть подробнее об этом ниже). Однако, лишь широкая клавиша пробела обеспечивает раздел между словами не только в редакторе, но и в окне браузера. При переносе строк и отступе от края существуют нюансы.

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

Чтобы перенести строки внутри абзаца P , нужно воспользоваться одиночным тегом BR, с помощью которого это можно осуществить. Скажем, нам нужно вставить в текст какие-нибудь строчки из стихотворения, которые мы пишем в текстовом редакторе:

Несмотря на то, что строки стиха расположены корректно и переносы осуществлены в нужных местах, в браузере все будет выглядеть иначе:


Чтобы добиться такого же отображения в окне веб-обозревателя, нужно в каждом месте переноса строки прописать BR:

Теперь мы достигли выполнения поставленной задачи и в браузере стихотворные строчки отобразятся совершенно правильно:

Таким образом, нужные переносы строк выполнены. Здесь еще нужно отметить такую особенность, что множественные пробелы, идущие один за другим, веббраузер отображает как один. В этом вы сможете убедиться, если в том же редакторе попробуете поставить не один, а несколько пробелов между двумя словами и, нажав на кнопку «Сохранить», посмотрите на результат в браузере.

Пробел, табуляция и перенос строки

В принципе, с этими пробельными символами мы знакомимся сразу же, как начинаем работу с текстом в редакторе и форматируем его в нужном виде. Для реализации подобной задачи существуют специальные клавиши, каждая из которых соответствует своему пробельному символу:

  • Пробел - самая широкая клавиша на клавиатуре компьютера (без надписи);
  • Табуляция - клавиша слева с надписью «Tab» и двумя стрелками, направленными в разные стороны;
  • Перенос строки - клавиша «Enter».

Однако, как я сказал выше, конечный нужный результат не только в текстовом редакторе, но и в браузере, мы получаем лишь при использовании первой клавиши. Все три клавиши (в том числе табуляция и перенос строки полезно использовать при форматировании кода HTML. Допустим, вот как выглядит фрагмент кода в NotePad++ ( об этом редакторе толковый материал) при отображении всех пробельных символов:


Мы получаем код, который легко читаем и понятен благодаря пробелам. Оранжевыми стрелками отмечены отступы, создаваемые с помощью клавиши Tab, а символами CR и LF переносы строк, осуществляемые посредством кавиши Enter.

Просматриваются контейнеры, вложенные один в другой, хорошо выделяются открывающие и закрывающие теги. В таком виде данный код можно спокойно редактировать. А теперь сравните его с таким же кодом, в котором нет подобного разделения текста:

Таким же образом с помощью пробельных символов можно прописать и правила CSS, которые будут визуально выглядеть понятными и удобоваримыми:


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

Спецсимволы (или мнемоники) в коде HTML

Теперь разберем, в каких случаях необходимо использование специальных символов, о которых я упомянул в начале статьи. Спецсимволы HTML, которые иногда называют мнемониками, введены для решения давней проблемы с кодировками, возникшей в языке гипертекстовой разметки.

При наборе вами текста с клавиатуры происходит кодировка символов языка, который вы используете. В веббраузере набранный текст будет отображен посредством выбранных вами шрифтов в результате обратной операции декодирования.

Дело в том, что подобных кодировок немало, сейчас у нас нет цели их подробно разобрать. Просто в каждой из них может не доставать тех или иных символов, которые, однако, необходимо отобразить. Скажем, приспичило вам прописать одиночные кавычки или знак ударения, а эти значки банально отсутствуют в наборе.

Для того, чтобы ликвидировать эту проблему, и была введена система спецсимволов, которая включает в себя огромное количество самых различных мнемоник. Все они начинаются со значка амперсанда «&» и заканчиваются обычно точкой с запятой «;». Поначалу каждому спецсимволу соответствовал свой цифровой код. Например, для неразрывного пробела, который рассмотрим чуть ниже подробнее, будет справедлива такая запись:

Но спустя некоторое время наиболее распространенным символам были присвоены буквенные аналоги (мнемоники), чтобы их было проще запомнить. Скажем, для того же неразрывного пробела это выглядит следующим образом:

В результате браузер отображает соответствующий символ. Список мнемоник очень объемный, наиболее часто применяемые спецсимволы HTML вы можете обнаружить из ниже следующей таблицы:

символ код мнемоника описание
неразрывный пробел
узкий пробел (еn-шириной в букву n)
широкий пробел (em-шириной в букву m)
- узкое тире (en-тире)
- широкое тире (em -тире)
­ - ­ мягкий перенос
а́ ́ ударение, ставится после "ударной" буквы
© © копирайт
® ® ® знак зарегистрированной торговой марки
знак торговой марки
º º º копье Марса
ª ª ª зеркало Венеры
промилле
π π π пи (используйте Times New Roman)
¦ ¦ ¦ вертикальный пунктир
§ § § параграф
° ° ° градус
µ µ µ знак "микро"
знак абзаца
многоточие
надчеркивание
´ ´ ´ знак ударения
знак номера
🔍 🔍 Лупа (наклонённая влево)
🔎 🔎 Лупа (наклонённая вправо)
знаки арифметических и математических операций
× × × умножить
÷ ÷ ÷ разделить
< < меньше
> > > больше
± ± ± плюс/минус
¹ ¹ ¹ степень 1
² ² ² степень 2
³ ³ ³ степень 3
¬ ¬ ¬ отрицание
¼ ¼ ¼ одна четвертая
½ ½ ½ одна вторая
¾ ¾ ¾ три четверти
дробная черта
минус
меньше или равно
больше или равно
приблизительно (почти) равно
не равно
тождественно
квадратный корень (радикал)
бесконечность
знак суммирования
знак произведения
частичный дифференциал
интеграл
для всех (видно только если жирным шрифтом)
существует
пустое множество
Ø Ø Ø диаметр
принадлежит
не принадлежит
содержит
является подмножеством
является надмножеством
не является подмножеством
является подмножеством либо равно
является надмножеством либо равно
плюс в кружке
знак умножения в кружке
перпендикулярно
угол
логическое И
логическое ИЛИ
пересечение
объединение
знаки валют
Евро
¢ ¢ ¢ Цент
£ £ £ Фунт
¤ ¤t; ¤ Знак валюты
¥ ¥ ¥ Знак йены и юаня
ƒ ƒ ƒ Знак флорина
маркеры
. простой маркер
круг
· · · средняя точка
крестик
двойной крестик
пики
трефы
червы
бубны
ромб
карандаш
карандаш
карандаш
рука
кавычки
" " " двойная кавычка
& & & амперсанд
« « « левая типографская кавычка (кавычка-елочка)
» » » правая типографская кавычка (кавычка-елочка)
одиночная угловая кавычка открывающая
одиночная угловая кавычка закрывающая
штрих (минуты, футы)
двойной штрих (секунды, дюймы)
левая верхняя одиночная кавычка
правая верхняя одиночная кавычка
правая нижняя одиночная кавычка
кавычка-лапка левая
кавычка-лапка правая верхняя
кавычка-лапка правая нижняя
одиночная английская кавычка открывающая
одиночная английская кавычка закрывающая
двойная английская кавычка открывающая
двойная английская кавычка закрывающая
стрелки
стрелка влево
стрелка вверх
стрелка вправо
стрелка вниз
стрелка влево и вправо
стрелка вверх и вниз
возврат каретки
двойная стрелка влево
двойная стрелка вверх
двойная стрелка вправо
двойная стрелка вниз
двойная стрелка влево и вправо
двойная стрелка вверх и вниз
треугольная стрелка вверх
треугольная стрелка вниз
треугольная стрелка вправо
треугольная стрелка влево
звездочки, снежинки
Снеговик
Снежинка
Зажатая трилистниками снежинка
Жирная остроугольная снежинка
Закрашенная звезда
Незакрашенная звезда
Незакрашенная звезда в закрашенном круге
Закрашенная звезда с незакрашенным кругом внутри
Вращающаяся звезда
Начерченная белая звезда
Средний незакрашенный круг
Средний закрашенный круг
Секстиле (типа снежинка)
Восьмиконечная вращающаяся звезда
Звёздочка с шарообразными окончаниями
Жирная восьмиконечная каплеобразная звёздочка-пропеллер
Шестнадцатиконечная звёздочка
Двенадцатиконечная закрашенная звезда
Жирная восьмиконечная прямолинейная закрашенная звезда
Шестиконечная закрашенная звезда
Восьмиконечная прямолинейная закрашенная звезда
Восьмиконечная закрашенная звезда
Восьмиконечная звёздочка
Звёздочка с незакрашенным центром
Жирная звёздочка
Заострённая четырёхконечная незакрашенная звезда
Заострённая четырёхконечная закрашенная звезда
Звезда в круге
Снежинка в круге
часы, время
Часы
Часы
Песочные часы
Песочные часы

Случаи использования некоторых спецсимволов, в том числе неразрывного пробела и мягкого переноса

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

Теперь посмотрим, когда необходимо применять данные коды. Скажем, в статье вам необходимо в информативных целях указать какой-нибудь HTML тег, например,

. Если набрать угловые скобки с клавиатуры (а такая возможность есть), то браузер воспримет такую конструкцию как открывающий тег, а не как простой фрагмент текста.

Поэтому из той же таблицы спецсимволов HTML берем соответствующие коды и вся запись будет выглядеть так:

Кроме того, чтобы отобразить в браузере не сам знак амперсанда, а его обозначение в виде

, нужно добавить из таблицы его код:

&lt;footer&gt;

Тогда в браузере выведется именно запись мнемоник, которые нужно применить для отображения тега FOOTER. Немного путано, но на этой странице вы сможете попрактиковаться в данном аспекте, введя в поле «HTML» мнемоники для соответствующих символов и задействуя кнопку «Run», а в области «Result» получая результат их отображения в браузере:


Обратите внимание, что я обеспечил перенос текста с помощью уже упомянутого тега BR с тем, чтобы сами символы отображались не в одну строку, а столбиком для удобства.

Идем дальше. Иногда в тексте возникают сочетания, которые нежелательно разделять по разным строкам. Скажем, «1000 руб.» будет логичным или оставить на верхней строке, или при недостатке места всю конструкцию перенести на на строку ниже.

Особенно это актуально, если пользователи применяют устройства с различной шириной экрана, в том числе мобильные. Ведь в этом случае веббраузер форматирует текст, подстраиваясь под новые условия. И если при стандартных размерах монитора текст выглядит корректно, то при их изменении все может поменяться.

Для этих случаев предусмотрен неразрывный пробел HTML , о котором я уже упоминал. Напомню, что в этом случае код пробела такой:

И его нужно вставить между двумя совокупностями знаков, которые требуется связать:

1000 руб.

Теперь браузер ни в коем случае не осуществит их разделение, даже если потребуется форматирование текста для его корректного отображения.

Также бывает такая ситуация, когда очень длинное слово не помещается в свободное пространство и требуется перенести его часть. Как при необходимости предопределить перенос на новую строку в этом случае? Для этого есть спецсимвол мягкого переноса -, который нужно поместить в то место, в котором слово нужно разорвать:

Длинноедлинноедлинноедлин­ноедлинноеслово

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

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


В окне этого редактора можно изменять размеры поля просмотра «Result», захватив левой кнопкой мышки край этой области и, не отпуская ее, тянуть влево для уменьшения ширины. Тогда возникает реальная ситуация, когда браузер начинает переформатировать содержимое для корректного его отображения.

И осуществляется перенос, который был предусмотрен в описанных мной примерах. Впрочем, вы сами можете подвигать просмотровое окно, расширяя-сужая ее, и визуально убедиться в этом.

Ряд цифр и букв имеют внешне схожее начертание, малоразличимое при небольшом размере шрифта. Например, цифры "0", "1" и буквы "О", "l" (L). Это является серьёзной проблемой, особенно в тех случаях, когда необходимо строго однозначное прочтение символов. К примеру, при записи ручкой на листке бумаги или печати на принтере своего буквенно-цифрового пароля. Решением данной проблемы пришлось заниматься первым программистам и фонт-дизайнерам (в XX-м веке, в самом начале компьютерной эры). Давно уже, появились специальные контрастные шрифты, такие как Inconsolata, Consolas (системный в OS Windows), Anonymous Pro, Deja Vu Sans Mono и многие другие. Некоторые из них можно бесплатно скачать по ссылкам с сайтов их авторов-создателей и с профильных Интернет-ресурсов.
Смотреть пример:
http://www.levien.com/type/myfonts/inconsolata.html

Если допускается техническими условиями и проектным заданием, то вместо цифрового нуля, в HTML-код ставится "Ø" (latin capital letter O with stroke, с косым штрихом, из модификации латинского алфавита для скандинавских языков - норвежского и датского), приблизительно похожий, своим начертанием, на перечёркнутый пополам нолик. В текстовом редакторе - такой значок берётся, копируется из таблицы спецсимволов (Special Character), и вставляется в нужную позицию в строке. Данный лайфхак-приём будет полезен, если возникают сложности с поиском и установкой на девайс специального фонта. Этот совет позволит сэкономить время и не перепутать цифру "0" (zero) с буквой "О" не только на мониторе вашего ПК, но и на экранах других устройств, где может не оказаться нужного шрифта. Такая форма записи, традиционно, применяется при обозначении на листе бумаги смешанной, буквенно-цифровой информации, например, своего пароля, кода доступа. Примечательно, что даже есть шутливое выражение " ", подчёркивающее важность наличия этого элемента, наделяющего символ определённым смыслом и значением. Графический вид нуля в разных типах шрифтов - можно посмотреть и сравнить их изображение на картинках с помощью специализированного сервиса на странице сайта:
http://www.fileformat.info/info/unicode/char/0030/fontsupport.htm

Рисунок 2

При редактировании и правке текста, перечёркивание неправильно написанного или ненужного символа - производится большим косым крестиком (двумя крест-накрест перекрещивающимися диагональными штрихами равной длины). В текстовом редакторе это осуществляется средствами форматирования - сначала выделяется фрагмент, а затем в меню нажимается последовательность кнопок и вкладок (Format - Character - Font Effects - Strikethrough) для выбора из выпадающих списков необходимого эффекта. Зачёркивание одного или нескольких слов в строчке или в целом абзаце документа - делается с помощью горизонтальной одинарной или двойной линии, достаточной толщины.

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

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

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

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

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

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

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

Кавычки.

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

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

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

Дефис и тире.

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

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

Пример: Спецсимволы — и -

  • Попробуй сам »



Время - деньги...

Веб-страница что-то слишком долго открывается.
Она должна загружаться за 2-4 секунды.
Время - деньги...

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

Символ Описание Мнемоническое имя Числовой код
неразрывный пробел
< меньше чем <
> больше чем > >
& амперсанд & &
" прямая двойная кавычка " "
" апостроф " "
« левая двойная угловая кавычка « «
» правая двойная угловая кавычка » »
левая одинарная кавычка
правая одинарная кавычка
нижняя одинарная кавычка
левая двойная кавычка
правая двойная кавычка
нижняя двойная кавычка
euro
копирайт ©
® знак зареrистрированной торrовой марки ® ®

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

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

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

Специальные символы – это технические знаки, которые не представлены на клавиатуре и закодированы через кодировку ЮНИКОД или иного метаязыка. Спецсимволы разделены на группы: математические, греческий алфавит, ISO 8859-1 и другие. Зачем они необходимы и как использовать читайте далее в статье.

Применение спецсимволов при написании документов

Употребление осуществляется для следующих целей:

  1. Придание статье завершённости и эстетичности. Особые знаки помогают быстрее понять размерные величины или прочитать историческое название на латинском или греческом языке.
  2. Некоторые элементы обеспечивают правильную разметку документа. К примеру, «» и “” отличаются, первые передаются стандартными средствами, другие через спецсимволы.
  3. Вёрстка документов математической направленности не может обойтись без знаний основных групп элементов.

Основные знаки

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

Внешний вид Обозначение HTML-код CSS-код
Снеговик \2603
Православный крест \2626
Якорь \2693
Знак телефона \2706
Телефон \260E
Горячие напитки \2615
Карандаш, направленный вправо-вниз \270E
Карандаш \270F
Карандаш, направленный вправо-вверх \2710
Незакрашенное острие пера \2711
Закрашенное острие пера \2712
Геральдическая лилия \269C
Шлем с белым крестом \26D1
Начерченная белая звезда \269D
Снежинка \2744
Закрашенное жирное сердце \2764
Зажатая трилистниками снежинка \2745
Жирная остроугольная снежинка \2746
Закрашенная звезда \2605
Незакрашенная звезда \2606
Незакрашенная звезда в закрашенном круге \272A
Закрашенная звезда с незакрашенным кругом внутри \272B
Вращающаяся звезда \272F
Звёздочка с шарообразными окончаниями \2749
Жирная восьмиконечная каплеобразная звёздочка-пропеллер \274B
Звёздочка с незакрашенным центром \2732
Закрашенное солнце с лучами \2600
Облака \2601
Зонтик \2602
Галочка в квадрате \2611
Крестик в квадрате \2612
Нахмуренный смайлик \2639
Улыбающийся смайлик \263A
Закрашенный улыбающийся смайлик \263B
Серп и молот \262D
Закрашенный флаг \2691
Незакрашенный флаг \2690
Триграмма \2630
Закрашенный цветок \273f
Незакрашенный цветок \2740
Цветок с шестью лепестками \273E
Закрашенный обведённый цветок \2741
Цветок из точек \2742
Конверт \2709
Сердце в виде цветка \2766
Номер 1 \2776
Номер 2 \2777
Номер 3 \2778
Номер 4 \2779
Номер 5 \277A
Номер 6 \277B
Номер 7 \277C
Номер 8 \277D
Номер 9 \2792
Номер 10 \2793
Жирный знак умножения \2716
Жирный крестик \2718
Жирная отметка галочкой \2714
Жирный крест \271A
Символ атома \269B
Символ переработки \267A
Незакрашенный квадрат с правой нижней тенью \2751
Незакрашенный квадрат с правой верхней тенью \2752
Алмаз в оправе \25C8
Круг с левой закрашенной половиной \25D0
Круг с закрашенной правой половиной \25D1
Три звездочки \2042

Знаки препинания

Внешний вид Обозначение HTML-код CSS-код
< Знак «меньше чем» (начало тега) < \003C
> Знак «больше чем» (конец тега) > \003E
« Левая двойная угловая скобка « \00AB
» Правая двойная угловая скобка » \00BB
Левая угловая одиночная кавычка \2039
Правая угловая одиночная кавычка \203A
« Двойная кавычка " \0022
Одиночный штрих \2032
Двойной штрих \2033
Левая одиночная кавычка \2018
Правая одиночная кавычка \2019
Нижняя одиночная кавычка \201A
Левая двойная кавычка \201C
Правая двойная кавычка \201D
Нижняя двойная кавычка \201E
Жирная одинарная верхняя запятая \275C
Жирная одинарная повёрнутая верхняя запятая \275B
& Амперсанд & \0026
Апостроф (одинарная кавычка) " \0027
§ Параграф § \00A7
© Знак copyright \00A9
¬ Знак отрицания ¬ \00AC
® Знак зарегистрированной торговой марки ® \00AE
¯ Знак долготы над гласным ¯ \00AF
° Градус ° \00B0
± Плюс-минус ± \00B1
¹ Верхний индекс «1» ¹ \00B9
² Верхний индекс «2» ² \00B2
³ Верхний индекс «3» ³ \00B3
¼ Одна четверть ¼ \00BC
½ Одна вторая ½ \00BD
¾ Три четверти ¾ \00BE
´ Знак ударения ´ \00B4
µ Микро µ \00B5
Знак абзаца \00B6
· Знак умножения · \00B7
¿ Перевернутый вопросительный знак ¿ \00BF
ƒ Знак флорина ƒ \0192
Знак торговой марки \2122
Маркер списка . \2022
Многоточие \2026
Надчеркивание \203E
Среднее тире - \2013
- Длинное тире \2014
Промилле \2030
} Правая фигурная скобка } \007D
{ Левая фигурная скобка { \007B
= Знак равенства = \003D
Знак неравенства \2260
Конгруэнтность (геометрическое равенство) \2245
Почти равно \2248
Меньше чем или равно \2264
Больше чем или равно \2265
Угол \2220
Перпендикулярно (кнопка вверх) \22A5
Квадратный корень \221A
N-ичное суммирование \2211
Интеграл \222B
Знак сноски \203B
÷ Знак деления ÷ \00F7
Знак бесконечности \221E
@ Символ собака @ \0040
[ Левая квадратная скобка [ \005B
] Правая квадратная скобка ] \005D

Стрелки

Внешний вид Обозначение HTML-код CSS-код
Стрелка влево \2190
Стрелка вверх \2191
Стрелка вправо \2192
Стрелка вниз \2193
Стрелка влево-вправо \2194
Стрелка вниз и влево – знак возврата каретки \21B5
Двойная стрелка налево \21D0
Двойная стрелка вверх \21D1
Двойная стрелка направо \21D2
Двойная стрелка вниз \21D3
Двойная стрелка влево-вправо \21D4
Летящая стрела \27A0
Наконечник стрелы \27A4
Изогнутая стрела, указывающая вниз и вправо \27A5
Изогнутая стрела, указывающая вверх и вправо \27A6
Стрела направо \27B3
\21BA
Круглая стрелка с наконечником против часовой стрелки \21BB
Толстая полая стрелка вверх \21E7
Стрелка налево с крючком \21A9
Наклонённая вниз объёмная стрелка \27AB
Закрашенная стрелка вниз \2B07
Закрашенная стрелка вверх \2B06

Карточные масти, знаки зодиака и значки валют

Внешний вид Обозначение HTML-код CSS-код
«Пики» \2660
«Трефы» \2663
«Червы» \2665
«Бубны» \2666
Контур «Червы» \2661
Контур «Бубны» \2662
Контур «Пики» \2664
Контур «Трефы» \2667
¢ Цент ¢ \FFE0
£ Фунт стерлингов £ \FFE1
Российский рубль \20BD
¥ Йена или юань ¥ \00A5
Евро \20AC
$ Доллар $ \0024
Знак гривны \20B4
Индийская рупия \20B9
Китайский юань \5713
Казахстанский тенге \20B8
Овен \2648
Телец \2649
Близнецы \264A
Рак \264B
Лев \264C
Дева \264D
Весы \264E
Скорпион \264F
Стрелец \2650
Козерог \2651
Водолей \2652
Рыбы \2653

Греческий алфавит

Буква строчные прописные
символ html-код символ html-код
альфа α α Α Α
бета β β Β Β
гамма γ γ Γ Γ
дельта δ δ Δ Δ
эпсилон ε ε Ε Ε
дзета ζ ζ Ζ Ζ
эта η η Η Η
тета θ θ Θ Θ
йота ι ι Ι Ι
каппа κ κ Κ Κ
лямбда λ λ Λ Λ
мю μ μ Μ Μ
ню ν ν Ν Ν
кси ξ ξ Ξ Ξ
омикрон ο ο Ο Ο
пи π π Π Π
ро ρ ρ Ρ Ρ
сигма σ σ Σ Σ
окончательная сигма ς ς
тау τ τ Τ Τ
ипсилон υ υ Υ Υ
фи φ φ Φ Φ
хи χ χ Χ Χ
пси ψ ψ Ψ Ψ
омега ω ω Ω Ω

Как употреблять на практике


Независимо от CMS, добавление статьи выполняется с использованием визуального редактора и HTML версии. Все специальные символы в кодировке возможно вставить только во втором случае. Чтобы правильно воспользоваться инструментов, рекомендуется взять на заметку таблицы, где показан код и внешнее представление.

Обращаем внимание, если вставить знак в визуальном представлении статьи, то в HTML произойдёт превращение элемента в соответствующий код. При ручном вводе информации учитывайте регистр, который влияет на конечный результат.