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

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

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

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

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

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

пробел (клавиша пробела на клавиатуре)
табуляция (соответствующая клавиша)
перенос строки (клавиша Enter)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Форматирование HTML

Существует разница между тем, что написано в вашем коде HTML и что отображается в браузере.

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

Мы также видели, как можно писать комментарии в коде HTML, чтобы помочь человеку с чтением кода, без необходимости отображать эти комментарии в браузере.

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

Переносы строк

Переносы строк и пустые строки (которые представляют собой последовательность переносов строк) в коде HTML игнорируются браузером. Они составляют лишь единое пространство.

 Первоначальная идея веба была в том, что он должен быть совместным пространством, где вы можете общаться путём обмена информацией.

Чтобы реально вставить перенос строки вам нужно использовать элемент
:

В лучшем случае, жизнь совершенно
непредсказуема

Табуляция

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

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

 Давайте толкнём этот текст табуляцией.

Если вы хотите добавить пространство перед словом, вам придётся использовать CSS.

Если вы хотите закрыть элемент HTML, то должны сперва закрыть все его дочерние элементы.

Форматирование в виде дерева

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

Данный код написан в одну строку.

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

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

Форматирование в виде дерева позволяет визуально воспроизвести уровень вложенности вашего кода HTML. Это позволяет легко увидеть, что:

Пишите HTML для себя, чтобы его читать

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

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

Нет конкретных правил, касающихся форматирования HTML, но есть неявные соглашения, в частности:

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

Источник