<div>: елемент поділу вмісту

Елемент HTML <div> (розд.) – узагальнений контейнер для потокового вмісту. Він не впливає на свої зміст та верстання, поки не отримує певного оформлення засобами CSS (наприклад, певних стилів для себе та певної моделі верстання типу флексбоксу, застосованої до свого предка).

Спробуйте його в дії

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

Атрибути

Цей елемент приймає глобальні атрибути.

Примітка: Атрибут align вийшов з ужитку; не слід його використовувати. Натомість для шикування та розташування <div> елементів на сторінці варто використовувати властивості CSS чи техніки штибу сітки CSS або Флексбоксу CSS.

Примітки щодо використання

  • Елемент <div> слід використовувати лише тоді, коли жодний інший семантичний елемент (наприклад, <article> чи <nav>) не є доречним.

Доступність

Елемент <div> має неявну роль generic, а не позбавлений ролі. Це може повпливати на певні оголошення комбінацій ARIA, що очікують на безпосереднього нащадка із певною роллю, аби коректно працювати.

Приклади

Простий приклад

<div>
  <p>
    Тут – вміст будь-якого роду. Наприклад, &lt;p&gt;, &lt;table&gt;. Вирішуйте
    самі!
  </p>
</div>

Результат

Стилізований приклад

Цей приклад створює рамки з тінню, за допомогою CSS застосовуючи до <div> стиль. Зверніть увагу на використання на <div> атрибута class для застосування до елемента стилю "shadowbox".

HTML

<div class="shadowbox">
  <p>Тут – вельми цікава примітка, показана в принадній рамці з тінню.</p>
</div>

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);
}

Результат

Технічний підсумок

Категорії вмісту Потоковий вміст, відчутний вміст.
Дозволений вміст Потоковий вміст.
Або (в HTML за WHATWG): якщо предок – елемент <dl>: один чи більше елементів <dt>, після чого – один чи більше елементів <dd>, необов'язково помежованих елементами <script> і <template>.
Пропуск тега Немає; і початковий, і кінцевий теги – обов'язкові.
Дозволені предки Будь-який елемент, що приймає потоковий вміст.
Або (у HTML за WHATWG): елемент <dl>.
Неявна роль ARIA generic
Дозволені ролі ARIA Усі
Інтерфейс DOM HTMLDivElement

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
div
Chrome Full support Так
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support Так
Opera Full support Так
Safari Full support Так
WebView Android Full support Так
Chrome Android Full support Так
Firefox for Android Full support 4
Opera Android Full support Так
Safari on iOS Full support Так
Samsung Internet Full support Так
align
Нерекомендоване Нестандартне
Chrome Full support Так
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support Так
Opera Full support Так
Safari Full support Так
WebView Android Full support Так
Chrome Android Full support Так
Firefox for Android Full support 4
Opera Android Full support Так
Safari on iOS Full support Так
Samsung Internet Full support Так

Дивіться також