実務では、divは「カード」「ラッパー」「カラム」「ボックス」などの役割でよく使います。
例1 カード
<div class=“card”>
<img src=“img/sample.jpg” alt=“”>
<h3>タイトル</h3>
<p>説明文です。</p>
</div>
<img src=“img/sample.jpg” alt=“”>
<h3>タイトル</h3>
<p>説明文です。</p>
</div>
例2 横並びの箱
<div class=”container”>
<div class=”item”>A</div>
<div class=”item”>B</div>
<div class=”item”>C</div>
</div>
.container{
display:flex;
gap:20px;
}
例3 全体を包むラッパー
<div class=“wrapper”>
<header>…</header>
<main>…</main>
<footer>…</footer>
</div>
<header>…</header>
<main>…</main>
<footer>…</footer>
</div>
ここでのポイントは、divが意味の主役ではなく、レイアウトや管理の補助役だということです。
意味を持つ部分はheaderやmainなどに任せ、必要な箱だけdivで作るのがきれいです。