HTML :: Блочные и строчные элементы
Прежде, чем двигаться дальше, хотелось бы отдельно обратить внимание на еще два признака, по которым мы будем делить большинство элементов html -разметки. Дело в том, что при отображении элементов браузеры по умолчанию применяют к ним свойства CSS , имеющие заранее определенные значения. Одним из таких важных свойств является display, которое отвечает за то, как элемент будет отображаться при показе в документе. Значений у данного свойства достаточно много, но пока что нас будут интересовать только два из них: inline и block . Остальные значения мы рассмотрим в процессе изучения CSS .
(от англ. block) мы будем называть элемент, у которого свойство display по умолчанию устанавливается браузером как block . Такой элемент отображается браузером на веб-странице в виде прямоугольника, ширина которого равна максимально доступному в данной ситуации размеру, а высота определяется объемом его содержимого. Кроме того, блочные элементы отделяются от остального содержимого разрывами строк до и после элемента.
Одним из таких элементов является известный нам «Абзац» . На его примере мы и посмотрим, как же отображаются блочные элементы браузерами. Для этого создадим страницу с двумя абзацами, имеющими разный фон. Оформление фона и шрифта зададим при помощи атрибута style и значений атрибута, соответственно, в виде свойств CSS : color и background-color, которым присвоим разные цвета для наглядности. Исходный код показан в примере №1 .
Пример №1. Код страницы, содержащей два блочных элемента «Абзац»
Как видим, наши блочные элементы заняли всю доступную им ширину, хотя их строки значительно короче по длине. Во втором абзаце мы применили принудительный разрыв строки при помощи одиночного тега <br>. В результате высота второго блока автоматически увеличилась, чтобы вместить все содержимое. А поскольку по умолчанию браузер делает вертикальные отступы сверху и снизу блочных элементов, а текст выравнивает по левому краю, между абзацами виден пробел, а текст прижат влево.
Строчные html-элементы
(от англ. inline) мы будем называть элемент, у которого свойство display по умолчанию устанавливается браузером как inline . Такой элемент отображается браузером на веб-странице как часть строки, а его ширина определяется объемом содержимого.
Чтобы было понятней, рассмотрим код с применением строчных элементов (см. пример №2 ).
Пример №2. Код страницы, содержащей два строчных элемента «span»
Здесь поведение элементов в корне изменилось. В отличие от блочных элементов, ширина строчных элементов определилась браузером автоматически в зависимости от объема содержимого, а не стала равной максимально допустимой для данной ситуации. Кроме того, по умолчанию браузер не добавляет разрывов строк до и после строчных элементов, поэтому они располагаются один за другим и переносятся на новую строку по мере необходимости.
Значения практически всех элементов разметки, установленные по умолчанию, легко изменяются при помощи стилей CSS , которые как раз и отвечают за внешний вид документа. Главной же задачей элементов разметки является в большей степени логическое форматирование информации. Поэтому деление нами элементов на блочные и строчные весьма условно. Мы делаем это лишь для того, чтобы наглядно представлять себе их внешний вид и поведение при отображении браузерами по умолчанию без наложения собственных стилей CSS .
HTML — Строчные и блочные элементы
Элементы HTML по способу отображения на веб-странице делятся на строчные и блочные элементы.
Дефолтные стили браузера и их нормализация
Каждый браузер имеет дефолтные стили (user agent stylesheet). Эти стили задают оформление, которые HTML элементы имеют по умолчанию .
Т.е., если в браузере открыть HTML документ без привязанного к нему CSS кода, то он уже будет каким-то образом оформлен. Это базовое оформление задаётся с использованием стилей браузера.
Но в разных браузерах дефолтные стили могут быть различными.
Например, одном в браузере некоторый элемент может иметь одно оформление, а в другом другое.
Это не хорошая ситуация, т.к. в большинстве случаев желательно чтобы сайт или веб-приложение отображалось в разных браузерах одинаково, или очень близко к этому.
Для того чтобы нормализовать стили, которые отличаются в разных браузерах можно использовать Normalize.css.
После подключения этого файла все элементы в HTML документе будут отображаться более согласовано и в соответствии со современными стандартами.
Строчные и блочные элементы
Элементы HTML обычно являются строчными или блочными. Но это разделение существовало в HTML4. В HTML5 был предложен новый подход. В этом новом подходе применение того или иного HTML элемента должно определяться на основе контента, который он должен содержать. Для этого в HTML5 были введены категории контента, и описано какой элемент и к каким категориям может относится.
Тем не менее, это разделение никуда не делось, сейчас мы просто понимаем под этим стилевое отображение (значение CSS свойства display ) которое элемент имеет по умолчанию. Т.е. строчный элемент – это элемент, который по умолчанию имеет display: inline , а блочный тот у которого по умолчанию display: block .
Строчные элементы (inline)
Строчные элементы – это элементы, которые являются частью строки и занимают такое количество пространства, которое необходимо для отображения их содержимого.
Строчным элементам нельзя установить размеры ( width и height ), задать верхние и нижние margin отступы.
Для строчного элемента, размещенного на одной линии, можно использовать padding, margin-left и margin-right, border.
Для строчного элемента, размещенного на нескольких строках padding, margin и border обычно не используют, т.к. они в этом случае бесполезны.
Строчные элементы обычно используются для выполнения некоторых действий над текстом, например: перенос строки, выделения фрагмента текста курсивом, логического выделения некоторого текста и применения к нему стилей с помощью CSS и т.д. В зависимости от назначения строчного элемента фрагмент текста помещают между открывающим и закрывающим тегом или применяют тег в любом месте текста, например для переноса строки.
Например:
Можно использовать строчный элемент <strong> чтобы выделить текст, привлекающий внимание посетителей сайта с помощью жирного начертания.
Блочные элементы (block)
Блочные элементы в отличие от строчных элементов занимают по умолчанию всю ширину блока-контейнера, в которую они помещены. По этому признаку можно легко определить, к какому способу отображения относится элемент. Высота блочного элемента по умолчанию определяется автоматически и зависит от содержимого, которое в него помещено. Блочный элемент можно представить как прямоугольник, который имеет ширину ( width ) и высоту ( height ). Ширину и (или) высоту блочного элемента можно задавать вручную с помощью CSS свойств width и (или) height . Также блочные элементы имеют границы, которые можно оформлять с помощью стилей CSS. Кроме этого блочным элементам можно задавать отступы внешние и внутренние. Внешний отступ ( margin ) – это отступ от границы до элемента контейнера или до соседних блочных элементов. Внутренний отступ ( padding ) – это отступ для содержимого блока, который задаётся от границы.
Блочные элементы могут содержать строчные элементы и другие блочные элементы, для которых их родитель будет являться контейнером. Блочные элементы предназначены для разработки каркаса веб-страницы, разметки больших блоков текста и много другого.
Блочная модель — Основы современной верстки
Представьте себе процесс строительства дома. Условно его можно разделить на несколько этапов: возведение структуры дома и его отделка. При возведении дома мы заливаем фундамент, возводим стены, устанавливаем крышу. После этого уже переходим к покраске дома, устанавливаем окна и занимаемся декорированием.
Процесс создания верстки можно описать похожими процессами. В ней так же важна роль возведения структуры и отделки. Для этого существуют несколько основных типов элементов:
- Блочные элементы (Block level). Эти элементы отвечают за каркас страницы.
- Строчные элементы (Inline level). Они помогают нам в процессе стилизации страницы или добавления функциональных частей.
Важно: сами по себе элементы HTML не являются блочными или строчными. HTML — всего лишь разметка. За то, будет элемент блочным или строчным, отвечает CSS. Для всех HTML-тегов существуют стандартные модели вывода, которые по умолчанию настроены в браузере, поэтому понятие блочных и строчных элементов обычно соотносят с определенными тегами, так как они имеют стандартное поведение при добавлении на страницу. В уроках соответствие тегов и значения условно, так как это поведение легко изменить с помощью CSS свойства display .
Блочные элементы
Основная особенность блочных элементов — они занимают всю доступную им ширину. Из-за этого другие элементы до и после блочных элементов не встают в один ряд с ними, а располагаются до или после них, но уже на другой строке.
Представьте, что у вас есть шкаф и коробки с шириной, равной ширине шкафа. В этом случае мы не можем поставить коробки рядом друг с другом, так как для этого у нас не будет пространства. Единственное решение — класть коробки друг на друга. Блочные элементы ведут себя точно таким же образом.
В HTML-разметке такие коробки могли бы выглядеть следующим образом:
На примере этой разметки уже стало понятно, что элемент <div> является блочным элементом. Он занимает всю доступную ширину, и из-за этого другие элементы не встают с ним в один ряд.
Стоит отдельно отметить понятие «занимает всю доступную ширину». Что же именно скрывается за этой доступной шириной? Ширина всей страницы, ширина экрана или ширина дороги близ деревни Ракушки? На самом деле доступная ширина — вся доступная ширина родителя. То есть, если наш блок лежит внутри <body> , то эта ширина будет равна именно ширине <body> . Стоит изменить ширину <body> , так сразу изменится и ширина блочного элемента внутри.
Какие же еще элементы являются блочными? На самом деле их так много, что просто делать перечисление не очень верно. В процессе углубления в верстку вы сами обнаружите, какие элементы являются блочными. Основными же блочными элементами являются:
- <div>
- <p>
- Теги списков: <ul> / <ol> / <li>
- Заголовки: <h1> / <h2> / <h3> / <h4> / <h5> / <h6>
Внутрь блочных элементов мы можем вкладывать другие блочные элементы. Это позволяет нам делать сложную верстку, оперируя различными компонентами, которые будут созданы.
Как вы видите, внутрь блочных элементов <div> мы положили другие такие же блоки, а также заголовок и параграф. Такая вложенность может достигать любого уровня.
Важно: хоть HTML и позволяет бесконечно вкладывать блоки друг в друга, лучше сохранять здравый смысл. Дело в том, что процесс вывода верстки достаточно долгий для браузеров. На это тратится довольно много ресурсов. И чем больше вложенность блоков друг в друга, тем сложнее браузеру и компьютеру все это обработать
Вложенность блочных элементов друг в друга ограничена только несколькими пунктами:
- Нельзя вкладывать заголовки в заголовки
- Нельзя вкладывать параграфы в параграфы
Скорее всего с этим у вас проблем не возникнет, так как представить себе ситуацию с заголовком внутри заголовка достаточно трудно.
Для создания блочного элемента используется тег <div> . Он не имеет никаких дополнительных стилей, кроме блочного отображения. Этим тегом оборачивается связанная информация, создаются каркасы компонентов. Но тег не является семантичным, то есть не несет смысловой нагрузки. Подробнее о семантических элементах будет в следующем уроке
Строчные элементы
Строчные элементы являются отделочным материалом, с помощью которого мы можем выделить участки текста, или добавить немного логики, как в случае со ссылками. Строчные элементы противоположны блочным. Они не занимают всю доступную ширину и из-за этого не происходит переноса соседних элементов.
Давайте добавим в прошлый пример строчный элемент:
Что произошло? Мы обернули слово здесь в ссылку, которая уведет пользователя в то место, которое мы укажем. Что произойдет в браузере при добавлении этого тега? Ссылка станет синего цвета и появится подчеркивание. Но сам текст останется на месте, так как ширина ссылки будет равна ширине слова здесь.
Если представить наши строчные элементы в виде коробок, то они расположатся следующим образом:
Это главная отличительная черта строчных элементов. Помимо этого есть важная особенность, связанная с применением свойств width и height в CSS. Для строчных элементов эти свойства не работают. Их применение не даст никакого эффекта.
Наиболее часто используемыми строчными элементами являются:
- <span>
- <a>
- Теги выделения текста: <i> / <em> / <b> / <strong>
Так же, как и блочные элементы, мы можем вкладывать строчные элементы внутрь строчных. Это распространенная практика, которая вам пригодится. Например:
Используйте <span> для дополнительных стилей внутри блочных элементов, например параграфов. Например,
Теперь можно использовать <span> для создания дополнительных стилей, например для другого цвета или шрифта
Важно: не вкладывайте внутрь строчных элементов блочные. Это нарушает семантику и усложняет чтение кода
Блочная модель документа
Еще до работы с CSS полезно понимать, как браузер выводит элементы на вашу страницу. Помимо естественных свойств высоты и ширины, любой элемент на странице может иметь следующие свойства:
- padding — Внутренние отступы элемента
- margin — Внешние отступы от элемента
- border — Видимые границы элемента
Каждое из них не просто выполняет ту функцию, которая указана, но и напрямую влияет на конечные значения высоты и ширины элемента.
Представьте, что у нас есть квадрат со стороной 150 пикселей. Мы добавили к нему рамку в 2 пикселя, внутренний отступ в 10 пикселей с каждой стороны и по 20 пикселей внешнего отступа с каждой стороны.
Сколько места будет занимать наш квадрат на странице? Для этого нам надо суммировать все значения.
Ширина: 150px (начальная ширина) + 2px (граница справа) + 2px (граница слева) + 10px (внутренний отступ справа) + 10px (внутренний отступ слева) + 20px (Внешний отступ справа) + 20px (Внешний отступ слева) = 214px
Высота: 150px (начальная высота) + 2px (граница сверху) + 2px (граница снизу) + 10px (внутренний отступ сверху) + 10px (внутренний отступ снизу) + 20px (Внешний отступ сверху) + 20px (Внешний отступ снизу) = 214px
Дополнительное задание
Воспользуйтесь любым онлайн сервисом, который умеет преобразовывать HTML разметку. Например, https://htmlcodeeditor.com/ .
Вставьте в левую область следующую разметку:
Попробуйте изменять блочные и строчные теги, добавлять и удалять их. Посмотрите, как будет меняться поведение.
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар «Как самостоятельно учиться»
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Строчные и блочные элементы HTML
Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью 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> состоит только из открывающего тега и не помещает в себя текст:
Сохраните и перезагрузите документ в браузере, чтобы проверить результаты. Вы должны получить что-то вроде:
My strong text
My emphasized text
Теперь эти две фразы помещены на отдельных строках, так как они разделены элементом разрыва строки <br>.
Если вы используете Firefox Web Developer Inspector для проверки размера элементов, вы можете убедиться, что ширина каждого из текстовых элементов по-прежнему определяется шириной текстового содержимого. Для этого наведите на каждую из фраз, и вы увидите голубые пунктирные линии.
Блочные элементы
Блочные элементы ведут себя иначе, чем строчные элементы, поскольку они занимают всю строку горизонтального пространства на веб-странице. Это означает, что они автоматически начинаются с новой строки, а последующие элементы автоматически переносятся на новую строку.
Например, элементы заголовка HTML (от <h1> до <h6>) – это блочные элементы, которые автоматически помещают свое содержимое в новую строку и перемещают любое содержимое, которое идет за ним, на следующую строку. Каждый из этих шести элементов представляет собой заголовок разного размера.
Давайте посмотрим, как это работает на практике. В конец файла index.html попробуйте вставить выделенный фрагмент кода:
Сохраните файл и перезагрузите его в браузере. Вы должны получить такой результат:
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 в будущем.