Section vs Article

Dua elemen ini paling sering dipertukarkan. Keduanya membungkus konten, keduanya biasanya ber-heading, keduanya bisa bersarang. Padahal pembeda sebenarnya hanya satu pertanyaan: kontennya MANDIRI atau tidak?

Aturan penentunya: konten yang tetap masuk akal saat dicabut dari halaman — layak disindikasikan ke feed — memakai article. Kelompok yang justru kehilangan makna bila dicabut, karena hanya bagian dari kesatuan lebih besar, memakai section. Mekanisme ini terasa nyata saat isi dipindahkan: article tetap utuh di feed pembaca, sedangkan section tanpa halamannya hanya potongan tanpa konteks.

Tabel Perbandingan #

Kasus Nyata #

• Halaman berita: setiap berita adalah article — sindikasikan kapan pun; seluruh kolomnya dibungkus section “Berita Utama” karena grup itu hanya wadah bertema di halaman tersebut.
• Komentar: satu article di dalam article — komentar mandiri, dan artikel tetap utuh tanpanya.
• FAQ: section untuk seluruh daftar, satu article per pasangan tanya-jawab — tiap pasangan layak berdiri sendiri di halaman bantuan.

Contoh Kombinasi #

<main>
  <h1>Kabar Kedai Kopi Siti</h1>

  <section>
    <h2>Berita Utama</h2>

    <article>
      <h3>Biji Gayo Sampai</h3>
      <p>Biji dari koperasi di Aceh tiba pekan ini.</p>
      <footer>
        <p><time datetime="2026-11-02">2 November 2026</time></p>
      </footer>
    </article>

    <article>
      <h3>Kelas Latte Art Dibuka</h3>
      <p>Delapan kursi Sabtu pagi setiap pekan.</p>
      <footer>
        <p><time datetime="2026-11-05">5 November 2026</time></p>
      </footer>
    </article>
  </section>

  <section>
    <h2>Komentar Pembaca</h2>
    <article>
      <h3>Dewi</h3>
      <p>Sudah coba Gayo-nya — empuk dan manis.</p>
    </article>
  </section>
</main>

Hasil Render: judul halaman, dua berita dengan tanggal, lalu satu komentar — semua tersusun menurun. Mari kita telaah:

1. Baris 4-22 (<section> “Berita Utama”): grup tematik — dicabut dari halaman, judulnya kehilangan konteks; ia hanya wadah di halaman ini.
2. Baris 6-12 dan 14-20 (dua article): masing-masing berita mandiri — masukkan ke feed RSS atau kirim ke pembaca, maknanya tetap utuh.
3. Baris 24-30 (section + article komentar): daftar komentar dikelompokkan section; satu komentar adalah article di dalamnya.
4. Heading bertingkat: h1 untuk halaman, h2 untuk nama kelompok, h3 untuk judul konten — urutan ini menjaga outline dokumen rapi.

Ringkasan #

• Pertanyaan penentu: mandiri? article — kelompok tematik? section.
• article layak disindikasikan; section hanya bermakna dalam kesatuannya.
• Berita = article; kolom berita = section; komentar = article dalam article.
• Pola umum: section > article > (header, isi, footer).

Chapter berikutnya menyusun proses keputusan untuk semua elemen semantik sekaligus.