Пробел в Html — символ неразрывного пробела и другие мнемоники

Обновлено 19 декабря 2023 Просмотров: 160 416 Автор: Дмитрий Петров

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Чуть ранее мы уже успели поговорить о том, что такое язык Html, также узнали про оформление в нем комментариев и назначение директивы Doctype. Сегодня у нас на очереди понятие пробела в ХТМЛ, а еще связанное с ним форматирование кода при его написании (для удобства последующего его чтения и восприятия).

Пробелы в HTML

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

Пробелы в языке Html

Прежде, чем переходить к вопросу форматирования текста с помощью специально предназначенных для этого тегов (абзаца, заголовков и т.д.) я хочу остановиться на том моменте, как в языке ХТМЛ интерпретируются пробелы, переносы строки (Enter) и табуляция, как осуществляется разбивка текста в окне браузера при изменении его размера.

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

В языке Html в качестве пробельных символов используются:

  1. пробел (самая широкая клавиша на клавиатуре без подписи)
  2. табуляция (соответствующая клавиша)
  3. перенос строки (клавиша Enter)

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

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

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

 

В коде это может выглядеть примерно так:

100 руб.

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

Визуальное форматирование кода для повышения его наглядности

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

Особенностью языка гипертекстовой разметки является то, что любое количество пробелов (или переносов с табуляцией) идущих подряд, браузером заменяется при разборе Html кода на один единственный. Что это нам дает? Ну, давайте подумаем.

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

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

Пример визуального форматирования Html кода

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

Убираем лишние пробелы в HTML коде

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

Пример визуального форматирвоания CSS кода

Уже после того, как вы все отладите и всесторонне протестируете, сможете сжать CSS (удалить из кода все пробелы) для повышения скорости загрузки.

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

Делать это нужно так, чтобы открывающий и закрывающий тэги были бы на одном вертикальном уровне (на одинаковом количестве табуляций от правого края страницы вашего Html редактора, например, Notepad++, о котором я писал тут). Кроме этого советую непосредственно после написания открывающего элемента сделать несколько переносов строки и сразу же прописать закрывающий на том же уровне (количестве табуляций), чтобы потом не забыть это сделать.

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

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

Спецсимволы или мнемоники в Html коде

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

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

Кодировок существует очень много, но для языка Html по умолчанию была принята расширенная версия кодировок ASCII под названием Windows 1251 (CP1251).

В этой кодировке текста было возможно записать всего лишь 256 знаков — 128 от ASCII и еще 128 для букв русского языка. В результате возникла проблема с использованием на сайтах знаки, которые не входят в ASCII и не являются буквами русского языка, входящими в состав кодировки Windows 1251 (CP1251). Ну, вздумалось вам использовать тильду или апостроф, а возможности такой изначально в используемой языком Html кодировке не заложено.

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

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

В общем понимании, мнемоника — это такой знак, который начинается с амперсанда «&» и заканчивается точкой с запятой «;». Именно по этим признакам браузер при разборе кода выделяет из него спецсимволы. Сразу за амперсандом в цифровом коде подстановки должен следовать знак решетки «#», который иногда называют хеш. А уже потом следует цифровой код нужного символа в кодировке юникод.

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

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

CимволHtml-кодДесятичный
код
Описание
   неразрывный пробел
  узкий пробел (еn-шириной в букву n)
  широкий пробел (em-шириной в букву m)
––узкое тире (en-тире)
——широкое тире (em -тире)
­­­мягкий перенос
а́ ́ударение, ставится после «ударной» буквы
©©©копирайт
®®®знак зарегистрированной торговой марки
™™знак торговой марки
ºººкопье Марса
ªªªзеркало Венеры
‰‰промилле
πππпи (используйте Times New Roman)
¦¦¦вертикальный пунктир
§§§параграф
°°°градус
µµµзнак «микро»
¶¶знак абзаца
……многоточие
‾‾надчеркивание
´´´знак ударения
 №знак номера
🔍 🔍Лупа (наклонённая влево)
🔎 🔎Лупа (наклонённая вправо)
знаки арифметических и математических операций
×××умножить
÷÷÷разделить
<&lt;&#60;меньше
>&gt;&#62;больше
±&plusmn;&#177;плюс/минус
¹&sup1;&#185;степень 1
²&sup2;&#178;степень 2
³&sup3;&#179;степень 3
¬&not;&#172;отрицание
¼&frac14;&#188;одна четвертая
½&frac12;&#189;одна вторая
¾&frac34;&#190;три четверти
&frasl;&#8260;дробная черта
&minus;&#8722;минус
&le;&#8804;меньше или равно
&ge;&#8805;больше или равно
&asymp;&#8776;приблизительно (почти) равно
&ne;&#8800;не равно
&equiv;&#8801;тождественно
&radic;&#8730;квадратный корень (радикал)
&infin;&#8734;бесконечность
&sum;&#8721;знак суммирования
&prod;&#8719;знак произведения
&part;&#8706;частичный дифференциал
&int;&#8747;интеграл
&forall;&#8704;для всех (видно только если жирным шрифтом)
&exist;&#8707;существует
&empty;&#8709;пустое множество
Ø&Oslash;&#216;диаметр
&isin;&#8712;принадлежит
&notin;&#8713;не принадлежит
&ni;&#8727;содержит
&sub;&#8834;является подмножеством
&sup;&#8835;является надмножеством
&nsub;&#8836;не является подмножеством
&sube;&#8838;является подмножеством либо равно
&supe;&#8839;является надмножеством либо равно
&oplus;&#8853;плюс в кружке
&otimes;&#8855;знак умножения в кружке
&perp;&#8869;перпендикулярно
&ang;&#8736;угол
&and;&#8743;логическое И
&or;&#8744;логическое ИЛИ
&cap;&#8745;пересечение
&cup;&#8746;объединение
знаки валют
 &#8381;Рубль. Знак рубля должен использоваться с отбивкой от числа. Стандарт Юникод 7.0. Если Вы не видите изображение, обновите свои Unicode-шрифты.
&euro;&#8364;Евро
¢&cent;&#162;Цент
£&pound;&#163;Фунт
¤&curren;&#164;Знак валюты
¥&yen;&#165;Знак йены и юаня
ƒ&fnof;&#402;Знак флорина
маркеры
&bull;&#8226;простой маркер
 &#9675;круг
·&middot;&#183;средняя точка
 &#8224;крестик
 &#8225;двойной крестик
&spades;&#9824;пики
&clubs;&#9827;трефы
&hearts;&#9829;червы
&diams;&#9830;бубны
&loz;&#9674;ромб
 &#9999;карандаш
 &#9998;карандаш
 &#10000;карандаш
 &#9997;рука
кавычки
"&quot;&#34;двойная кавычка
&&amp;&#38;амперсанд
«&laquo;&#171;левая типографская кавычка (кавычка-елочка)
»&raquo;&#187;правая типографская кавычка (кавычка-елочка)
 &#8249;одиночная угловая кавычка открывающая
 &#8250;одиночная угловая кавычка закрывающая
&prime;&#8242;штрих (минуты, футы)
&Prime;&#8243;двойной штрих (секунды, дюймы)
&lsquo;&#8216;левая верхняя одиночная кавычка
&rsquo;&#8217;правая верхняя одиночная кавычка
&sbquo;&#8218;правая нижняя одиночная кавычка
&ldquo;&#8220;кавычка-лапка левая
&rdquo;&#8221;кавычка-лапка правая верхняя
&bdquo;&#8222;кавычка-лапка правая нижняя
 &#10075;одиночная английская кавычка открывающая
 &#10076;одиночная английская кавычка закрывающая
 &#10077;двойная английская кавычка открывающая
 &#10078;двойная английская кавычка закрывающая
стрелки
&larr;&#8592;стрелка влево
&uarr;&#8593;стрелка вверх
&rarr;&#8594;стрелка вправо
&darr;&#8595;стрелка вниз
&harr;&#8596;стрелка влево и вправо
 &#8597;стрелка вверх и вниз
&crarr;&#8629;возврат каретки
&lArr;&#8656;двойная стрелка влево
&uArr;&#8657;двойная стрелка вверх
&rArr;&#8658;двойная стрелка вправо
&dArr;&#8659;двойная стрелка вниз
&hArr;&#8660;двойная стрелка влево и вправо
 &#8661;двойная стрелка вверх и вниз
 &#9650;треугольная стрелка вверх
 &#9660;треугольная стрелка вниз
 &#9658;треугольная стрелка вправо
 &#9668;треугольная стрелка влево
звездочки, снежинки
 &#9731;Снеговик
 &#10052;Снежинка
 &#10053;Зажатая трилистниками снежинка
 &#10054;Жирная остроугольная снежинка
 &#9733;Закрашенная звезда
 &#9734;Незакрашенная звезда
 &#10026;Незакрашенная звезда в закрашенном круге
 &#10027;Закрашенная звезда с незакрашенным кругом внутри
 &#10031;Вращающаяся звезда
 &#9885;Начерченная белая звезда
 &#9898;Средний незакрашенный круг
 &#9899;Средний закрашенный круг
 &#9913;Секстиле (типа снежинка)
 &#10037;Восьмиконечная вращающаяся звезда
 &#10057;Звёздочка с шарообразными окончаниями
 &#10059;Жирная восьмиконечная каплеобразная звёздочка-пропеллер
 &#10042;Шестнадцатиконечная звёздочка
 &#10041;Двенадцатиконечная закрашенная звезда
 &#10040;Жирная восьмиконечная прямолинейная закрашенная звезда
 &#10038;Шестиконечная закрашенная звезда
 &#10039;Восьмиконечная прямолинейная закрашенная звезда
 &#10036;Восьмиконечная закрашенная звезда
 &#10035;Восьмиконечная звёздочка
 &#10034;Звёздочка с незакрашенным центром
 &#10033;Жирная звёздочка
 &#10023;Заострённая четырёхконечная незакрашенная звезда
 &#10022;Заострённая четырёхконечная закрашенная звезда
 &#9055;Звезда в круге
 &#8859;Снежинка в круге
часы, время
 &#9200;Часы
 &#8986;Часы
 &#8987;Песочные часы
 &#9203;Песочные часы

Существует довольно интересный способ получения кода Html мнемоник для необходимого вам знака. Для этого достаточно будет открыть редактор Microsoft Word, создать новый документ и выбрать из верхнего меню «Вставка» — «Символ» (я пользуюсь 2003 версией, поэтому не знаю как сделать аналогичную операцию в более поздних версиях).

В открывшемся окне вам нужно выбрать шрифт, например, Times New Roman (или любой другой, который заведомо будет присутствовать на большинстве компьютеров посетителей вашего сайта — Courier или Arial, к примеру).

Открываем шрифт на редактирование

Добавьте из открывшегося списка в свой документ Word все нужные вам спецсимволы и сохраните данный вордовский документ как веб страницу (выбирается из выпадающего списка «.html» при сохранении). Ну, а затем вам лишь останется открыть эту веб страницу в любом Html редакторе (все тот же Notepad++ подойдет) и вы увидите все цифровые коды нужных вам мнемоник:

Пример вставки мнемоник в Html код

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

Неразрывный пробел и мягкий перенос в примерах

Как я уже упоминал выше и как вы можете видеть из приведенной чуть выше таблицы спецсимволов, некоторые мнемоники в Html получили кроме цифрового еще и символьное обозначение для их более простого запоминания. Т.е. вместо знака решетки «#» (хеша) в символьных вариантах используются слова. Например, все тот же неразрывный пробел может быть записан либо как &#160; (цифровая мнемоника), либо как &nbsp; (символьная).

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

Т.е., если вы пишите статью, в которой вам нужно будет в текст вставить, например, отображение тега < body> или же вам просто нужно вставить знак меньше (< ), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.

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

&lt;body>

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

&amp;lt;

Это нужно будет сделать, чтобы получить на странице &lt;, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику &lt;, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.

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

1400&nbsp;гБ.

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

длинноепредлин&shyноеслово;

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Комментарии и отзывы (18)

Сергей

Как всегда широко и открыто. Для новичков в самый раз. Дмитрий Вы молодец !

ApparaturaPC

Еще один RSS-читатель у Вас появился 😉

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

Сейчас уже список Html мнемоник запомнить сложно, поэтому лучше пользоваться специальной программой по выбору этих мнемоник (но и за таблицу спасибо =)

andrew87

О, как я просил, в примерах проще понимать, а то html сам по себе сложен. А так — конкретная таблица и самые используемые символы приведены.

Давайте поскорее уже о раскрутке, можно пошагово или какие-то эксперименты и их результаты описать.

Scorpio

Интересный портал. Регулярно читаю, часто беру на заметки Ваши советы. Дмитрий у меня вопрос, возможно не по теме. Я тут вот прочел Методы управления поведения роботом от яндекса _http://help.yandex.ru/webmaster/?id=1111858 в которой говорится о таком мета теге как <link rel="canonical". Я вот тут заметил что у Вас в тайтле тоже он прописан. Так вот, он влият как нибудь на улучшение позиций в индексе? Если да то можете объянить как он работает ну или статью написать =)

Дмитрий

Scorpio: действительно, Яндекс, с опозданием всего на пару лет относительно Google и других мировых лидеров поиска стал учитывать тег rel="canonical". Я уже когда-то писал о нем и о способах его правильной настройки для WordPress — Новый тег CANONICAL, предназначенный для удаления дубликатов страниц из индекса поисковиков.

Nyukers

Здравствуйте Дмитрий. Все ссылки от статьи открываются в Новом Окне. А нельзя ли сделать в Новой Вкладке ?

Игорь

Спасибо за примеры и классную табличку. Всё это возьму на вооружение.

Андрей

Хорошая статья. Кстати по адресу http://sitemaker.x10.bz/cheat_sheets.php можно найти удобную и очень полную таблицу по мнемоникам.

Profi30

Дмитрий, спасибо. Сколько раз читал, столько раз брал на заметку темы, освещённые вами. Да и эта интересная тема. А главное, далеко не все знают. И если в разговоре мелькает какой из тегов такого плана, часто приходится отдельно объяснять, почему так, а не иначе.

Семён

Огромное спасибо Дмитрию за такую замечательную тему.

Евгений

Спасибо. Наконец исправил ошибку валидатора 😉

Кирилл

Спасибо)

Роман

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

Тут може бігати Ваша реклама !           &nbspНе відкладайте в довгий ящик !     &nbsp      У нас дешево і дієво !

Похоже на бред, или так и должно быть ?

Роман

Извините код не дало

В тэге налепил по паре штук &nbsp между фразами

Виктор

«Офтоп»;

Блок слева «Это не реклама, а похожие статьи с этого же сайта (ссылки открываются в новом окне):», мне кажется рекламой именно потому, что я не успел дочитать статью, отвлекся и забыл о чем думал, когда появилось оно(((((

Желательно и я думаю меня поддержат, чтобы это окно открывалось только в присутствии конца статьи, т.е я «дочитал», а тут оно.

«По теме»:

Отичная статья, правда я не нашел то что искал, буду искать дальше.

Мирослав

Как убрать в вордпрессе разбивку слова при переносе оставшейся части на следующую строку?

Артем

ПОдскажите, как мне быть. У меня есть код:

$tm->textarea ('textshort', 5, 70, '', 1, '', '', 1);

, который выводит текстовое поле с прописанным уже html-кодом "", но, он выводится в одну строку:

, а мне хотелось бы что бы вывод был вот таким:

Куда копать ? 🙂

Алексей

Дмитрий, спасибо за обзор, познавательно. У меня вопрос

в заметке на вордпресс понадобилось использовать js-скриптик, где присутствует знак && (двойной амперсанд), и вот не получается его скормить вордпрессу ни как & ни как & ни как & говорит, мол Uncaught SyntaxError: Unexpected token &

Ваш комментарий или отзыв