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

Исторически HTML-элементы было принято делить на блочные и строчные. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).

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

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

HTML

<p>Этот абзац — блочный элемент; его цвет фона покрашен, чтобы показать родительский элемент абзаца.</p>

CSS

p { background-color: #8ABB55; }

Использование

  • Блочные элементы могут отображаться только внутри элемента <body> и его потомков.

Блочные против строчных

Существует несколько ключевых отличий между блочными и строчными элементами:

Содержание

Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру, чем встроенные элементы.

Форматирование по умолчанию

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

Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01. В HTML5 это противопоставление заменено более сложным набором категорий контента. Категория «строчных» элементов примерно соответствует категории текстового контента, а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории потокового контента в HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент.

Элементы

Ниже приведён полный список всех блочных элементов (хотя формально понятие «блочный» не применяется к новым элементам в HTML5).

<address>

Контактная информация.

<article> HTML5

Содержание статьи.

<aside> HTML5

Побочное содержание.

<blockquote>

Длинная («блочная») цитата.

<details> HTML5

Раскрывающийся блок с подробностями.

<dialog> HTML5

Диалоговое окно.

<dd>

Описание определения.

<div>

Фрагмент документа.

<dl>

Список определений.

<dt>

Термин в списке определений.

<fieldset>

Группирование элементов формы.

<figcaption> HTML5

Описание для тега <figure>.

<figure> HTML5

Группирование медиа-контента с подписью (см. <figcaption>).

Нижняя часть («подвал») раздела или страницы.

<form>

Форма ввода.

<h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US)

Заголовки от первого до шестого уровня.

Верхняя часть («шапка») раздела или страницы.

<hgroup> HTML5

Группирование заголовков раздела или страницы.

<hr>

Горизонтальная разделительная линия.

<li>

Пункт списка.

<main> HTML5

Содержит основной контент, уникальный для страницы.

Содержит навигационные ссылки.

<ol>

Упорядоченный список.

<p>

Текстовый абзац.

<pre>

Предварительно форматированный текст.

<section> HTML5

Раздел веб-страницы.

<table> (en-US)

Таблица.

<ul>

Неупорядоченный список.

Смотрите также