Tag Section HTML: section vs article vs div

Untuk apa tag section

<section> mengelompokkan konten dengan satu tema, dan diawali dengan heading yang menamai tema itu. Landing page yang dibagi menjadi "Features", "Pricing" dan "FAQ" adalah contoh klasiknya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { border: 2px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    section h2 { color: #2563eb; }
  </style>
</head>
<body>
  <h1>Acme Notes</h1>
  <section>
    <h2>Features</h2>
    <p>Sync, search and share your notes.</p>
  </section>
  <section>
    <h2>Pricing</h2>
    <p>Free for personal use.</p>
  </section>
  <section>
    <h2>FAQ</h2>
    <p>Answers to common questions.</p>
  </section>
</body>
</html>

Setiap section adalah satu bab dari halaman, dan setiap heading adalah satu baris di daftar isi halaman itu. Seperti tag semantik lainnya, <section> tidak punya gaya default; border-nya berasal dari CSS.

section vs article vs div

Ketiganya terlihat sama di layar. Yang berbeda adalah apa yang mereka katakan tentang kontennya:

Postingan blog, komentar forum, berita dan kartu produk adalah article. "Features", "Chapter 2" dan "Related products" adalah section. Baris flex yang menyejajarkan tiga kartu adalah div.

Article di dalam section

Keduanya bisa disarangkan ke dua arah. Di sini section "Latest posts" berisi beberapa article yang berdiri sendiri:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Section of articles</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .grid { display: flex; gap: 10px; }
    article { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 12px; }
    article h3 { margin: 10px 0 4px; font-size: 16px; }
    article p { color: #6b7280; font-size: 14px; }
  </style>
</head>
<body>
  <section>
    <h2>Latest posts</h2>
    <div class="grid">
      <article>
        <h3>Flexbox in 5 minutes</h3>
        <p>Rows, columns and gaps.</p>
      </article>
      <article>
        <h3>CSS Grid basics</h3>
        <p>Two-dimensional layout.</p>
      </article>
      <article>
        <h3>Forms that work</h3>
        <p>Labels and validation.</p>
      </article>
    </div>
  </section>
</body>
</html>

Perhatikan <div class="grid">: elemen itu ada hanya untuk menyusun kartu-kartu dalam satu baris, jadi div adalah tag yang tepat untuknya. Setiap kartu adalah article karena setiap postingan berdiri sendiri.

Section di dalam article

Article yang panjang bisa dibagi menjadi beberapa section, seperti bab-bab dalam buku. Tingkat heading-nya melanjutkan dari heading article itu sendiri:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article with sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #2563eb; border-radius: 8px; padding: 0 14px; }
    section { border-inline-start: 4px solid #16a34a; padding-inline-start: 10px; margin-bottom: 12px; }
    section h3 { margin: 4px 0; }
  </style>
</head>
<body>
  <article>
    <h2>A beginner's guide to bread</h2>
    <section>
      <h3>Ingredients</h3>
      <p>Flour, water, salt, yeast.</p>
    </section>
    <section>
      <h3>Method</h3>
      <p>Mix, knead, rise, bake.</p>
    </section>
  </article>
</body>
</html>

Kotak biru adalah article-nya (seluruh panduan), garis hijau adalah section-section-nya. Beri section tingkat heading-nya sendiri: article h2 berisi section h3.

Section bernama menjadi landmark

Screen reader mencantumkan elemen tertentu sebagai landmark yang bisa dilompati pengguna. Sebuah <section> menjadi landmark region hanya kalau punya nama yang aksesibel. Arahkan aria-labelledby ke heading-nya:

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">Pricing</h2>
  ...
</section>

Lakukan ini hanya untuk beberapa section yang ingin langsung dituju pengguna, bukan untuk setiap section: halaman dengan dua puluh landmark sama sulitnya ditelusuri dengan halaman tanpa landmark sama sekali. Section tanpa nama tetap membantu, karena heading-nya muncul di daftar heading screen reader.

Section juga cocok menjadi tujuan link di dalam halaman. Beri sebuah section id, dan link dengan href="#id" akan melompat ke sana:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Jump links</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { min-height: 420px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <p><a href="#faq">Jump to the FAQ</a></p>
  <section id="features" aria-labelledby="features-title">
    <h2 id="features-title">Features</h2>
  </section>
  <section id="faq" aria-labelledby="faq-title">
    <h2 id="faq-title">FAQ</h2>
    <p><a href="#features">Back to features</a></p>
  </section>
</body>
</html>

Kesalahan umum

• Memakai <section> sebagai pembungkus untuk styling. Kalau tidak ada heading dan tidak ada tema, pakai <div>. Halaman HTML semantik menunjukkan tempat setiap tag layout.
• Membungkus satu postingan blog dengan <section>. Postingan yang berdiri sendiri adalah <article>.
• Section tanpa heading. Tambahkan heading, walaupun disembunyikan secara visual, atau pikirkan ulang apakah itu memang section.
• Mengganti <main> dengan <section>. Konten utama halaman ada di <main>; section diletakkan di dalamnya.
• Memberi nama setiap section. Tambahkan aria-labelledby hanya ke section yang penting, supaya daftar landmark tetap pendek.