Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Элемент разделения контента HTML (<div>) является базовым контейнером для элементов основного потока ( flow content ). Он не влияет на контент или формат пока не стилизован, используя CSS. Являясь "чистым" контейнером, элемент <div> по своему существу не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя class или id атрибуты, помечая секцию документа, написанную на разных языках (используя атрибут lang), и так далее.

Категории контента Flow content, palpable content.
Разрешённый контент Flow content.
Или (в WHATWG HTML): Если родитель является элементом <dl>: один или несколько элементов <dt>, сопровождаемый одним или более <dd> элементами, в ряде случаев смешанный с <script> и <template> элементами.
Опускание тэгов Нет. Открывающий и закрывающий тэг являются обязательными.
Разрешённые родители Любой элемент, который разрешает flow content.
Или (в WHATWG HTML): <dl> элемент.
Разрешённые ARIA-роли Любые
DOM интерфейс HTMLDivElement

Атрибуты

Этот элемент включает глобальные атрибуты.

Атрибут align является устаревшим; не используйте его больше. Вместо, вам следует использовать CSS свойства или техники, такие как CSS Grid или CSS Flexbox для выравнивания и изменения положения <div> элементов на странице.

Указания по применению

  • Элемент <div> следует использовать только в том случае, если никакой другой семантический элемент (такой как <article> или <nav>) не подходит.

Примеры

Простой пример

<div>
  <p>Any kind of content here. Such as
  &lt;p&gt;, &lt;table&gt;. You name it!</p>
</div> 

Результат будет выглядеть так:

Стилизованный пример

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

HTML

<div class="shadowbox">
  <p>Here's a very interesting note displayed in a
  lovely shadowed box.</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 Living Standard
Определение '<div>' в этой спецификации.
Живой стандарт С последнего снапшота изменений нет
HTML5
Определение '<div>' в этой спецификации.
Рекомендация Устарело: align
HTML 4.01 Specification
Определение '<div>' в этой спецификации.
Рекомендация  

Браузерная совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
align
УстаревшаяНестандартная
Chrome Полная поддержка ДаEdge Полная поддержка ДаFirefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: Everloop, kayablue, vocasle
Обновлялась последний раз: Everloop,