Блочные элементы
Исторически HTML-элементы было принято делить на блочные и строчные. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок» (отсюда и название).
Браузеры обычно отображают блочные элементы с переводом строки до и после элемента. Блочные элементы можно представить в виде стопки коробок. Следующий пример демонстрирует, как это выглядит:
Блочные элементы
HTML
<p>
Этот абзац — блочный элемент; его цвет фона покрашен, чтобы показать
родительский элемент абзаца.
</p>
CSS
p {
background-color: #8abb55;
}
Использование
- Блочные элементы могут отображаться только внутри элемента
<body>
и его потомков.
Блочные против строчных
Существует несколько ключевых отличий между блочными и строчными элементами:
- Содержание
-
Как правило, блочные элементы могут содержать строчные элементы и другие блочные элементы. Неотъемлемой частью этого структурного различия является идея, что блочные элементы создают «более крупную» структуру, чем встроенные элементы.
- Форматирование по умолчанию
-
По умолчанию блочные элементы начинаются с новой строки, а строчные могут начинаться в любом месте строки.
Разделение элементов на блочные и строчные использовалось в спецификации HTML до версии 4.01. В HTML5 это противопоставление заменено более сложным набором категорий контента. Категория «строчных» элементов примерно соответствует категории текстового контента, а для «блочных» элементов прямого соответствия нет, но «блочные» и «строчные» элементы вместе примерно соответствуют категории потокового контента в HTML5 (т.е., грубо говоря, «блочные» элементы — это потоковый контент минус текстовый контент). Кроме того, есть и другие категории, например, интерактивный контент.
Элементы
Ниже приведён полный список всех блочных элементов (хотя формально понятие «блочный» не применяется к новым элементам в HTML5).
<address>
-
Контактная информация.
<article>
-
Содержание статьи.
<aside>
-
Побочное содержание.
<blockquote>
-
Длинная («блочная») цитата.
<details>
-
Раскрывающийся блок с подробностями.
<dialog>
-
Диалоговое окно.
<dd>
-
Описание определения.
<div>
-
Фрагмент документа.
<dl>
-
Список определений.
<dt>
-
Термин в списке определений.
<fieldset>
-
Группирование элементов формы.
-
Описание для тега
<figure>
. <figure>
-
Группирование медиа-контента с подписью (см.
<figcaption>
). -
Нижняя часть («подвал») раздела или страницы.
<form>
-
Форма ввода.
<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
-
Заголовки от первого до шестого уровня.
<header>
-
Верхняя часть («шапка») раздела или страницы.
<hgroup>
-
Группирование заголовков раздела или страницы.
<hr>
-
Горизонтальная разделительная линия.
<li>
-
Пункт списка.
<main>
-
Содержит основной контент, уникальный для страницы.
-
Содержит навигационные ссылки.
<ol>
-
Упорядоченный список.
<p>
-
Текстовый абзац.
<pre>
-
Предварительно форматированный текст.
<section>
-
Раздел веб-страницы.
<table>
-
Таблица.
<ul>
-
Неупорядоченный список.