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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

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

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

<div>  <img    src="/shared-assets/images/examples/leopard.jpg"    alt="An intimidating leopard." />  <p>Beware of the leopard</p></div>

.warning {  border: 10px ridge #f00;  background-color: #ff0;  padding: 0.5rem;  display: flex;  flex-direction: column;}.warning img {  width: 100%;}.warning p {  font: small-caps bold 1.2rem sans-serif;  text-align: center;}

Являясь "чистым" контейнером, элемент<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>  <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);}