<div>: Элемент разделения контента HTML

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

Атрибуты

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

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

Результат

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

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

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

• Семантические секционные элементы: <section>, <article>, <nav>, <header>, <footer>
• <span> элемент для стилизации или формулировки контента