Статья, в которой повествуется об общих принципах, которые необходимы понимать для того чтобы знать как некоторый HTML-код будет выглядеть в браузере. Рассмотреть этот вопрос невозможно без затрагивания технологии CSS, т.к. именно она отвечает за отображение HTML-документа (HTML-элементов) в браузере. В этой статье коснёмся только общих понятий, т.к. без них будет довольно сложно постигать азы HTML5.

HTML-документ отображается в браузере в соответствии с моделью визуального форматирования (CSS visual formatting model). Данная модель представляет собой некоторый алгоритм, который сначала из HTML-элементов генерирует ящички (boxes), а затем эти ящички размещает по определённым правилам на веб-странице.

HTML 5 - Модель визуального форматирования

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

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

Кроме нормального потока есть и другие схемы позиционирования элементов (float, абсолютная), но их установка осуществляется уже с помощью средств CSS, которые будем рассматривать в соответствующем разделе.

Второй параметр, от которого будет зависеть как элемент (ящичек) будет располагаться на веб-странице - это его тип. Различают 2 основных типа HTML-элементов (с точки зрения CSS): блочный (block-level element) и строчный (inline-level element).

HTML 5 - Типы HTML-элементов (ящичков)

По умолчанию каждый HTML-элемент уже имеет свой предопределённый тип. Например, элементы p, div по умолчанию блочные, а элементы em, strong - строчные.

Внимание: С помощью CSS тип любого элемента можно изменить. Например, установить блочному HTML-элементу p строчный тип.

Как выполняется генерация ящичков из HTML-элементов, рассмотрим с помощью различных примеров.

Сначала рассмотрим простые примеры, когда из одного элемента генерируется один ящичек соответствующего типа.

Пример 1. Из пустого блочного элемента p генерируется один блочный ящичек (block box):

<p>></p>

HTML 5 - Из пустого блочного элемента p генерируется один блочный ящичек

Пример 2. Из строчного элемента span генерируется один строчный ящичек (inline box):

<span>Некоторый текст.</span>

HTML 5 - Из строчного элемента span генерируется один строчный ящичек

Теперь перейдём к рассмотрению более сложных примеров:

Пример 3. Блочный элемент div, содержащий некоторый текст.

<p>Текст...</p>

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

  • блочный ящичек p, который генерируется из блочного элемента p.
  • анонимный строчный ящичек, содержащий текст "Текст..." и располагающийся внутри блочного ящика p.

Ящички будут иметь следующую структуру:

HTML 5 - Ящички, которые будут генерироваться из блочного элемента p, содержащего текст

Почему так всё сложно? Это связано с тем, что блочный ящичек представляет собой структурный элемент и не может в себе напрямую содержать текст. Он предназначен только для того, чтобы в себе содержать другие ящички (строчные и блочные).

А так как текст не находится в каком-то определённом строчном HTML-элементе, то он предварительно заключается в анонимный строчный ящичек (anonymous inline box), который уже затем помещается в блочный ящичек.

Пример 4. Блочный элемент p, содержащий текст и строчный элемент strong.

<p>Некоторый <strong>очень важный</strong> текст.</p>

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

  • блочный ящичек p, который генерируется из блочного элемента p.
  • анонимный строчный ящичек, содержащий текст "Некоторый ", и располагающийся внутри блочного ящичка p.
  • строчный ящичек strong, содержащий текст "очень важный", и располагающийся внутри блочного ящичка p после анонимного строчного ящика.
  • анонимный строчный ящичек, содержащий текст " текст" и располагающийся внутри блочного ящичка p после строкового ящичка strong.

Ящички будут иметь следующую структуру:

HTML 5 - Ящички, которые будут генерироваться из блочного элемента p, содержащего текст и строчный элемент

Пример 5. Блочный элемент div, содержащий текст и блочный элемент p.

<div>Текст 1<p>Текст 2</p>Текст 3</div>

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

  • блочный ящичек, который генерируется из блочного элемента div.
  • анонимный блочный ящичек, находящийся в блочном ящичке div, и содержащий анонимный строчный ящик с текстом "Текст 1".
  • блочный ящичек p, находящийся в блочном ящичке div и содержащий анонимный строчный ящичек с текстом "Текст 2".
  • анонимный блочный ящичек, находящийся в блочном ящичке div и содержащий анонимный строчный ящичек с текстом "Текст 3".

Ящички будут иметь следующую структуру:

HTML 5 - Ящички, которые будут генерироваться из блочного элемента p, содержащего текст и блочный элемент

Почему так происходит? Это связано с тем, что происходит смешивание ящичков различных типов, находящихся на одном уровне вложенности. Т.е. когда строчный ящичек располагается до или после блочного ящичка, то он дополнительно оборачивается в анонимный блочный ящичек (anonymous block box).

Блочный ящичек - это контейнер (структурный элемент), который предназначен для размещения в нём других ящичков (блочных и строчных). Его основное назначение - это разметка веб-страницы на уровне блоков. Блочный ящичек представляет собой прямоугольник, имеющий ширину (width), высоту (height), внешние отступы (margin), внутренние отступы (padding), границу (border) и область для содержимого.

HTML 5 - Блочный ящичек (block box)

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

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

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

HTML 5 - Расположение блочных ящичков в нормальном потоке

Внимание: блочные ящички можно располагать только внутри блочных ящичков. Блочный ящичек нельзя размещать внутри строчных ящичков.

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

HTML 5 - Расположение строчных ящичков

Этим ящичкам нельзя установить строго определённую ширину (width) и высоту (height), т.к. их размеры вычисляются браузером автоматически.

Регулировка высоты этих ящичков осуществляется с помощью CSS свойства line-height (высота линии).

HTML 5 - Высота строчных ящичков

В отличие от блочных ящичков, в которых отступы CSS (margin и padding) играют значительную роль, здесь в них особого смысла нет. В первую очередь это касается строчных ящичков, содержимое которых размещается на нескольких строках. Для остальных строчных ящичков, т.е. для тех у которых содержимое, располагается в одной строке, можно использовать различные отступы (margin и padding) за исключением margin-top и margin-bottom.

Внимание: в строчный ящичек можно помещать только другие строчные ящички. Блочный ящичек(ки) располагать внутри строчного ящичка нельзя.
Предупреждение: с точки зрения CSS элементы делятся на блочные и строчные, а в HTML5 их следует применять в соответствии с их назначением. Тут возникает непонимание того, какой HTML-элемент необходимо использовать в том или другом случае. При добавлении некоторого элемента в HTML-документ необходимо руководствоваться не тем, как он будет выглядеть, а тем для чего он предназначен. Это основной принцип технологии HTML 5. Т.е. при создании веб-страницы HTML-элементы следует применять в соответствии с их назначением, а то как они будут выглядеть не важно. Так как это всегда можно изменить с помощью технологии CSS.

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

<!DOCTYPE html>
<html>
  <head>
    <title>Название страницы</title>
    <meta charset="utf-8">
  </head>
  <!--По умолчанию: div, h1, h2, p - блочные, а em и strong - строчные-->
  <body>
    <h1>Заголовок статьи</h1>
    <div>
      <h2>Заголовок раздела</h2>
      <p>
        Текст 
        <em>Курсивный текст</em>
        <strong>Полужирный текст</strong>
      </p>
      <p>Ещё некоторый текст</p>
    </div>
    <p>Информация <strong>Важная информация</strong></p>
  </body>
</html>

HTML 5 - Отображение HTML-документа в браузере