<div>: コンテンツ区分要素

HTML の コンテンツ区分要素 (<div>) は、フローコンテンツの汎用コンテナーです。 CSS を用いて何らかのスタイル付けがされる (例えば、スタイルが直接適用されたり、親要素にフレックスボックスなどの何らかのレイアウトモデルが適用されるなど) までは、コンテンツやレイアウトには影響を与えません。

<div> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 class や id を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を (lang 属性を使用して) 示したりするために使用します。

この要素はグローバル属性を持ちます。

• <div> 要素は、他に適切な意味的要素（<article> や <nav> など）がない場合に限り使用してください。

<div> 要素は generic の暗黙のロールを持っており、まったくない訳ではありません。これは、特定の役割を持つ直接の子孫要素が適切に機能することを期待する、特定の ARIA の組み合わせ宣言に影響を与える可能性があります。

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

結果はこのようになります。

この例では CSS を用いて <div> にスタイルを適用することで、影付きのボックスを作成します。なお、 <div> 要素に class 属性を使用して、 "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> 要素