section要素とdivの違い
sectionと通常のdivを使い分けられるようにします
「section要素とdivの違い」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
section要素
<section>要素は、関連するコンテンツをテーマごとのセクションにまとめます：
<section>
<h2>Contact Information</h2>
<p>Email: hello@example.com</p>
<p>Phone: (555) 555-0100</p>
</section>sectionとdivの違い
重要な問いは、そのグループに名前を付けられるようなテーマや目的があるかどうかです：
<section>— ある場合に使用します。テーマごとのグループを表し、見出しを付けるべきです<div>— ない場合に使用します。スタイル設定やスクリプトのための単なるコンテナです
sectionには見出しが必要
すべての<section>には、見出し（<h2>〜<h6>）を付けるべきです：
<!-- Good: section with heading -->
<section>
<h2>Our Team</h2>
<ul>...</ul>
</section>
<!-- Bad: section without heading -->
<section class="hero"> <!-- should be a div -->
<img src="banner.jpg" alt="">
</section>sectionを使用する場面
<section>は、次のような場面で使用します：
- 文書の章
- ウィザードのタブやステップ
- 長い記事の各部分（Introduction、Methods、Results）
- ホームページのマーケティング用セクション（Features、Pricing、Testimonials）
divを使用する場面
意味上の役割を持たず、CSSやJavaScriptのためのコンテナだけが必要な場合は、<div>を使用します：
<div class="layout"> <!-- just a CSS grid container -->
<nav>...</nav>
<main>...</main>
</div>
<div id="modal"> <!-- a JavaScript-controlled modal -->
...
</div>長い記事内のsection
sectionを使って、article内に章を作成します：
<article>
<h1>Complete Guide to HTML5</h1>
<section>
<h2>Introduction</h2>
<p>HTML5 is the fifth version...</p>
</section>
<section>
<h2>Semantic Elements</h2>
<p>HTML5 introduced many semantic elements...</p>
</section>
<section>
<h2>Forms</h2>
<p>HTML5 greatly improved form handling...</p>
</section>
</article>ホームページのセクション
sectionで構造化したホームページ：
<main>
<section id="hero">
<h2>Build Better Web Apps</h2>
<p>The platform for modern developers.</p>
</section>
<section id="features">
<h2>Key Features</h2>
...
</section>
<section id="pricing">
<h2>Pricing</h2>
...
</section>
</main>sectionによる見出しのコンテキスト
sectionは、HTML5の文書アウトラインアルゴリズムにおいて、新しい見出しのコンテキストを作成します：
<section>
<h2>Chapter 1</h2> <!-- h2 within section context -->
<section>
<h3>Section 1.1</h3>
</section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->セクションのaria-labelledby
スクリーンリーダー向けに、sectionとその見出しを関連付けます：
<section aria-labelledby="features-heading">
<h2 id="features-heading">Features</h2>
<ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->判断フローチャート
どのコンテナ要素を使用すべきでしょうか？
- 主要なナビゲーション？ →
<nav> - ページの主要なコンテンツ？ →
<main> - 自己完結型のコンテンツ？ →
<article> - 見出しのあるテーマごとのグループ？ →
<section> - サイドバーや関連コンテンツ？ →
<aside> - 単なるスタイル用コンテナ？ →
<div>
見出しのないsectionにはdivを使用
sectionに見出しを付けられない場合は、代わりにdivを使用します：
<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
<div class="column">Left content</div>
<div class="column">Right content</div>
</div>確認問題
sectionよりもdivを優先すべきなのは、どのような場合ですか？
まとめ：sectionとdivの違い
sectionとdivの要点：
<section>— テーマごとのグループで、見出しを付けるべきです<div>— スタイル設定やスクリプトのための、意味上中立なコンテナです- sectionは、スクリーンリーダーでの移動に使える名前付きランドマーク領域を作成します
aria-labelledbyを追加して、sectionとその見出しを関連付けます- 迷った場合はdivを使用します。後からいつでもsectionに変更できます
よくある質問
「section要素とdivの違い」レッスンは無料ですか？
はい。「section要素とdivの違い」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「section要素とdivの違い」で何を学びますか？
sectionと通常のdivを使い分けられるようにします ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「section要素とdivの違い」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- header nav main footer
- article要素と自己完結型コンテンツ
- section要素とdivの違い
- time address mark