Пробелы и спецсимволы (мнемоники) в Html коде, неразрывный пробел и другие специальные символы, форматирование Html и CSS кода
Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. В этой статье я хочу продолжить публикацию материалов в рубрику Html для чайников. Чуть ранее мы уже успели поговорить о том, что такое язык Html и тэги в валидаторе W3C, так же узнали про оформление комментариев в Html и назначение Doctype. Сегодня у нас на очереди понятие пробела в Html, а так же связанное с ним форматирование Html кода при его написании (для удобства последующего его чтения и восприятия).
Ну, и в связи с тем, что мы затронем тему неразрывного пробела и мягкого переноса, нам придется акцентировать наше внимание на так называемых спецсимволах или мнемониках (специальных символах) в Html, которые позволят вам добавить в код web документа множество дополнительных символов, вроде уже упомянутого выше неразрывного пробела и мягкого переноса. Но обо всем по порядку.
Пробелы и пробельные символы в языке Html
По умолчанию, при резиновой верстке сайта, браузер старается заполнить текстом все свободное пространство по ширине, но как только изменится ширина этого пространства, то сразу же изменится и формирование текста. Возникают новые переносы, т.е браузер динамически переформатирует ваш текст на основании символов пробела. В Html в качестве пробельных символов используются:
- пробел (клавиша пробела на клавиатуре)
- табуляция (соответствующая клавиша)
- перенос строки (клавиша Enter)
Именно по каким-то из этих символов пробела в Html коде и будет осуществляться перенос строки при форматировании текста в браузере. У разных посетителей вашего сайта будут разные размеры экрана браузера и, следовательно, перенос текста во всех этих случаях может происходить по разному (если вы используете, например, резиновый макет — Div верстка в Html и CSS). Типичным примером может служить поисковая выдача Яндекса, где макет подстраивается под размер экрана по ширине, но до определенной минимальной ширины.
Но даже если вы используете фиксированный макет, то все равно при написании статьи в визуальном редакторе используемого вами движка сайта (cms), вы не сможете точно знать, где именно будет осуществляться перенос строки и по какому именно пробельному символу.
В связи с этим возникает вопрос: как не допустить разрыва конструкций типа «100 руб.» при формировании переноса в браузере по символу пробела в Html коде? Ответом на этот вопрос может служить использование в Html коде не обычного символа пробела, а спецсимвола (мнемоники) неразрывного пробела, который может выглядеть как:
|
А Html коде web документа для формирования неразрывного пробела должно быть прописано, соответственно:
100 руб. |
Спецсимвол (мнемоника) неразрывного пробела не будет интерпретироваться браузером как обычный символ пробела и перенос по нему осуществляться не будет ни при каких обстоятельствах. Иногда бывает нужно, наоборот, осуществлять принудительную разбивку (перенос) длинного слова при изменении размера окна браузера по так называемой метке мягкого переноса, которая тоже формируется на основе специального символа Html. Но об этом мы поговорим чуть позже.
Удобное форматирование кода в Html и CSS
Особенностью языка гипертекстовой разметки является то, что любое количество пробельных символов идущих подряд, браузером заменяется при разборе Html кода на один единственный пробел. Что это нам дает? Ну, давайте подумаем.
Если десятки проставленных подряд в Html коде пробелов, сотни переносов строк подряд и столько же расположенных подряд знаков табуляции в окне браузера все равно отобразятся как один пробел, то можно использовать эту особенность языка гипертекстовой разметки для удобного нашему пониманию форматирования Html кода, чтобы потом можно было бы легко визуально отделить друг от друга разные элементы, контейнеры, таблицы и легко проверить наличие для них закрывающих тегов.
Например, такой Html код с обилием лишних пробельных символов (пробелы, табуляции и переносы строк), которые нужных только для визуального форматирования кода, будет выглядеть очень легкочитаемым:
пробел в html коде
Например, такой Html код с обилием лишних пробельных символов (пробелы, табуляции и переносы строк), которые нужных только для визуального форматирования кода, будет выглядеть очень легкочитаемым:
Кстати, все вышесказанное о пробелах в Html коде будет справедливо и при написании кода CSS файлов, где вы сможете использовать удобное вам форматирование за счет лишних пробелов, переносов и табуляций, чтобы проще было бы найти и отделить друг от друга отдельные группы кода.
Уже после того, как вы все отладите и всесторонне протестируете, то сможете сжать CSS (удалить из кода все символы пробела, табуляции и переноса) для повышения скорости загрузки сайта.
Правда, для форматирования Html кода чаще всего в качестве пробельных символов используют не сами пробелы, а символы табуляции и переноса строки. Есть такое правило — когда начинаете писать вложенный Html тег, то сделайте отступ с помощью символа табуляции (клавиша Tab на клавиатуре), а когда этот тег закрываете то уберите отступ (сочетание клавиш Shift+Tab на клавиатуре).
Делать это нужно так, чтобы открывающий и закрывающий Html тэги были бы на одном вертикальном уровне (на одинаковом количестве табуляций от правого края страницы вашего Html редактора, например, Notepad++). Кроме этого советую, непосредственно после написания открывающего Html тега, сделать несколько переносов строки и сразу же прописать закрывающий тег на том же уровне (количестве табуляций), чтобы потом не забыть это сделать.
Т.е. открывающий и закрывающий Html теги должны стоять на одном уровне по вертикали, а внутренние теги сдвигаем на один знак табуляции и располагаем закрывающие и открывающие опять же на одном уровне. Для простых Html документов это может показаться излишеством, но при создании более менее сложных документов ваш Html код станет гораздо более наглядным и читаемым за счет обилия пробельных символов, а так же в нем будет гораздо проще заметить ошибки за счет симметричного расположения тегов.