Использование пробельных символов для форматирования кода HTML

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

Оглавление
  1. Пробелы в языке гипертекстовой разметки, отступы и перенос текста
  2. Символы пробела, табуляции и переноса строки
  3. Мнемоники HTML в коде
  4. Примеры применения спецсимволов (неразрывный пробел, мягкий перенос и др.)

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

special-characters-html

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

 

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

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

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

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

2015-09-19_131634

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

2015-09-19_132107

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

2015-09-19_132552

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

2015-09-19_132847

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

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

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

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

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

2015-09-19_150813

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

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

2015-09-19_153221

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

2015-09-19_164341

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

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

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

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

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

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

1
 

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

1
 

В результате браузер отображает соответствующий символ. Список мнемоник очень объемный, наиболее часто применяемые спецсимволы 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;объединение
знаки валют
&euro;&#8364;Евро
¢&cent;&#162;Цент
£&pound;&#163;Фунт
¤&current;&#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;Песочные часы

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

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

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

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

1
&lt;footer&gt;

Кроме того, чтобы отобразить в браузере не сам знак амперсанда, а его обозначение в виде &lt;footer&gt;, нужно добавить из таблицы его код:

1
&amplt;footer&ampgt;

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

2015-09-20_190128

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

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

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

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

1
&nbsp;

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

1
1000&nbsp;руб.

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

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

1
длинноедлинноедлинноедлин&shy;ноедлинноеслово

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

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

2015-09-20_200925

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

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

 

Материал предоставлен Goldbusinessnet.com

Recent Posts

Leave a Comment

Обратная связь

Мы всегда придем к взаимовыгодному сотрудничеству. Все вопросы и пожелания можно писать тут.

Not readable? Change text. captcha txt

Start typing and press Enter to search