Saatnya merangkai. Chapter ini menyusun satu halaman blog utuh — dari deklarasi doctype sampai kaki halaman — memakai seluruh elemen yang telah kita kenal: header, nav, main, article, section, aside, dan footer.

Studi kasusnya blog fiktif Catatan Budi: satu artikel kopi lengkap dengan komentar dan tautan terkait. Kita bedah per blok, lalu menutup dengan pemeriksaan pohon hasil — kebiasaan yang layak dibawa ke setiap proyek.

Halaman Utuh #

html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Kopi Tubruk ala Siti — Catatan Budi</title>
</head>
<body>
  <header>
    <p><strong>Catatan Budi</strong> — catatan kopi seorang pemula</p>
    <nav aria-label="Menu utama">
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="arsip.html">Arsip</a></li>
        <li><a href="kontak.html">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <header>
        <h1>Kopi Tubruk ala Siti</h1>
        <p>Oleh Budi — <time datetime="2026-11-02">2 November 2026</time></p>
      </header>
      <p>Kopi tubruk adalah kopi paling sederhana: bubuk dan air mendidih.</p>
      <p>Siti menakar dua sendok bubuk, menuang air baru mendidih, lalu menunggu tiga menit.</p>
      <section>
        <h2>Komentar</h2>
        <article>
          <h3>Dewi</h3>
          <p>Langsung coba besok pagi!</p>
        </article>
      </section>
      <footer>
        <p>Seri seduh manual: <a href="v60.html">Racik V60 di Rumah</a></p>
      </footer>
    </article>
    <aside>
      <h2>Baca Juga</h2>
      <ul>
        <li><a href="v60.html">Racik V60 di Rumah</a></li>
        <li><a href="gayo.html">Kenali Bijimu</a></li>
      </ul>
    </aside>
  </main>
  <footer>
    <p>© 2026 Catatan Budi — <a href="mailto:[email protected]">[email protected]</a></p>
  </footer>
</body>
</html>

Hasil Render: nama blog, tiga menu, judul artikel dengan penulis dan tanggal, dua paragraf, satu komentar, dua tautan Baca Juga, dan baris copyright — semua tersusun menurun karena belum ada CSS. Mari kita bedah per blok:

  1. Blok head (baris 3-6): metadata minimal — charset UTF-8 dan judul dokumen; tanpa CSS halaman tetap sah.
  2. Blok header situs (baris 8-17): nama blog sebagai pengantar plus nav utama ber-aria-label; blok ini berulang di seluruh halaman blog.
  3. Blok main (baris 18-44): satu-satunya main — membungkus article dan aside sekaligus; sasaran pintasan “skip to content”.
  4. Blok header artikel (baris 20-23): h1 judul artikel plus penulis dan waktu lewat time.
  5. Blok isi (baris 24-25): dua paragraf artikel — murni isi, tidak perlu dibungkus lagi.
  6. Blok komentar (baris 26-32): section berjudul, satu article per komentar — mandiri di dalam mandiri.
  7. Blok footer artikel (baris 33-35): tautan lanjutan milik artikel semata.
  8. Blok aside (baris 37-43): Baca Juga — pelengkap yang boleh dihapus tanpa melukai artikel.
  9. Blok footer situs (baris 45-47): copyright dan kontak — penutup seluruh halaman.

Cek Pohon Hasil #

Sebelum menyimpan, periksa pohon hasil dengan daftar periksa tujuh butir ini:

  1. Tepat satu main yang terlihat — tidak ada main kedua.
  2. Tepat satu h1, dan heading tidak melompat tingkat (h1 → h2 → h3).
  3. Setiap section dan article punya heading.
  4. Setiap article lulus uji “dicabut tetap masuk akal”.
  5. Setiap aside lulus uji “dihapus tanpa merusak isi utama”.
  6. nav hanya untuk blok navigasi utama; lebih dari satu berarti perlu aria-label pembeda.
  7. header dan footer situs masing-masing satu; sisanya milik bagian.

Halaman kita lulus semua: main satu, urutan heading rapi, komentar dan artikel lulus uji mandiri, dan Baca Juga memang pelengkap.

Ringkasan #

  • Halaman semantik utuh: header + nav, satu main berisi article dan aside, ditutup footer situs.
  • Bedah per blok menjaga setiap elemen tetap punya alasan berada di posisinya.
  • Daftar periksa tujuh butir: satu main, satu h1, heading berurutan, uji mandiri, uji pelengkap, nav berlabel, lapis situs tunggal.
  • Pola yang sama dipakai ulang di proyek website komunitas.

Section berikutnya berpindah ke Tables — cara menyajikan data baris-kolom dengan tabel yang benar.