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

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

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

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

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

• переносы строк;
• пустые строки;
• табуляция (или отступы).

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

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

<blockquote>
Первоначальная идея веба была в том, что он должен быть совместным


пространством,


где вы можете общаться путём обмена информацией.
</blockquote>

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

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

Табуляция

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

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

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

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

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

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

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

<article><p>Данный код написан в <strong>одну</strong> строку.</p></article>

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

<article>
  <p>
    Данный код написан в 
    <strong>несколько</strong>
    строк, но тем не менее, будет 
    отображаться как
    <em>одна</em>
    строка.
  </p>
</article>

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

• <article> является предком;
• <p> — родитель для <strong> и <em>;
• <strong> и <em> — это братские элементы.

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

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

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

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

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