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

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

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

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

Надеюсь, что словесные объяснения и примеры из публикации помогут вам разобраться с тем, как браузер обрабатывает пробельные символы.

Для чего нужны пробельные символы в HTML

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

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

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

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

Виды пробельных символов в HTML

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

Обратите внимание на рисунок: это скрин из Notepad++, на котором открыт из записи, в которой мы говорили про . Оранжевая стрелка – это табуляция в HTML документе . Поскольку я работаю на ОС Windows 10, то перенос строк в HTML у меня отображается двумя символами: CR и LF (такая уж традиция, идущая от печатных машинок, в ОС семейства Linux перенос строки обозначается одни символом LF). А вот пробел в Notepad++ отображается символом красной точки, если присмотритесь к скрину, то заметите ее.

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

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

Пробел и неразрывный пробел в HTML

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

Сохраните файл с расширением.html в любую удобную для вас папку и откройте его в браузере, вы увидите вот такую картину:

Мы видим, что в первом HTML параграфе браузер «сконвертировал» все лишние пробелы и пробельные символы, отличные от пробела, в один пробел. А во втором параграфе у нас ситуация несколько другая. Здесь мы используем специальный символ, про который часто говорят, что это неразрывный пробел в HTML . Всё дело в том, что говорить неразрывный пробел в HTML не совсем правильно, так как это специальная последовательность кодировки.

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

Обратите внимание на рисунок, в котором показано окно браузера: браузер проигнорировал все переносы строк, несмотря на то, что мы использовали неразрывный пробел внутри HTML тэга

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

Табуляция в HTML или еще один пробельный символ

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

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

Табуляцию в HTML можно настроить (да и не только в HTML)
, потому что она представляет собой несколько пробелов, объединенных вместе. Чтобы написать пробельный символ табуляции нажмите клавишу Tab (по-моему, это сработает в любом редакторе). Табуляцию в HTML можно использовать для форматирования кода (не путайте форматирование кода с непосредственным форматированием текста в HTML), но ее не стоит использовать внутри HTML тэгов, поскольку у каждого пользователя она будет отображаться в соответствии с его настройками, а значит по-разному. Пожалуй, мы сказали всё, что можно про использование табуляции в HTML документах и редакторах
.
Перенос строки в HTML или третий пробельный символ. Символ переноса строки

Перенос строки в HTML
, да и не только в HTML, осуществляется нажатием клавиши Enter. Символ переноса строки
 в операционных системах Linux: LF
. В операционных системах Windows CR LF
, в системах Mac OS до версии девять символом переноса строки была последовательность CR
. Итак, мы уже знаем, что браузер игнорирует переносы строк в HTML документе
, где бы они не располагались.
Перенос строки в HTML
 используется в основном для редактирования и форматирования кода, чтобы сделать его читабельным и удобным для редактирования, не пренебрегайте возможностью поставить символ переноса строки, чтобы облегчить чтение кода себе и людям, которые работают вместе с вами.
Как браузер делает переносы строк

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








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


 


 
<
!
DOCTYPE
html
>
<
html
lang
=
"ru-RU"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>
ПробельныесимволывHTML
<
/
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style.css"
/
>
<
/
head
>
<
body
>
<
h1
>
Текстнаписанныйбезпробельныхсимволовперенесеннебудет<
/
h1
>
<
p
>
Браузерпользуетсяпробельнымисимволами,
чтобыосуществлятьперенос
строквтомслучае,
когдаобластипросморанехватает,
чтобы
уместитьвсюстроку<
/
p
>
<
/
body
>
<
/
html
>


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

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


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








Белая береза
 Под моим окном

Принакрылась снегом,
 Точно серебром.


 


 
<
!
DOCTYPE
html
>
<
html
lang
=
"ru-RU"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>
ПробельныесимволывHTML
<
/
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style.css"
/
>
<
/
head
>
<
body
>
<
p
>
Белаябереза<
br
>
Подмоимокном<
br
>
Принакрыласьснегом,
<
br
>
Точносеребром.
<
/
p
>
<
/
body
>
<
/
html
>


Четверостишие из произведения Есенина будет отображено следующим образом:

Каждая строка стихотворения написана с новой строки, в принципе, этого мы и добивались. Итак, тэг 
 используется для принудительного переноса строк в HTML
. Если вы напишите два и более тэгов BR подряд, то браузер сформирует столько принудительных переносов строк, сколько тэгов 
 он встретит в документе.
Важной особенностью тэга 
 является то, что все пробельные символы, которые расположены в коде до него и все символы, которые располагаются после него, игнорируются. Поэтому вы можете спокойно формировать принудительный перенос строки данным тэгом, не опасаясь, что где-нибудь «вылезет» лишний пробельный символ. Стоит заметить, что тэг 
 имеет один clear, который сообщает браузеру, как обрабатывать следующую за 
 строку, если текст обтекает плавающий HTML элемент, но об этом мы поговорим в другой записи.
Сохранение пробелов в HTML. HTML тэг 

Теперь давайте обсудим проблему Владимира Маяковского… Вернее его слога, еще точнее, как нам записать стихи Владимира Маяковского в HTML документе.
Неужели нам придется использовать специальные символы HTML, типа неразрывного пробела и после каждой строки тэг 
? Ответ: конечно же нет. Разработчики стандарта HTML учли этот момент и приняли в стандарт специальный HTML тэг 
. Тэг 
Или preformatted на русский язык можно перевести, как авторское форматирование
.

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

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


Код документа очень простой, стих В. Маяковского помещен в контейнер 
Теперь посмотрим, как обработает браузер пробельные символы внутри HTML элемента PRE
.


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

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

 

 
В этом уроке мы:
1. Узнаем как сделать чтобы html код был для нас более удобен и легко читаем.
2. Разберем как правильно делать перенос текстовой строки.
 
Делаем html код удобным.
 
Сейчас наш код понятен и легко читаем, так как в нем мало текста и практически нет тегов. Когда мы создадим более сложную страницу, то там будет много тегов, соответственно найти нужный будет сложно.
 
Чтобы не было каши из тегов, нужно изначально расставлять теги и строки так, чтобы они визуально воспринимались легче. Когда браузер считывает информацию с html страницы, ему без разницы сколько пробелов и сколько пустых строк в коде.
 
Я изменил текст в коде страницы относительно той, которую мы создавали, но это не важно. На левом и на правом рисунке изображен один и тот же код. Оба варианта будут отображаться браузером на экране монитора абсолютно одинаково. Согласитесь, работать с кодом изображенным справа будет гораздо легче, чем с тем, что слева.
 
Рассматриваемый нами код очень простой, но даже сейчас заметна разница в визуальном восприятии. Каких-либо определенных правил "наведения порядка" нет, каждый мастер сам решает как ему удобнее работать.
 
Перенос строки html. Тег <br>.
 
Обратите внимание на рисунок. В первом варианте текст написан в одну строку, во втором варианте в две строки.
 
Браузер будет отображать оба варианта одинаково. Текст будет написан в одну строку:
 
Вы спросите, почему так? Ведь в одном из кодов часть текста перенесена на другую строку. Было бы логично если бы в браузере часть текста тоже перенеслась на другую строку, но у html своя логика в этом отношении. Если мы в html коде делаем перенос строки, то для браузера это равнозначно одному пробелу
 (как обычный пробел между словами в тексте). Если мы перенесем часть текста не на одну строку вниз, а на 2 или 3 (любое количество), то браузер все равно будет считать это расстояние за один обычный пробел между словами и при выводе на экран текст будет писаться в одну строку.
 
Тег <br>
 
Когда мы в третьем уроке знакомились с тегами, я упомянул, что бывают теги которые не требуют закрытия. Тег <br>
 один из них, служит он для переноса строки.
 Давайте применим его в коде:
 
Мы вставили тег <br>
 в наш html код и теперь при запуске файла через браузер часть текста будет перенесена на следующую стоку. 
 * Не забываем сохранять изменения в Notepad (Ctrl + S) и обнавлять страницу в браузере (F5).

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

Унимаем, что это два разных способа:
вставлять визуальное в визуальное
вставлять код в код.
Шрифт для символа, его размер и цвет в HTML можно задать кодом, вида:
 КОД_СИМВОЛА 
 где,
 Arial - шрифт,
 10px - размер шрифта в пикселях,
 #ff0000 - код цвета шрифта (красный)
Например:
☎
 - размер шрифта символа 30px,
☎
 - размер шрифта символа 30px, цвет - красный
☎
 - размер шрифта символа 20px,
☎
 - размер шрифта символа 10px.
 Прим. Рекомендуемые шрифты для вставки спецсимволов - Arial, Verdana и Tahoma. Эти шрифты корректно отображают символы Юникод и сами, в свою очередь, корректно поддерживаются веб-приложениями.
«Символ»

(видимое отображение символа)
Из этой графы можно скопировать изображение символа и вставить его в окно текстового html-редактора. Символ скопируется с размером шрифта 20px. После завершения копирования может потребоваться индивидуальная подгонка размера шрифта непосредственно для скопированного знака.
«Наименование»

(только для важных или непонятных символов)
 Пояснение назначения символа, его область применения, примеры...
«Мнемоника»

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

Код - числовой десятичный код символа в 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 тег, например,