Development | Amber | Комментировать запись

Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.

В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.

Примечание: Найти все мануалы этой серии можно по тегу html-practice.

В этом мануале вы узнаете, чем отличаются строчные и блочные элементы в HTML и как они влияют на расположение фрагмента на странице.

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

В общем, существует два типа элементов – элементы строчные и блочные, – и их значения интервалов по умолчанию заметно отличаются. Ниже мы опишем, как настройки этих элементов по умолчанию определяют их положение на веб-странице и относительно соседних элементов.

Строчные элементы

Строчные элементы – это элементы, ширина которых по горизонтали определяется шириной их содержимого. Например, элементы <strong> и <em>, которые мы рассмотрели в прошлом руководстве – строчные.

Для проверки размера HTML-элементов на веб-странице мы можем использовать Firefox Web Developer Inspector.

Примечание: Если вы используете Chrome, вы можете использовать инструмент Developer Inspect Elements, но в этом руководстве мы приводим инструкции для Firefox Web Developer.

Вернитесь в файл index.html, который вы загрузили в свой браузер. Если вам нужно перезагрузить его, но вы не помните, как это сделать, обратитесь к предыдущему мануалу, Основы работы с HTML-элементами.

Затем перейдите к пункту меню Tools в верхней строке меню и выберите Web Developer/Inspector. Это откроет интерфейс Inspector, который позволяет проверять веб-страницы HTML и CSS. Затем наведите курсор на текст My strong text, что должно выделить текст голубым цветом. Это выделение показывает всю площадь, занимаемую элементом, над которым находится курсор. Как и следовало ожидать, занимаемое пространство элемента достаточно велико, чтобы вместить его текстовое содержимое.

В отличие от блочных элементов, которые мы рассмотрим в следующем разделе, строчные элементы не имеют собственных строк по горизонтали. То есть строчные элементы будут располагаться в одной строке подряд, если вы не добавите разрыв с помощью другого элемента HTML (элемент разрыва строки <br>). Это стандартное размещение обычно удобно использовать, так как это позволяет пометить отдельные слова в абзаце с помощью встроенного элемента, типа <strong> или <em>, без переноса соседнего текста на следующую строку.

Попробуйте добавить тег <br> между двумя строками кода в файле index.html. Для этого вам нужно будет вернуться к своему файлу в текстовом редакторе. Обратите внимание, что элемент <br> состоит только из открывающего тега и не помещает в себя текст:

<strong>My strong text</strong>
<br>
<em>My emphasized text</em>

Сохраните и перезагрузите документ в браузере, чтобы проверить результаты. Вы должны получить что-то вроде:

My strong text
My emphasized text

Теперь эти две фразы помещены на отдельных строках, так как они разделены элементом разрыва строки <br>.

Если вы используете Firefox Web Developer Inspector для проверки размера элементов, вы можете убедиться, что ширина каждого из текстовых элементов по-прежнему определяется шириной текстового содержимого. Для этого наведите на каждую из фраз, и вы увидите голубые пунктирные линии.

Блочные элементы

Блочные элементы ведут себя иначе, чем строчные элементы, поскольку они занимают всю строку горизонтального пространства на веб-странице. Это означает, что они автоматически начинаются с новой строки, а последующие элементы автоматически переносятся на новую строку.

Например, элементы заголовка HTML (от <h1> до <h6>) – это блочные элементы, которые автоматически помещают свое содержимое в новую строку и перемещают любое содержимое, которое идет за ним, на следующую строку. Каждый из этих шести элементов представляет собой заголовок разного размера.

Давайте посмотрим, как это работает на практике. В конец файла index.html попробуйте вставить выделенный фрагмент кода:

<strong>My strong text</strong>
<br>
<em>My emphasized text</em>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Сохраните файл и перезагрузите его в браузере. Вы должны получить такой результат:

My strong text
My emphasized text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Давайте теперь проверим блочные элементы заголовков, чтобы понять, чем они отличаются от строчных элементов. Откройте Firefox Web Developer Inspector и наведите указатель мыши на каждый из элементов, чтобы проверить занимаемое ими пространство, определяемое синим цветом. Вы должны увидеть, что занимаемое горизонтальное пространство каждого из строчных элементов определяется его текстовым содержимым, в то время как занятое горизонтальное пространство каждого из блочных элементов простирается на всю ширину страницы.

Блочные элементы всегда будут переносить строчные элементы на следующую строку, даже если вы запишете эти элементы HTML в одной строке документа HTML. Чтобы убедиться в этом, попробуйте написать блочный и строчный элемент в одной строке файла index.html. Удалите существующее содержимое из файла и добавьте следующий фрагмент кода:

<strong>My strong text</strong><h1>My heading</h1><em>My emphasized text</a>

Вы можете догадаться, как этот HTML-код будет отображаться в браузере? Сохраните файл и перезагрузите его в браузере. Вы должны получить что-то вроде этого:

My strong text

My heading

My emphasized text

Обратите внимание, что элемент заголовка <h1> начинается с новой строки и перемещает последующий текстовый элемент в новую строку, даже если элементы были записаны в одной строке документа HTML.

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