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- Видеоплеер.