Setelah header, main, dan nav, dua elemen berikut sering saling dipertukarkan sampai kita memahami uji sederhananya. article menampung komposisi yang mandiri, sedangkan section menampung pengelompokan tematik di dalam dokumen. Chapter ini membahas definisi keduanya, tabel keputusan memilih article, section, atau div, serta pola komentar yang bersarang di dalam artikel.

article: Komposisi yang Mandiri #

Spesifikasi mendefinisikan article sebagai komposisi yang lengkap atau mandiri dan, pada dasarnya, dapat didistribusikan ulang secara terpisah — misalnya melalui syndication. Contoh yang disebut spesifikasi mencakup post forum, artikel majalah, post blog, kartu produk, dan komentar pengguna. Uji cepatnya: apakah tulisan ini masuk akal bila berdiri sendiri di feed RSS atau dipindah ke halaman lain tanpa konteks? Bila jawabannya ya, article adalah pilihannya.

Sifat mandiri tersebut berlaku pada berbagai skala. Satu post blog adalah article; satu kartu produk di halaman katalog pun adalah article, karena deskripsi produknya berdiri sendiri. Ukuran bukan penentu — kelengkapan maknalah yang dinilai.

section: Pengelompokan Tematik #

Elemen section merepresentasikan pengelompokan tematik konten, biasanya dengan heading sendiri. Contohnya bab pada buku, bagian “Alat” dan “Langkah” pada tutorial, atau halaman-halaman tab pada sebuah aplikasi. Spesifikasi menambahkan dua peringatan yang saling terkait: section bukan wadah generik, dan bila elemen hanya dibutuhkan untuk styling atau scripting, div yang tepat dipakai.

Heading di dalam section maupun article sangat dianjurkan. Heading itulah yang menyatakan tema kelompok tersebut kepada pembaca maupun screen reader; section tanpa heading sering kali merupakan tanda bahwa isinya belum jelas temuannya.

Kapan article, section, atau div #

Kondisi kontenElemen yang tepat
Komposisi mandiri, layak didistribusikan sendiriarticle
Kelompok tematik di dalam dokumen, biasanya dengan headingsection
Hanya butuh wadah untuk styling atau scriptingdiv

Urutan pertanyaannya bermakna. Uji syndication dijawab lebih dahulu karena lebih ketat: konten yang mandiri tetap boleh masuk article meskipun kita juga mengelompokkannya secara tematik. Konten yang gagal uji mandiri namun tetap memiliki tema berpindah ke section, dan sisanya — yang murni kebutuhan tata letak — jatuh ke div.

Nesting article dalam article #

Karena setiap komentar adalah komposisi mandiri, pola yang lazim adalah article di dalam article: artikel induk memuat post, dan setiap komentar menjadi article anak. Spesifikasi mengizinkan penyarangan ini tanpa batas; kita hanya perlu memastikan sifat mandiri setiap tingkatnya tetap masuk akal, sehingga satu komentar benar-benar dapat dibaca terpisah dari induknya.

Contoh Blog Post + Komentar #

Berkas berikut adalah satu post blog Budi dengan dua bagian tematik dan dua komentar dari pembaca:

html blog-post.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menyeduh Kopi Pour Over — Blog Budi</title>
</head>
<body>
  <header>
    <p>Blog Budi</p>
  </header>
  <main>
    <article>
      <header>
        <h1>Menyeduh Kopi Pour Over di Rumah</h1>
        <p>Penulis: Budi &middot; 8 Maret 2025</p>
      </header>
      <p>Pour over adalah teknik menyeduh kopi dengan mengalirkan air panas perlahan melalui kertas saring. Hasilnya berupa seduhan yang bersih dan ringan.</p>
      <section>
        <h2>Alat yang Dipersiapkan</h2>
        <p>Dripper keramik, kertas saring, timbangan dapur, dan teko dengan mulut sempit. Seluruh alat tersebut mudah ditemukan di toko peralatan kopi.</p>
      </section>
      <section>
        <h2>Langkah Menyeduh</h2>
        <p>Basahi kertas saring agar aromanya tidak ikut terbawa, lalu tuang air membentuk lingkaran dari tengah ke tepi. Tuangan dilakukan bertahap selama tiga menit.</p>
      </section>
      <section>
        <h2>Komentar</h2>
        <article>
          <header>
            <h3>Siti</h3>
            <p>10 Maret 2025</p>
          </header>
          <p>Rasio 1:15 berhasil pada percobaan pertama saya. Kopi terasa bersih tanpa endapan.</p>
        </article>
        <article>
          <header>
            <h3>Dewi</h3>
            <p>11 Maret 2025</p>
          </header>
          <p>Saya menambahkan satu tips: suhu air sekitar 90 derajat lebih aman agar rasa tidak getir.</p>
        </article>
      </section>
    </article>
  </main>
  <footer>
    <p>&copy; 2025 Blog Budi</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Nama "Blog Budi" di atas, lalu judul post dan baris penulis-tanggal
  - Dua sub-bagian "Alat yang Dipersiapkan" dan "Langkah Menyeduh"
  - Bagian "Komentar" berisi dua komentar dengan nama dan tanggal
  - Tulisan "(c) 2025 Blog Budi" di bagian bawah

Mari kita telaah keputusan strukturnya:

  1. Baris 13-44 (article induk): post berdiri sendiri dan layak muncul di feed RSS, sehingga uji syndication terpenuhi.
  2. Baris 14-17 (header lokal): judul dan meta artikel menempati pembuka article — pola dari chapter Header dan Footer.
  3. Baris 19-26 (dua section): “Alat” dan “Langkah” adalah pengelompokan tematik, masing-masing dengan h2 yang menyatakan temanya.
  4. Baris 27-43 (section Komentar dengan dua article): setiap komentar mandiri dan memakai header lokal dengan h3, sehingga tingkat heading tetap berurutan h1, h2, h3.
  5. Baris 12 dan 45 (main): seluruh post berada di dalam satu main sesuai aturan chapter Main.

Perhatikan bahwa wilayah komentar juga bisa ditulis sebagai bagian dari halaman, bukan dari artikel; pilihan itu tergantung apakah komentar dianggap bagian dari komposisi post. Chapter berikutnya membahas aside, elemen untuk konten yang berhubungan dengan tulisan tetapi tidak termasuk alur intinya.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

blog-post.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menyeduh Kopi Pour Over — Blog Budi</title>
</head>
<body>
  <header>
    <p>Blog Budi</p>
  </header>
  <main>
    <article>
      <header>
        <h1>Menyeduh Kopi Pour Over di Rumah</h1>
        <p>Penulis: Budi &middot; 8 Maret 2025</p>
      </header>
      <p>Pour over adalah teknik menyeduh kopi dengan mengalirkan air panas perlahan melalui kertas saring. Hasilnya berupa seduhan yang bersih dan ringan.</p>
      <section>
        <h2>Alat yang Dipersiapkan</h2>
        <p>Dripper keramik, kertas saring, timbangan dapur, dan teko dengan mulut sempit. Seluruh alat tersebut mudah ditemukan di toko peralatan kopi.</p>
      </section>
      <section>
        <h2>Langkah Menyeduh</h2>
        <p>Basahi kertas saring agar aromanya tidak ikut terbawa, lalu tuang air membentuk lingkaran dari tengah ke tepi. Tuangan dilakukan bertahap selama tiga menit.</p>
      </section>
      <section>
        <h2>Komentar</h2>
        <article>
          <header>
            <h3>Siti</h3>
            <p>10 Maret 2025</p>
          </header>
          <p>Rasio 1:15 berhasil pada percobaan pertama saya. Kopi terasa bersih tanpa endapan.</p>
        </article>
        <article>
          <header>
            <h3>Dewi</h3>
            <p>11 Maret 2025</p>
          </header>
          <p>Saya menambahkan satu tips: suhu air sekitar 90 derajat lebih aman agar rasa tidak getir.</p>
        </article>
      </section>
    </article>
  </main>
  <footer>
    <p>&copy; 2025 Blog Budi</p>
  </footer>
</body>
</html>