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

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

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

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

Блочные элементы могут отображаться только внутри элемента <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>, <h2>, <h3>, <h4>, <h5>, <h6>: Заголовки от первого до шестого уровня.
<header>: Верхняя часть («шапка») раздела или страницы.
<hgroup>: Группирование заголовков раздела или страницы.
<hr>: Горизонтальная разделительная линия.
<li>: Пункт списка.
<main>: Содержит основной контент, уникальный для страницы.
<nav>: Содержит навигационные ссылки.
<ol>: Упорядоченный список.
<p>: Текстовый абзац.
<pre>: Предварительно форматированный текст.
<section>: Раздел веб-страницы.
<table>: Таблица.
<ul>: Неупорядоченный список.