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

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

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

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

HTML

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

CSS

p { background-color: #8ABB55; }

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

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

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

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

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

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

Элементы

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

<address>
Контактная информация.
<article> HTML5
Содержание статьи.
<aside> HTML5
Боковое содержание.
<audio> HTML5
Аудиоплеер.
<blockquote>
Длинная цитата.
<canvas> HTML5
Полотно (холст).
<dd>
Описание определения.
<div>
Фрагмент документа.
<dl>
Список определений.
<fieldset>
Группирование элементов формы.
<figcaption> HTML5
Описание для тега <figure>.
<figure> HTML5
Группирование медиа-контента с подписью (см. <figcaption>).
<footer> HTML5
Нижняя часть («подвал») раздела или страницы.
<form>
Форма ввода.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Заголовки от первого до шестого уровня.
<header> HTML5
Верхняя часть («шапка») раздела или страницы.
<hgroup> HTML5
Группирование заголовков раздела или страницы.
<hr>
Горизонтальная разделительная линия.
<li>
Пункт списка.
<main>
Содержит основной контент, уникальный для страницы.
<nav>
Содержит навигационные ссылки.
<noscript>
Содержимое, которое показывается, если JavaScript не поддерживается или выключен.
<ol>
Упорядоченный список.
<output> HTML5
Область вывода информации.
<p>
Текстовый абзац.
<pre>
Предварительно форматированный текст.
<section> HTML5
Раздел веб-страницы.
<table>
Таблица.
<tfoot>
«Подвал» таблицы.
<ul>
Неупорядоченный список.
<video> HTML5
Видеоплеер.

 

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

Метки документа и участники

 Внесли вклад в эту страницу: Filofei, Selenia_6, SnejUgal, Anton.Yurovskykh, bracket, alexander-lis, Mishman, artcygn
 Обновлялась последний раз: Filofei,