Elemen section

Halaman yang isinya panjang jarang berupa satu blok rata. Halaman berita memuat kolom utama, agenda, dan sorotan komunitas; halaman layanan memuat harga, proses, dan tanya jawab. section adalah elemen untuk pengelompokan tematik: ia menyatakan “bagian-bagian di dalamku membicarakan satu tema”.

Aturan praktisnya: section hampir selalu butuh heading — judul itulah yang menyatakan temanya. Mekanismenya terhubung ke dua jalur sekaligus: heading di dalam section menjadi titik lompat di outline dokumen, dan wilayah section menjadi bagian peta halaman yang bisa dinavigasi pembaca layar secara berurutan.

section Tanpa Judul adalah Bau Code Smell #

Sebuah section tanpa heading sah secara sintaks, tetapi biasanya menjadi tanda bahwa yang sedang ditulis bukan kelompok tematik. Kalau temanya tidak sampai perlu judul, kemungkinan besar isinya hanya butuh wadah — dan wadah polos memakai div. Beda keduanya:

Contoh: Halaman Berita Tiga Bagian #

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

  <section>
    <h2>Berita Utama</h2>
    <p>Biji Gayo baru tiba dan siap diseduh mulai pekan ini.</p>
  </section>

  <section>
    <h2>Agenda</h2>
    <ul>
      <li>Latte art dasar — Sabtu, 14 November.</li>
      <li>Cupping biji Gayo — Minggu, 15 November.</li>
    </ul>
  </section>

  <section>
    <h2>Sorotan Komunitas</h2>
    <p>Dewi membagikan catatan cupping-nya di blog komunitas.</p>
  </section>
</main>

Hasil Render: judul halaman, lalu tiga judul bagian dengan isinya, tersusun menurun. Mari kita telaah:

1. Baris 2 (<h1>): judul seluruh halaman — berdiri langsung di dalam main, di luar semua section.
2. Baris 4-7 (<section> pertama): kelompok berita utama — heading menyatakan tema, isi menjelaskannya.
3. Baris 9-15 (<section> kedua): agenda — temanya berbeda, judulnya berbeda, section-nya pun sendiri.
4. Baris 17-20 (<section> ketiga): sorotan komunitas — tiga kelompok tematik sejajar di dalam satu main.

section juga boleh bersarang: bagian “Agenda” bisa dipecah lagi menjadi section “Pekan Ini” dan “Pekan Depan” bila isinya tumbuh. Semua tetap berpangkal pada satu aturan — kelompok bertema punya judul.

Ringkasan #

• section mengelompokkan konten secara tematik dan hampir selalu butuh heading.
• section tanpa heading biasanya code smell: yang dimaksud mungkin div.
• Bedanya dengan div: section membawa tema, div hanya wadah.
• section boleh bersarang untuk sub-bagian yang punya judul sendiri.

Chapter berikutnya membahas article — konten yang tetap utuh meski dicabut dari halamannya.