HTML5 - Как происходит отображение HTML-документа в браузере

Статья, в которой повествуется об общих принципах, которые необходимы понимать для того чтобы знать как некоторый 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-документа в браузере



   HTML и CSS 0    1590 +1

Комментарии (9)

  1. ctac # 0
    не совсем понятно к чему все это разделение. как бы основного вывода та и нет!
    1. ctac # 0
      в следюущей статье itchief.ru/lessons/html-and-css/html-5-content-models говорится что h1 и тд это уже блочные эл-ты! где истина?
      1. Александр Мальцев # 0
        Там же сказано, что это было раньше до HTML5.
        С HTML5 создание разметки поменялось в корне, теперь каждый элемент несёт в себе какой-то смысл. Ваша задача как разработчика с точки зрения HTML5 сводится к разметке контента таким образом, чтобы с её помощью можно было понять, что это за контент и как он связан с другим. Т.е. теперь неважно как этот элемент будет выглядеть, мы просто вкладываем смысл с помощью этих элементов. Поэтому HTML5 называют семантическим.
        А вот настройка того как элемент будет отображаться уже выполняется с помощью CSS. Т.е. например мы можем сделать чтобы h1 визуально в браузере выглядел как блочный ящичек (h1 {display: block;}) или как строчный (h1 {display: inline;}) или как что-то другое. Но при этом смысл, который он в себе несет, не изменится.
        1. ctac # 0
          не доконца может понял все. но думаю разберусь, ну или не так существенно.
          а за сайт спасибо. полезный ) не забрасывайте это дело!
          1. Виктор # 0
            так при разработке отталкиваться от html 5 или 4? если от 5 то в предыдущих стотьях где то написано что многие его не поддерживают а лишь некоторые поддерживают
            1. Александр Мальцев # 0
              Там писалось немного про другое… А именно про то, что не все пользовательские агенты понимают HTML 5 структуру документа (document outline), т.е. не могут извлечь из неё смысл, т.к. она всё ещё находится в экспериментальной стадии. Т.е. если какой-то пользовательский агент поддерживает её, то вы получите плюс, но если нет, то не будет плюса, но и минуса тоже не будет. Но HTML 5 элементы поддерживаются почти всеми браузерами (это около 98%). А для остальных (в основном это Internet Explorer 8) добавляется эта поддержка с помощью плагина HTML5 Shiv.
              Для этого в раздел head необходимо добавить следующую строчку:
              <!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
              
              Там кроме плагина HTML5 Shiv добавлен ещё Respond.js. Он добавляет поддержку CSS3 медиа-запросов min-width и max-width в браузеры IE6-8.

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

              Разрабатывать сайт однозначно надо только на HTML 5. Консорциум W3C рекомендует его использовать при разработке сайтов ещё начиная с конца 2014 года. Конечно в стандарте есть некоторые предупреждения, например касаемые document outline. Но их надо просто учитывать и всё. В 2016 году уже будет рекомендован к разработке стандарт HTML 5.1.

              HTML 5, это не только элементы, но это ещё куча различных API. Проверить на каком уровне находится поддержка какого-то элемента или метода можно на сайте CanIUse.

              Также проверить поддержку элементов можно с помощью сайта HTML5 TEST. Поддержка элементов HTML5 находится на этом сайте в разделе Elements.
        2. Виктор # 0
          большое спасибо за информацию. Александр мне вот интересно вы где то учились или самоучка?
          1. Александр Мальцев # 0
            Что касается веба, то это в большей степени благодаря самостоятельному изучению. Тем более что здесь всегда приходится что-то изучать :)
            Если Вы про другое образование, а именно про учёбу в институте… То, изучал системное программирование, немного прикладного и многое другое, что не связано вообще с программированием… Т.е. как и большинство обычных людей. Как-то так…
            Самое главное, на мой взгляд — это научиться учиться самому )
            А также общаться с другими людьми, что-то новенькое читать (сайты, блоги, книги), задавать вопросы, интересное видео просматривать и т.д.
            1. Виктор # 0
              Спасибо!!!

          Вы должны авторизоваться, чтобы оставлять комментарии.