semanticsectiondivMahir3 mnt baca

Semantic: section Mendalam

section wajib punya heading: kapan section vs div, dengan contoh landing page lengkap.

Kenapa section Ada

Halaman web modern panjang: hero, fitur, testimoni, harga, FAQ, semua dalam satu guliran. Tanpa penanda, halaman itu satu gumpalan teks bagi screen reader dan mesin pencari. section memecahnya menjadi bab-bab bertema, seperti bab dalam buku. Screen reader bahkan punya shortcut "lompat ke section berikutnya", dan Google memakai bab-bab ini untuk sitelink di hasil pencarian.

Aturan Keras: section Butuh Heading

Ini aturan yang paling sering dilanggar: setiap section wajib punya heading (h1- h6) sebagai judul babnya. Section tanpa heading dianggap rusak oleh validator aksesibilitas, karena bab tanpa judul tidak membantu navigasi siapa pun.

html

<!-- BENAR: tiap section punya heading -->
<section>
  <h2>Fitur Unggulan</h2>
  <p>Daftar fitur...</p>
</section>
<section>
  <h2>Testimoni</h2>
  <p>Kata pelanggan...</p>
</section>

section vs div: Cara Memutuskan

Tanyakan satu pertanyaan: "apakah kelompok konten ini layak masuk daftar isi?" Kalau ya (Fitur, Harga, FAQ), pakai section lengkap dengan heading. Kalau tidak (pembungkus untuk CSS grid, pembatas styling), pakai div.

html

<!-- section: bab tematik dengan judul -->
<section>
  <h2>Harga</h2>
  <!-- kartu-kartu harga -->
</section>

<!-- div: murni pembungkus untuk layout, tanpa makna -->
<div class="kartu-grid">
  <!-- kartu-kartu harga -->
</div>

Keduanya bisa hidup berdampingan: section memberi makna bab, div di dalamnya mengatur tampilan. Jangan pakai section sebagai pengganti div untuk styling, dan jangan pakai div untuk bab yang seharusnya punya judul.

Contoh Realistis: Landing Page

html

<main>
  <section>
    <h1>Kopi Terbaik, Diantar ke Rumahmu</h1>
    <p>Berlangganan biji kopi pilihan...</p>
    <a href="#">Mulai Berlangganan</a>
  </section>

  <section>
    <h2>Kenapa Kami</h2>
    <ul>
      <li>Biji fresh dari petani lokal</li>
      <li>Sangrai setiap minggu</li>
    </ul>
  </section>

  <section>
    <h2>Testimoni Pelanggan</h2>
    <blockquote>
      <p>Kopinya selalu fresh!</p>
      <p>- Rina, Bandung</p>
    </blockquote>
  </section>

  <section>
    <h2>Pilih Paketmu</h2>
    <div class="paket-grid">
      <div class="paket">Harian...</div>
      <div class="paket">Mingguan...</div>
    </div>
  </section>

  <section>
    <h2>Pertanyaan Umum</h2>
    <details>
      <summary>Apakah bisa berhenti kapan saja?</summary>
      <p>Bisa, tanpa denda.</p>
    </details>
  </section>
</main>

Lima bab, lima heading, daftar isinya jelas: hero, kenapa kami, testimoni, harga, FAQ. Perhatikan div class="paket-grid" di dalam section Harga: ia murni pembungkus layout, tepat memakai div.

Satu catatan: section hero memakai h1 karena ia judul utama halaman. Section lain memakai h2. Hierarki heading mengikuti hierarki bab.

Salah vs Benar

html

<!-- SALAH: section tanpa heading, bab tanpa judul -->
<section>
  <p>Promo akhir tahun, diskon 50%!</p>
  <button>Klaim</button>
</section>

<!-- BENAR: kasih heading, atau pakai div bila memang tak butuh judul -->
<section>
  <h2>Promo Akhir Tahun</h2>
  <p>Diskon 50%!</p>
  <button>Klaim</button>
</section>

html

<!-- SALAH: satu section raksasa membungkus semua konten -->
<section>
  <h2>Beranda</h2>
  <p>Fitur...</p>
  <p>Testimoni...</p>
  <p>Harga...</p>
</section>

<!-- BENAR: pecah per tema, tiap tema satu section -->
<section><h2>Fitur</h2><p>...</p></section>
<section><h2>Testimoni</h2><p>...</p></section>
<section><h2>Harga</h2><p>...</p></section>

html

<!-- SALAH: section sebagai wrapper styling tanpa tema -->
<section class="pembungkus-kartu">
  <div class="kartu">A</div>
  <div class="kartu">B</div>
</section>

<!-- BENAR: div untuk styling murni -->
<div class="pembungkus-kartu">
  <div class="kartu">A</div>
  <div class="kartu">B</div>
</div>

Catatan teknis: section yang bersarang boleh saja (bab dalam bab), dengan heading yang menurun tingkatnya (h2 berisi h3). Tapi hindari section hanya berisi satu article tanpa tambahan apa pun: itu pembungkus mubazir, langsung pakai article saja.

Live Playground

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

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

Tantangan

Landing Page Tiga Bab

Buat landing page dalam main dengan tiga section, masing-masing wajib punya heading: "Fitur" (h2 + list 3 item), "Testimoni" (h2 + satu blockquote), dan "Harga" (h2 + div pembungkus berisi 2 kartu). Struktur bab yang rapi membuat halamanmu bisa dinavigasi per bagian oleh screen reader dan tampil sebagai sitelink di Google.

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

Open Sandbox