Пробелы и пробельные символы в языке Html

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

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

В Html в качестве пробельных символов используются:
  • пробел (клавиша пробела на клавиатуре)
  • табуляция (соответствующая клавиша)
  • перенос строки (клавиша Enter)

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

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

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

А Html коде web документа для формирования неразрывного пробела должно быть прописано, соответственно:

100 руб.

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

Удобное форматирование кода в Html и CSS

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

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

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


Наверх