--- title: Блочные элементы slug: Web/HTML/Block-level_elements tags: - HTML - HTML5 - Web - Начинающий - Разработка translation_of: Web/HTML/Block-level_elements ---

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

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

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

HTML

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

CSS

p { background-color: #8ABB55; }

{{ EmbedLiveSample('Block-level_Example') }}

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

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

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

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

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

Элементы

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

{{ HTMLElement("address") }}
Контактная информация.
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
Содержание статьи.
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
Побочное содержание.
{{ HTMLElement("blockquote") }}
Длинная («блочная») цитата.
{{ HTMLElement("details") }} {{ HTMLVersionInline(5) }}
Раскрывающийся блок с подробностями.
{{ HTMLElement("dialog") }} {{ HTMLVersionInline(5) }}
Диалоговое окно.
{{ HTMLElement("dd") }}
Описание определения.
{{ HTMLElement("div") }}
Фрагмент документа.
{{ HTMLElement("dl") }}
Список определений.
{{ HTMLElement("dt") }}
Термин в списке определений.
{{ HTMLElement("fieldset") }}
Группирование элементов формы.
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
Описание для тега {{ HTMLElement("figure") }}.
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
Группирование медиа-контента с подписью (см. {{ HTMLElement("figcaption") }}).
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
Нижняя часть («подвал») раздела или страницы.
{{ HTMLElement("form") }}
Форма ввода.
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
Заголовки от первого до шестого уровня.
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
Верхняя часть («шапка») раздела или страницы.
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
Группирование заголовков раздела или страницы.
{{ HTMLElement("hr") }}
Горизонтальная разделительная линия.
{{ HTMLElement("li") }}
Пункт списка.
{{ HTMLElement("main") }} {{ HTMLVersionInline(5) }}
Содержит основной контент, уникальный для страницы.
{{ HTMLElement("nav") }} {{ HTMLVersionInline(5) }}
Содержит навигационные ссылки.
{{ HTMLElement("ol") }}
Упорядоченный список.
{{ HTMLElement("p") }}
Текстовый абзац.
{{ HTMLElement("pre") }}
Предварительно форматированный текст.
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
Раздел веб-страницы.
{{ HTMLElement("table") }}
Таблица.
{{ HTMLElement("ul") }}
Неупорядоченный список.

 

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