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

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

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

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

### HTML


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

### CSS


```css
p {
  background-color: #8abb55;
}
```

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

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

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

Содержание

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

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

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

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

Элементы
--------

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

`<address>`

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

`<article>`

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

`<aside>`

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

`<blockquote>`

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

`<details>`

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

`<dialog>`

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

`<dd>`

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

`<div>`

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

`<dl>`

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

`<dt>`

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

`<fieldset>`

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

`<figcaption>`

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

`<figure>`

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

`<footer>`

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

`<form>`

Форма ввода.

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

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

`<header>`

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

`<hgroup>`

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

`<hr>`

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

`<li>`

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

`<main>`

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

`<nav>`

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

`<ol>`

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

`<p>`

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

`<pre>`

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

`<section>`

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

`<table>` (en-US)

Таблица.

`<ul>`

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

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

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