<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>
на странице.
Примечание
Примеры
Простой пример
html
<div>
<p>Любой тип контента. Например, <p>, <table>. Все что угодно!</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