Вы здесь: Главная » HTML » Блочные теги в HTML

Блочные теги в HTML

Блочные теги в HTML - это основа построения страницы. Они занимают все пространство родительского элемента (как минимум родителем будет тег body), имеют свойство display: block и свойство width: auto.

К блочным элементам относятся:

Абзацы - тег <p>

Это блочный элемент, который предназначен для форматирования основного текста. В книгах, журналах, газетах текст статьи всегда разбит на абзацы, для того чтобы как-то выделить отдельные смысловые блоки. То же самое касается текста на сайте - чтобы он нормально воспринимался, все содержимое страницы необходимо делить на абзацы, добавляя в разметку теги <p> ... </p>.

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

Пример:

Вживую:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto beatae optio tenetur odio culpa minima.

Omnis suscipit nostrum eos facilis dolore, consequuntur magnam enim ea. Nostrum reprehenderit adipisci, eligendi ad?

Porro dolore, dolorem reiciendis sint. Eum beatae quam corporis itaque consequatur laborum voluptate pariatur nisi?

На скриншоте видно, что абзацы выровнялись вдоль всей страницы. Поскольку текста в них немного, то каждый абзац занимает всего одну строку. Если текста будет больше, то, соответственно, текст расположится в 2, 3, 4 или более строк. Но даже между нашими короткими абзацами видны отступы. Внизу картинки показан открытый Инспектор элементов, в котором слева мы видим html-код, а справа - css-свойства, которые существуют в любом браузере для каждого элемента по умолчанию, а также те, которые будем назначать сами. Открыть Инспектор можно с помощью сочетания клавиш Ctrl + Shift + I или F12, а также сделав правый клик на элементе и выбрав опцию "Просмотреть код" (Chrome, Opera, Yandex, Saphari) или "Исследовать элемент" (Firefox).

На картинке справа подчеркнуты свойства display: block, -webkit-margin-before и  -webkit-margin-after со значением 1em, т.е. это значение соответствует размеру шрифта, установленного в браузере по умолчанию. Обычно это 16px. Собственно, именно это значение видно для выделенной полосы сверху и снизу блока в виде margin 16px.

Абзацы в HTML

Поскольку для форматирования текста одних абзацев недостаточно, разбавим текст заголовками.

Заголовки на странице

Заголовков в HTML существует 6 видов. все они начинаются с h и цифры, т.е. h1, h2,  h3 ... и до h6. Они также являются блочными, и занимают все пространство до конца родительского элемента, даже, если текста в них намного меньше. На скриншоте ниже видно, что h1, выделенный голубым, занимает всю строку.

Lorem ipsum dolor sit amet

Labore rem dolor pariatur unde

Atque numquam, expedita voluptates libero

Nisi quod sapiente sed excepturi

Distinctio aliquid rerum assumenda dolorum
Optio impedit atque ipsam.

Самым главным и самым большим по размеру является h1. С точки зрения SEO, т.е. оптимизации сайта для продвижения его в поисковых системах, h1 на странице должен быть только один. Как правило, это название страницы (Главная, О компании, Контакты и т.п.) или название статьи, например,  "Блочные теги в HTML".

Заголовки различаются по размеру. Это свойство в css определяются как font-size. Например, для h1, как видно из картинки это свойство составляет 2em.

Заголовки, как и абзацы имеют по умолчанию отступ сверху и снизу, определяемый значением свойства margin (выделены оранжевым цветом), а также выделение жирным цветом, которое задается css-свойством font-weight: bold.

Заголовки в HTML

Основные блоки - <div>

Для разметки страницы очень важны элементы, которые будут, по сути "кирпичиками", т.е. основой визуального форматирования. Для этого существуют блоки, задаваемые тегом <div>. Они также имеют свойство display: block, но при этом не имеют отступов.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quod fugiat a voluptatum eaque error. Voluptatibus laboriosam, magnam, blanditiis quis quasi odit maxime tempora at architecto quibusdam iusto earum quidem.
Unde quisquam non earum cumque quas nostrum doloribus, molestias at adipisci, provident eos laboriosam tenetur cum incidunt sit cupiditate ratione culpa enim! Recusandae quis amet vel nemo, nam optio, magni.
Error repellat cupiditate reiciendis? Recusandae, quia. At doloremque incidunt repellendus illum quae, sit quis, nulla dignissimos veniam, dolore facilis id expedita quam tempora? At sequi voluptate consequatur ab quod magni.

На скриншоте видно, что div имеет свойство display: block, а вот свойство  margin у него отсутствует.

Элемент div

Div-ы - это важные элементы для формирования внешнего вида сайта, хотя, казалось бы, ничем особым они не выделяются. Дело все в том, что этим элементам чаще всего задают такие атрибуты, как class и id, для того, чтобы задать собственные css-свойства. Например, div-ы c class="dark" будут в примере ниже иметь рамку (border: 2px solid #aaa), темный цвет фона (background-color), светлый цвет текста (color: #aaa), а также внутренние отступы (padding: 10px)  и внешние отступы, которые отодвигают блоки друг от друга (margin: 10px).

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, voluptatem!
Adipisci facilis, nesciunt cupiditate consequatur laboriosam iure et, quisquam ut!
Repudiandae expedita, inventore cum voluptatem aliquid rem consectetur libero tempora!

divы с классом

Кстати, у тега body тоже по умолчанию есть отступы в 8px:

Отступы в body

Блочная цитата <blockquote>

Не слишком часто используемый элемент. Но в некоторых случаях незаменимый. <blockquote> - это блочная цитата, которая по умолчанию имеет отступы сверху и снизу, как у абзацев, но также у нее есть отступы справа и слева в 40px (см. скриншот), которые смещают ее по сравнению с остальным текстом как бы внутрь. Поэтому используют этот тег для выделения текста, который может быть некой цитатой: либо кого-то из известных людей, либо какого-то текста из статьи, который стоит выделить, либо чужого текста в сообщении на форуме.

Тег blockquote

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

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta provident laudantium aliquid perferendis nulla culpa facere nihil laboriosam? Ducimus dignissimos quibusdam sed cum, provident asperiores, accusamus numquam quidem sit molestias.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa libero eos quis explicabo voluptatibus fugiat et quam labore vitae consequuntur?

Quae nostrum modi molestias, maxime vel repellat quaerat facilis, asperiores ipsam placeat nulla voluptates quas repudiandae dolore quam. Inventore, debitis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta provident laudantium aliquid perferendis nulla culpa facere nihil laboriosam? Ducimus dignissimos quibusdam sed cum, provident asperiores, accusamus numquam quidem sit molestias.

Aliquam repudiandae repellat id necessitatibus labore quasi ab, iusto perspiciatis dolor molestias saepe, nemo quas blanditiis illum, maxime in totam.

Minus perspiciatis ab est saepe, ex placeat adipisci ea repellat aspernatur distinctio quod cumque ratione asperiores rem voluptate ut tempora.

О списках вы можете прочитать в другой статье, также к блочным элементам относятся тег form и теги для описания и стилевого оформления изображений или кода figure и figcption. Остальные элементы рассмотрим несколько позже.

Кроме блочных, в HTML часто используются строчные, или линейные, теги и строчно-блочные элементы, которые находятся как бы между ними, т.к. имеют свойство display: inline-block.

Мы заметили подозрительную активность с вашего ip адреса .

2 комментария

  1. С блочными тегами понятно более-менее.
    А что такое inline-block? Зачем они нужны?

    • Элементы с display:inline-block хорошо использовать для форматирования кнопок, например. Также с их помощью можно разбить текст на колонки (блоки) одинаковой ширины. У них есть свои особенности, которые следует учитывать при верстке и назначении стилевых свойств. Подробнее в статье Особенности блоков с display:inline-block.

Добавить комментарий

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