semanticarticlesectionMahir3 mnt baca

article, section, aside

Bedakan article, section, dan aside: kapan mandiri, kapan pengelompok.

Tiga Tag yang Sering Tertukar

Setelah menguasai header, nav, main, dan footer, tiga tag berikutnya yang paling sering membingungkan adalah article, section, dan aside. Ketiganya terlihat mirip karena sama-sama pembungkus konten, tetapi menjawab pertanyaan yang berbeda: apakah konten ini mandiri, apakah ini pengelompok tema, atau apakah ini hanya pelengkap? Salah memilih membuat struktur halaman menyesatkan bagi screen reader dan mesin pencari.

article: Konten yang Bisa Berdiri Sendiri

html

<article>
  <h2>Resep Kopi Tubruk Sempurna</h2>
  <p>Dipublikasikan 5 Oktober 2026 oleh Raka.</p>
  <p>Langkah pertama: panaskan air hingga 90 derajat...</p>
</article>

Tesnya sederhana: kalau potongan konten ini disalin ke situs lain, apakah maknanya tetap utuh? Kalau ya, ia layak menjadi article. Contoh nyata: postingan blog, kartu berita, ulasan produk, komentar pengguna. Satu article bahkan boleh bersarang di dalam article lain, seperti komentar di dalam postingan blog.

section: Mengelompokkan Tema dalam Satu Halaman

html

<section>
  <h2>Menu Minuman</h2>
  <ul>
    <li>Kopi Tubruk</li>
    <li>Es Teh Manis</li>
  </ul>
</section>
<section>
  <h2>Menu Makanan</h2>
  <ul>
    <li>Roti Bakar</li>
    <li>Mie Goreng</li>
  </ul>
</section>

section mengelompokkan konten bertema sama di dalam satu halaman: daftar fitur, testimoni, daftar harga. Aturannya: tiap section idealnya punya heading sendiri (h2, h3, dan seterusnya). Kalau kelompokmu tidak butuh judul sama sekali, kemungkinan besar div polos lebih tepat daripada section.

Contoh Realistis: Halaman Blog Lengkap

html

<main>
  <article>
    <h1>Cara Menyeduh Kopi di Rumah</h1>
    <p>Panduan lengkap untuk pemula...</p>
    <aside>
      <h2>Tentang Penulis</h2>
      <p>Raka, barista sejak 2020.</p>
    </aside>
  </article>
  <section>
    <h2>Artikel Terkait</h2>
    <ul>
      <li><a href="#">Memilih Biji Kopi</a></li>
      <li><a href="#">Teknik Pour Over</a></li>
    </ul>
  </section>
</main>

Perhatikan aside di sini berisi info penulis: terkait dengan artikel, tetapi bukan konten utamanya. Kalau aside dihapus, artikel tetap utuh. Itu ciri khas aside: konten pelengkap seperti sidebar, iklan, atau kotak "baca juga". Posisi aside juga fleksibel, bisa di dalam article, di dalam main, atau bahkan di luar keduanya sebagai sidebar halaman.

Jangan Kebalik: Panduan Cepat

Tag	Pakai saat
`article`	konten bisa berdiri sendiri (postingan, berita)
`section`	mengelompokkan tema dalam satu halaman
`aside`	pelengkap, bukan konten utama
`div`	murni pembungkus untuk styling

Kesalahan paling umum adalah membungkus setiap bagian halaman dengan section, termasuk pembungkus yang sebenarnya hanya untuk styling. Akibatnya outline dokumen penuh dengan section tanpa makna. Uji lagi dengan dua pertanyaan: tidak ada heading? Bukan pengelompok tema? Kalau iya, pakai div saja, tidak apa-apa.

Catatan teknis: Browser membangun "outline" halaman dari heading dan sectioning element (article, section, aside, nav). Outline yang rapi membantu SEO dan navigasi screen reader, jadi memilih tag yang tepat bukan sekadar gaya penulisan, melainkan bagian dari kualitas halaman.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Susun Halaman Berita

Susun dalam main: dua article (tiap article: h2 judul berita + p isi), satu section "Berita Populer" berisi list link, dan satu aside berisi info redaksi. Menyusun halaman dengan tag yang tepat adalah fondasi SEO dan aksesibilitas, dua hal yang membedakan situs amatir dari situs profesional.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Berita</title>
</head>
<body>
  <main>
    <!-- susun di sini -->
  </main>
</body>
</html>

Open Sandbox