Mengenal header, main, dan aside satu per satu berbeda dengan menyusunnya menjadi satu halaman yang koheren. Chapter ini menyediakan kerangka utuh untuk itu: sebuah landing page kedai kopi — satu halaman promosi lengkap dari doctype sampai penutup. Pola inilah yang paling sering kita tulis di dunia nyata: beranda toko, halaman produk, atau pengantar komunitas.

Kerangkanya enam puluh baris, ditandai komentar HTML sebagai pembatas blok, dan sengaja tanpa CSS — struktur berdiri lebih dulu, tampilan menyusul. Setelah kode, kita bedah pilihan tiap blok: mengapa article untuk kartu menu, mengapa search membungkus form, dan mengapa address hanya muncul di footer.

Kerangka Halaman #

html index.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kedai Kopi Siti — Seduh Pagi</title>
</head>
<body>
  <!-- Blok 1: header — identitas, navigasi, pencarian -->
  <header>
    <p><strong>Kedai Kopi Siti</strong> — kopi Batu sejak 2019</p>
    <nav aria-label="Menu utama">
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="kontak.html">Kontak</a></li>
      </ul>
    </nav>
    <search>
      <form action="cari.html" method="get">
        <label for="kata-kunci">Cari menu</label>
        <input type="search" id="kata-kunci" name="q" placeholder="kopi susu">
        <button type="submit">Cari</button>
      </form>
    </search>
  </header>
  <main>
    <!-- Blok 2: hero — pembuka halaman -->
    <section id="hero">
      <h1>Seduh Pagi, Temani Hari</h1>
      <p>Biji Gayo pilihan, diseduh dengan sabar setiap pagi.</p>
      <p><a href="#menu">Lihat menu andalan</a></p>
    </section>
    <!-- Blok 3: menu — kartu minuman -->
    <section id="menu">
      <h2>Menu Andalan</h2>
      <article>
        <h3>Kopi Tubruk</h3>
        <p>Rp8.000 — sederhana dan menghangatkan.</p>
      </article>
      <article>
        <h3>Kopi Susu Gula Aren</h3>
        <p>Rp12.000 — favorit pelanggan pagi.</p>
      </article>
    </section>
    <!-- Blok 4: aside — promo pelengkap -->
    <aside>
      <h2>Promo Jumat</h2>
      <p>Setiap Jumat: beli dua kopi susu, gratis satu teh melati.</p>
    </aside>
  </main>
  <!-- Blok 5: footer — alamat dan penutup -->
  <footer>
    <address>
      Jl. Kenanga 12, Batu, Jawa Timur<br>
      <a href="mailto:[email protected]">[email protected]</a>
    </address>
  </footer>
</body>
</html>

Hasil Render: identitas kedai, tiga tautan navigasi, satu kolom pencarian, judul besar, dua kartu menu, satu promo, dan alamat di kaki halaman — semua tersusun menurun karena tanpa CSS. Halaman ini sah dan bisa langsung dibuka di browser. Mari kita bedah per blok:

  1. Blok 1 — header (baris 9-26): satu header situs membungkus tiga pengantar: identitas lewat p dan strong, navigasi lewat nav yang tetap diberi aria-label pembeda, serta pencarian. Elemen search menjadi wadah semantik form pencarian — Baseline sejak Oktober 2023 — sementara di dalamnya label terikat ke input type="search" lewat for/id, dan tombol submit mengirim kata kunci sebagai q.
  2. Blok 2 — hero (baris 28-33): main tunggal menampung seluruh isi utama — sasaran pintasan lompat ke konten. Hero dibungkus section karena kelompok isi ini punya judul, dan h1-nya satu-satunya di halaman. Tautan #menu memperagakan link ke bagian halaman sendiri: penunjuknya adalah id pada section menu.
  3. Blok 3 — menu (baris 34-45): satu section ber-h2 menjadi wadah, lalu setiap minuman menjadi article tersendiri — unit mandiri yang tetap masuk akal bila dicabut. Heading kartu memakai h3 agar jenjang turun rapi: h1 → h2 → h3, tanpa lompatan.
  4. Blok 4 — aside (baris 46-50): promo ditempatkan sebagai aside karena berstatus pelengkap: dihapus pun, menu dan hero tetap utuh. Itulah dua uji yang selalu kita pakai — article lulus uji dicabut, aside lulus uji dihapus.
  5. Blok 5 — footer (baris 52-58): footer situs menutup halaman dengan address — elemen yang memang khusus untuk kontak. Isinya alamat pos dan email; address bukan tempat untuk paragraf biasa.

Ringkasan #

  • Kerangka utuh header + search → main (section hero, section menu ber-article, aside) → footer ber-address.
  • Setiap keputusan punya uji: main tunggal, h1 tunggal, jenjang heading rapi, article mandiri, aside pelengkap.
  • Komentar HTML sebagai penanda blok membantu pembacaan kerangka sebelum CSS ditambahkan.

Chapter berikutnya merangkum sisi aksesibilitas dari kerangka semacam ini menjadi daftar praktik yang siap ditempel di meja kerja.