องค์ประกอบ section เทียบกับ div

องค์ประกอบส่วนเนื้อหา

<section>
  <h2>Contact Information</h2>
  <p>Email: hello@example.com</p>
  <p>Phone: (555) 555-0100</p>
</section>

ส่วนเนื้อหากับตัวครอบ

ส่วนเนื้อหาต้องมีหัวข้อ

<!-- 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>

เมื่อใดควรใช้ส่วนเนื้อหา

เมื่อใดควรใช้ตัวครอบ

<div class="layout">   <!-- just a CSS grid container -->
  <nav>...</nav>
  <main>...</main>
</div>

<div id="modal">       <!-- a JavaScript-controlled modal -->
  ...
</div>

ส่วนเนื้อหาในบทความยาว

<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>

ส่วนต่าง ๆ ของหน้าแรก

<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>
  <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 aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->

แผนผังการตัดสินใจ

ส่วนเนื้อหาไม่มีหัวข้อ: ให้ใช้ตัวครอบ

<!-- 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>

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทบทวน: ส่วนเนื้อหากับตัวครอบ