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

Элемент разделения контента 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

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