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

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

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

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

Атрибути

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

[!NOTE] Атрибут 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);
}

Результат

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

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

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

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

• Семантичні розділові елементи: <section>, <article>, <nav>, <header>, <footer>
• <span> – елемент для оформлення оповідального вмісту