Kita kini mengenal seluruh elemen struktur HTML5: header, footer, main, nav, article, section, aside, figure, dan figcaption. Sebagaimana penutup section Lists, pertanyaannya bergeser dari “bagaimana menulis elemen ini” menjadi “elemen mana yang tepat”. Chapter ini merangkum section menjadi satu pohon keputusan, satu tabel ringkasan, daftar anti-pattern, dan satu studi kasus halaman berita yang memakai semuanya.

Pohon Keputusan Memilih Elemen #

Diagram berikut mengurutkan pertanyaan menurut ketatnya syarat:

Sebagai teks: pertanyaannya berurutan dari konten inti (main), navigasi (nav), pembuka dan penutup kontainer (header atau footer), uji syndication (article), pengelompokan tematik (section), konten tangensial (aside), hingga konten yang dirujuk sebagai satu unit (figure). Bila tidak satu pun syarat terpenuhi, div menjadi jawabannya yang sah. Urutan menolong karena banyak konten memenuhi lebih dari satu syarat; yang terakhir disebut selalu menang.

header, hgroup, dan Kelompok Heading #

Satu kasus kecil menunggu keputusan: judul utama yang disertai sub-judul. Bila keduanya benar-benar pasangan judul, elemen hgroup membungkus heading dan paragraf sub-judulnya menjadi satu kelompok heading. Bila kontennya lebih luas — logo, menu, meta — header yang menjadi rumahnya, dan hgroup boleh berada di dalamnya. hgroup bukan elemen wajib; tanpa kebutuhan sub-judul, heading tunggal pun cukup.

Tabel Ringkasan Elemen #

ElemenMakna intiKapan dipakai
headerPembuka kontainer terdekatIdentitas situs dan menu di atas halaman; judul artikel
footerPenutup kontainer terdekatHak cipta situs; nama penulis dan tanggal artikel
mainKonten dominan dokumenSatu per halaman, hanya konten unik halaman tersebut
navBlok navigasi utamaMenu situs, breadcrumb, pagination, daftar isi
articleKomposisi mandiriPost blog, berita, kartu produk, komentar
sectionPengelompokan tematikBab atau bagian dokumen yang memiliki heading
asideKonten tangensialKotak info, sidebar, tag, iklan, pull quote
figureKonten yang dirujuk sebagai satu unitGambar, tabel, listing kode beserta keterangannya
figcaptionKeterangan figureAnak pertama atau terakhir dari figure
divTanpa maknaWadah murni untuk styling atau scripting

Anti-Pattern yang Perlu Dihindari #

  • section tanpa heading: pengelompokan tanpa nama sering kali butuh styling (div) atau berupa komposisi mandiri (article); periksa kembali pohon keputusan.
  • main ganda atau bersarang: dua main terlihat sama-sama ditolak validator, begitu pula main di dalam article, aside, nav, header, atau footer.
  • header dipilih demi tampilan di atas: elemen ini bermakna pembuka kontainer; tanpa makna itu, div lebih tepat.
  • nav untuk semua tautan: tautan dalam paragraf dan tautan tindakan tunggal tidak membutuhkan blok navigasi.
  • Kembali ke div-soup: bila ragu, jalan pintasnya bukan div untuk semuanya, melainkan membaca ulang tabel ringkasan di atas.

Studi Kasus: Halaman Berita Lengkap #

Berkas berikut menyusun halaman berita milik “Berita Harian Contoh” dengan hampir seluruh elemen section ini:

html halaman-berita.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Berita Harian Contoh</title>
</head>
<body>
  <header>
    <p>Berita Harian Contoh</p>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="kotaku.html">Kotaku</a></li>
        <li><a href="olahraga.html">Olahraga</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <header>
        <hgroup>
          <h1>Festival Kopi Gayo Digelar Pekan Ini</h1>
          <p>Tiga hari penuh seduhan dan edukasi di dataran tinggi Aceh</p>
        </hgroup>
        <p>Penulis: Siti &middot; 15 Maret 2025</p>
      </header>
      <p>Festival Kopi Gayo mempertemukan lebih dari 60 stan penyeduh, petani lokal, dan barista dari berbagai kota. Seluruh rangkaian acara terbuka bagi pengunjung tanpa tiket masuk.</p>
      <section>
        <h2>Latar Belakang</h2>
        <p>Festival ini pertama kali digelar pada tahun 2019 sebagai wadah promosi biji kopi petani lokal. Penyelenggara berharap acara tahun ini menarik pengunjung dua kali lipat dibanding tahun lalu.</p>
      </section>
      <section>
        <h2>Angka Penting</h2>
        <figure>
          <table>
            <caption>Jumlah pengunjung Festival Kopi Gayo</caption>
            <thead>
              <tr><th>Tahun</th><th>Pengunjung</th></tr>
            </thead>
            <tbody>
              <tr><td>2023</td><td>12.000</td></tr>
              <tr><td>2024</td><td>15.500</td></tr>
              <tr><td>2025</td><td>18.200</td></tr>
            </tbody>
          </table>
          <figcaption>Tabel 1: Pertumbuhan pengunjung dalam tiga tahun terakhir.</figcaption>
        </figure>
      </section>
    </article>
  </main>
  <aside>
    <h2>Tulisan Terkait</h2>
    <ul>
      <li><a href="profil-gayo.html">Profil Kopi Gayo</a></li>
      <li><a href="menyeduh.html">Menyeduh Pour Over</a></li>
    </ul>
  </aside>
  <footer>
    <p>&copy; 2025 Berita Harian Contoh &middot; www.example.com</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Nama harian dan menu tiga tautan di bagian atas
  - Judul berita dengan sub-judul, baris penulis-tanggal, satu
    paragraf pengantar, lalu sub-bagian "Latar Belakang"
  - Sub-bagian "Angka Penting" berisi tabel jumlah pengunjung per tahun
  - Blok "Tulisan Terkait" berdua tautan, dan baris hak cipta bawah

Mari kita telaah keputusan strukturnya:

  1. Baris 9-18 (header level halaman dengan nav berlabel): identitas harian dan menu menjadi banner situs.
  2. Baris 20-50 (article): satu berita mandiri — uji syndication terpenuhi karena berita layak didistribusikan sendiri.
  3. Baris 21-27 (header artikel dengan hgroup): h1 dan sub-judulnya dipasangkan lewat hgroup, lalu baris penulis melengkapi pembuka artikel.
  4. Baris 29-49 (dua section dengan h2): “Latar Belakang” dan “Angka Penting” adalah pengelompokan tematik, masing-masing bernama lewat heading.
  5. Baris 35-48 (figure berisi table plus figcaption): data pengunjung dirujuk sebagai satu unit dengan keterangan “Tabel 1”.
  6. Baris 52-58 (aside level halaman): tulisan terkait menjadi pelengkap halaman, di luar main.
  7. Baris 59-61 (footer level halaman): hak cipta dan domain menutup halaman sebagai contentinfo.

Seluruh keputusan di atas terbaca langsung dari pohon keputusan dan tabel ringkasan, tanpa satu pun nama class. Dengan ini struktur halaman telah kita kuasai dari atas sampai bawah; section berikutnya, Forms, memindahkan fokus dari struktur konten ke penerimaan masukan pengunjung.

Referensi resmi untuk pendalaman:

Berkas Sumber

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

halaman-berita.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>Berita Harian Contoh</title>
</head>
<body>
  <header>
    <p>Berita Harian Contoh</p>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="kotaku.html">Kotaku</a></li>
        <li><a href="olahraga.html">Olahraga</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <header>
        <hgroup>
          <h1>Festival Kopi Gayo Digelar Pekan Ini</h1>
          <p>Tiga hari penuh seduhan dan edukasi di dataran tinggi Aceh</p>
        </hgroup>
        <p>Penulis: Siti &middot; 15 Maret 2025</p>
      </header>
      <p>Festival Kopi Gayo mempertemukan lebih dari 60 stan penyeduh, petani lokal, dan barista dari berbagai kota. Seluruh rangkaian acara terbuka bagi pengunjung tanpa tiket masuk.</p>
      <section>
        <h2>Latar Belakang</h2>
        <p>Festival ini pertama kali digelar pada tahun 2019 sebagai wadah promosi biji kopi petani lokal. Penyelenggara berharap acara tahun ini menarik pengunjung dua kali lipat dibanding tahun lalu.</p>
      </section>
      <section>
        <h2>Angka Penting</h2>
        <figure>
          <table>
            <caption>Jumlah pengunjung Festival Kopi Gayo</caption>
            <thead>
              <tr><th>Tahun</th><th>Pengunjung</th></tr>
            </thead>
            <tbody>
              <tr><td>2023</td><td>12.000</td></tr>
              <tr><td>2024</td><td>15.500</td></tr>
              <tr><td>2025</td><td>18.200</td></tr>
            </tbody>
          </table>
          <figcaption>Tabel 1: Pertumbuhan pengunjung dalam tiga tahun terakhir.</figcaption>
        </figure>
      </section>
    </article>
  </main>
  <aside>
    <h2>Tulisan Terkait</h2>
    <ul>
      <li><a href="profil-gayo.html">Profil Kopi Gayo</a></li>
      <li><a href="menyeduh.html">Menyeduh Pour Over</a></li>
    </ul>
  </aside>
  <footer>
    <p>&copy; 2025 Berita Harian Contoh &middot; www.example.com</p>
  </footer>
</body>
</html>