<div>: елемент поділу вмісту
Елемент HTML <div>
(розд.) – узагальнений контейнер для потокового вмісту. Він не впливає на свої зміст та верстання, поки не отримує певного оформлення засобами CSS (наприклад, певних стилів для себе та певної моделі верстання типу флексбоксу, застосованої до свого предка).
Спробуйте його в дії
Як "щирий" контейнер, елемент <div>
сам по собі нічого не означає. Натомість він використовується для групування вмісту, щоб його можна було легко стилізувати за допомогою атрибутів class
та id
, вказуючи частину документа як написану іншою мовою (за допомогою атрибута lang
), і так далі.
Атрибути
Цей елемент приймає глобальні атрибути.
Примітка: Атрибут
align
вийшов з ужитку; не слід його використовувати. Натомість для шикування та розташування<div>
елементів на сторінці варто використовувати властивості CSS чи техніки штибу сітки CSS або Флексбоксу CSS.
Примітки щодо використання
- Елемент
<div>
слід використовувати лише тоді, коли жодний інший семантичний елемент (наприклад,<article>
чи<nav>
) не є доречним.
Доступність
Елемент <div>
має неявну роль generic
, а не позбавлений ролі. Це може повпливати на певні оголошення комбінацій ARIA, що очікують на безпосереднього нащадка із певною роллю, аби коректно працювати.
Приклади
Простий приклад
<div>
<p>
Тут – вміст будь-якого роду. Наприклад, <p>, <table>. Вирішуйте
самі!
</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 |
Специфікації
Специфікація |
---|
HTML Standard (HTML) # the-div-element |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 Так |