<div>: базовый блочный элемент

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Элемент разделения контента HTML (<div>) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.

Интерактивный пример

Являясь "чистым" контейнером, элемент <div>, по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты class или id, помечать раздел документа, написанный на разных языках (используя атрибут lang), и так далее.

Категории контента Потоковый контент, явный контент.
Допустимое содержимое Потоковый контент или (в WHATWG HTML), если родительским является элемент <dl>: один или несколько элементов <dt>, сопровождаемых одним или более элементами <dd>, в ряде случаев смешанных с элементами <script> и <template>.
Пропуск тегов Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
Допустимые родители Любой элемент, который разрешает потоковый контент в качестве содержимого.. Или (в WHATWG HTML): элемент <dl>.
Допустимые ARIA-роли Любые
DOM-интерфейс HTMLDivElement

Атрибуты

К этому элементу применимы глобальные атрибуты.

Примечание: Атрибут align устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства CSS или методы, такие как CSS Grid или CSS Flexbox для выравнивания и изменения положения элементов <div> на странице.

Примечание

  • Элемент <div> следует использовать только в том случае, если никакой другой семантический элемент (такой как <article> или <nav>) не подходит.

Примеры

Простой пример

html
<div>
  <p>Любой тип контента. Например, &lt;p&gt;, &lt;table&gt;. Все что угодно!</p>
</div>

Результат будет выглядеть так:

Стилизованный пример

Этот пример создаёт прямоугольник с тенью, применяя стили к <div> с помощью CSS. Заметьте, что использование атрибута class на элементе <div> даёт применение стилей "shadowbox" (в дословном переводе означает "теневая коробка") к элементу.

HTML

html
<div class="shadowbox">
  <p>Вот очень интересная заметка в прекрасном прямоугольнике с тенью.</p>
</div>

CSS

css
.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

Результат

Спецификации

Specification
HTML Standard
# the-div-element

Совместимость с браузерами

BCD tables only load in the browser

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