3分で簡単にわかる！HTMLのdivとsectionの違いとは？使い分けやコーディングのポイントもITオタクの会社員ライターがわかりやすく解説
<section>
<h2>見出し</h2>
<p>段落の文章。</p>
<img src=”画像のURL” alt=”画像の説明”>
</section>
このサンプルコードでは、section要素で見出し・段落・画像を囲んでいます。このようにsectionを使うことで、Webページの異なるセクションを表すことができるのでコードの可読性も向上するでしょう。
また、sectionでWebページを構造化するとSEO対策にも役立つので、Googleなどの検索エンジンがWebページのコンテンツをより正確に理解し検索上位を狙えるようにもなります。
divとsectionのHTMLコーディングのポイント
image by iStockphoto
divとsectionはHTMLのコーディングに必須な要素であり、Webページの構造化にはなくてはならないものです。しかし、どちらをどのように使うべきかについては混乱することもあるでしょう。ここでは、HTMLのコーディングでdivとsectionを使うポイントを解説していきます。
divとsectionの適切なネストの方法
divとsectionを用いてコーディングする際、これらの要素を適切にネストすることで、コンテンツの意味を明確にすることができます。
例えば、ヘッダー、メインコンテンツ、フッターの3つのセクションがあるWebページを考えてみましょう。この場合、section要素を使用してそれぞれのセクションを定義し、div要素を使用してそれらをグループ化することができます。以下は、適切なネストの例です。
<body>
<header>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
</header>
<div class=”container”>
<section>
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
</div>
<footer>
<p>© 2023 Example Co.</p>
</footer>
</body>
この例では、headerとfooterをsectionで囲み、メインコンテンツをグループ化するためにdivを使用しています。
divとsectionのクラス名の付け方
HTMLの要素には、class属性を指定してスタイルを適用することができます。class属性は、複数の要素に同じスタイルを適用する場合に便利です。div要素やsection要素にもclass属性を指定することができます。
例えば、ページ内のセクションごとに背景色を変える場合には、以下のようなclass属性を指定する方法が一般的です。
<section class=”section-1″>…</section>
<section class=”section-2″>…</section>
<section class=”section-3″>…</section>
また、divの要素に対してスタイルを適用する場合は、以下のようにclass属性を指定すると分かりやすくて便利です。
＼次のページで「divとsectionのスタイルの適用方法」を解説！／
おすすめの記事
Related Posts
