Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы уже много говорили про особенности языка HTML и даже пытались сравнить структуру HTML со структурой HTTP протокола. Так же мы разбирались с тем, как браузер интерпретирует HTML документ. В этой записи мы на практике посмотрим, что делает браузер с HTML тэгами и ответим на вопросы: «что такое HTML элемент и для чего нужны HTML элементы?». Если вы поймете, как работает браузер с кодом HTML и поймете, принцип формирования HTML элементов, то вам не составит никакого труда разобраться с языком HTML.

Виды HTML элементов: блочные элемент и строчные HTML элементы

Виды HTML элементов: блочные элемент и строчные HTML элементы

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

Виды HTML элементов. Что такое HTML элемент?

Когда мы рассматривал синтаксис HTML и HTML тэги, мы уже упоминали HTML элементы. Давайте сперва ответим на вопрос: «Что такое HTML элементы?». Чтобы ответить на этот вопрос нужно немного понимать, как работает браузер. Когда браузер получает HTML документ, он считывает тэги, написанные в HTML документе, по этим тэгам он создает HTML страницу, которую пользователь видит на экране.

Всё, что вы видите на странице в области просмотра браузера – это HTML элементы. Таким образом мы выяснили разницу между HTML тэгами и HTML  элементами: HTML элементы – это то, что пользователь видит на странице в браузере, а HTML тэги – это то, что разработчик пишет, когда создает HTML документ.

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

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

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

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

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

  • HTML тэг <div>, который создает блоки на странице;
  • HTML тэг <p>, который делит HTML документ на параграфы или абзацы;
  • тэги HTML списка: <ol>, <ul>, <li> и другие;
  • HTML заголовки.

Ключевой особенностью блочных HTML элементов является то, что ширина блочных HTML элементов по умолчанию (если не заданы какие-либо ограничивающие правила) определяется областью просмотра браузера или шириной HTML элемента, в которую вложен данный элемент. Другими словами: блочный HTML элемент занимает максимально возможную ширину. От этого эти элементы и получили название блочные. Или так: блочный HTML элемент по ширине занимает все доступное пространство.

Если HTML страницу представить, как стену, то блочный HTML элемент – это плита, ширина которой равняется ширине стены. Высота блочного HTML элемента равна высоте его содержимого плюс внутренние отступы блочного HTML элемента. Про внутренние отступы мы поговорим, когда начнем рассматривать CSS. Сейчас добавим, что если у блочного HTML элемента нет содержимого, то его высота равна нулю, но ширина равна ширине области, в которой данный элемент расположен.

Мы описали все ключевые особенности блочных HTML элементов. Примеры блочных HTML элементов вы найдете в конце данной записи, перейдем к строчным HTML элементам. Важным правилом стандарта HTML является то, что внутри тэга <body>, строчные HTML элементы располагаться не могу, они должны быть расположены внутри блочных HTML элементов.

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

Строчные HTML элементы – это такие HTML элементы, ширина которых, равна ширине их содержимого. Если у строчного HTML элемента нет содержимого, то его ширина будет равна нулю. Ширина строчного HTML элемента зависит только от ширины его содержимого, поэтому строчные HTML элементы могут занимать несколько строк. Другими словами, строчные HTML элементы могут быть перенесены на новую строку.

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

В качестве примера строчных HTML элементов можно привести:

  • HTML тэг <a>, с помощью которого мы можем создавать ссылки;
  • HTML тэг <span>, позволяющий нам оформлять участки текста внутри параграфа;
  • HTML тэг <em>, который говорит браузеру о том, что текст является важным и браузер выделяет этот текст курсивом;
  • HTML тэг <strong>, так же говорит, что текст важен, но браузер выделяет такой текст жирным.

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

Примеры блочных HTML элементов

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

[php]

<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title>Пример блочных HTML элементов</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content" style="width: 800px; margin: 0 auto;">
<h1>Пример блочных HTML элементов в браузере</h1>
<p>HTML тэг параграфа является парным HTML тэгом и блочным
HTML элементом, ширина которого, равна ширине области,
в которой он расположен. Высота блочного HTML элемента
равна высоте его содержимого плюс внутренние отступы.</p>

<h2>HTML список — это тоже блочный HTML элемент.
Маркированный список создается с помощью тэгов ul и li. </h2>
<ul>
<li>первый элемент списка;</li>
<li>для примера нам нужно, чтобы второй элемент был длиннее;</li>
<li>а этот короче.</li>
</ul>
</div>
</body>
</html>

[/php]

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

Расположение блочных HTML элементов на странице

Расположение блочных HTML элементов на странице

Давайте дадим небольшие пояснения к коду HTML и тому, что мы видим на странице браузера. Внутри HTML тэга <body> у нас расположен тэг <div>. HTML элемент DIV является блочным, по идеи, он должен был занять всю ширину области просмотра в браузере, но мы ограничили его ширину при помощи HTML атрибута style. В этом можно убедиться, воспользовавшись консолью: нажмите F12 и в появившемся дереве наведите курсор на DIV, вы увидите:

Размеры блочного HTML элемента DIV

Размеры блочного HTML элемента DIV

Во-первых, браузер подсветил нам HTML элемент DIV на странице, во-вторых, браузер показал размеры HTML элемента: высоту и ширину. Если вы будете наводить курсор мыши на другие элементы, то увидите, что их ширина равна 800px, так все они расположены внутри блока DIV, ширину которого мы явно указали и равна она 800px.

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

Давайте выполним эксперимент с блочными HTML элементами: откройте тестовую страницу в браузере на всю ширину вашего экрана: вы увидите, что содержимое расположилось четко по середине страницы, этого мы добились за счет CSS свойства margin и значения 0 auto, которое мы ему задали.

А теперь начните потихоньку сужать ширину окна браузера, сначала вы увидите, что контент «начинает двигаться» к левой границе окна, когда ширина окна браузера станет 800px, у вас не останется белых полей ни справа, ни слева, всю ширину займет блочный HTML элемент:

Ширина блочных HTML элементов в данный момент равна ширине окна браузера

Ширина блочных HTML элементов в данный момент равна ширине окна браузера

Если вы продолжите сужать окно браузера, то увидите, что контент начнет уходить за правую границу браузера, а снизу области просмотра у вас появится скролл, который нужен для того, чтобы вы смогли увидеть всё содержимое HTML элемента:

Ширина блочного HTML элемента больше, чем область просмотра браузера

Ширина блочного HTML элемента больше, чем область просмотра браузера

Обратите внимание: мы не увидели того, что ширина блочного HTML элемента зависит от ширины области просмотра, такое поведение вызвано тем, что мы задали фиксированную ширину для блока <div>, которая равна 800px. Более подробно об этом мы поговорим, когда будем рассматривать фиксированную блочную верстку макета. Но сейчас вам нужно запомнить: если вы задали фиксированную ширину для блочного элемента, то он не будет подстраиваться под область просмотра.

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

Примеры строчных HTML элементов

Давайте посмотрим на пример того, как браузер работает со строчными HTML элементами. Создайте HTML документ, как это показано в примере ниже:

[php]

<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title>Пример строчных HTML элементов</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">
<h1>Пример строчных HTML элементов в браузере</h1>
<p>HTML тэг span является парным HTML тэгом и строчным
<a href="#">HTML элементом</a>, <span style="font-weight: bold; color: red;">
ширина которого, равна ширине его содержимого,
Высота строчного HTML элемента равна высоте его
содержимого.</span></p>
</div>
</body>
</html>

[/php]

Во-первых, мы не стали ограничивать ширину блока DIV, убрав атрибут style. Во-вторых, на странице два строчных HTML элемента: HTML ссылка <a> и строчный HTML элемент SPAN. Воспользовавшись консолью, вы увидите, что ширина строчного элемента SPAN равна ширине текста:

Пример того, что ширина строчного HTML элемента равна ширине контента

Пример того, что ширина строчного HTML элемента равна ширине контента

А ширина блочного элемента P, равна ширине окна браузера:

А ширина блочного HTML элемента равна ширине области просмотра браузера

А ширина блочного HTML элемента равна ширине области просмотра браузера

Когда вы начнете сужать окно браузера, то увидите, что строчки, а, соответственно, и строчные HTML элементы будут переноситься браузером. А вот блочные HTML элементы будут сохранять ширину области просмотра:

Различие в поведение строчных и блочных HTML элементов

Различие в поведение строчных и блочных HTML элементов

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

Возможно, эти записи вам покажутся интересными


Выберете удобный для себя способ, чтобы оставить комментарий

This article has 1 comment

  1. Женька Reply

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

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

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Loading Disqus Comments ...