Struktur Resep

Kerangka dulu, isi kemudian. Pada bagian ini kita menyiapkan seluruh wadah katalog: head dengan metadata lengkap, header berisi nama situs dan navigasi fragment, serta main dengan section pengantar dan section kosong yang menunggu kedua resep. Setelah bagian ini selesai, keempat bagian berikutnya tinggal mengisi tempat yang sudah disiapkan.

Kerangka Halaman #

Kode berikut adalah titik awal proyek. Simpan sebagai index.html di dalam folder src/, lalu buka di browser:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Katalog Resep — Dapur Siti</title>
  <meta name="description" content="Katalog resep rumahan Dapur Siti: nasi goreng kampung dan pisang goreng crispy dengan daftar bahan dan langkah memasak yang mudah diikuti.">
</head>
<body>
  <!-- Kepala situs -->
  <header>
    <p><strong>Dapur Siti</strong> — resep rumahan sehari-hari</p>
    <nav aria-label="Navigasi katalog">
      <ul>
        <li><a href="#resep-utama">Resep Utama</a></li>
        <li><a href="#nasi-goreng-kampung">Nasi Goreng Kampung</a></li>
        <li><a href="#pisang-goreng-crispy">Pisang Goreng Crispy</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="pengantar">
      <h1>Katalog Resep Dapur Siti</h1>
      <p>Selamat datang di Dapur Siti — kumpulan resep masakan rumahan yang dicatat langsung dari dapur keluarga. Semua bahan mudah didapat di pasar terdekat, setiap langkah ditulis untuk pemula, dan setiap resep dilengkapi foto hidangan, informasi porsi dan waktu memasak, daftar bahan, serta langkah yang tersusun berurutan.</p>
    </section>
    <section id="resep-utama">
      <!-- dua resep diisi mulai Bagian 2 -->
    </section>
  </main>
</body>
</html>

Mari kita bedah baris demi baris:

1. Blok head (baris 3-8): charset UTF-8, viewport, title, dan meta description — empat metadata minimum halaman modern yang telah kita kuasai sejak Section Struktur Dokumen.
2. Nama situs dan tagline (baris 12): satu paragraf dengan strong pada nama situsnya. Nama situs sengaja bukan heading — satu-satunya h1 disiapkan untuk judul katalog di dalam main.
3. nav dengan label (baris 13-19): navigasi memakai ul tautan; aria-label memberi nama wilayahnya bagi pembaca layar.
4. Tiga tautan fragment (baris 15-17): nilai href diawali kres dan harus sama persis dengan id targetnya — #resep-utama menuju section di baris 26, sedangkan dua lainnya menuju article yang baru kita bangun pada Bagian 2.
5. Section pengantar (baris 22-25): h1 tunggal seluruh halaman plus satu paragraf pembuka.
6. Section kosong (baris 26-28): penanda tempat. Komentar HTML di dalamnya diganti article sungguhan mulai bagian berikutnya; tautan navigasi sudah bisa diklik karena id-nya ada.

Memilih article untuk Setiap Resep #

Keputusan terbesar bagian ini ada pada pemilihan elemen. Uji dicabut dari chapter Section vs Article berlaku langsung di sini: resep Nasi Goreng Kampung yang dicabut dari halaman tetap masuk akal — ia bisa dicetak, dibagikan, atau masuk feed tanpa kehilangan makna. Karena mandiri, tiap resep menjadi article. Sebaliknya, pengantar dan catatan penutup kehilangan makna bila dicabut dari katalognya — keduanya bagian dari kesatuan halaman, jadi wadahnya section.

Hasil pada Browser #

Judul tab menampilkan “Katalog Resep — Dapur Siti” dari title. Di halaman tampak nama situs, tagline, tiga tautan, judul katalog, dan paragraf pengantar; area resep di bawahnya masih kosong. Klik “Resep Utama” — address bar bertambah #resep-utama dan halaman menggulir ke posisi section kosong itu.

Inilah keadaan halaman pada akhir Bagian 1 — klik ketiga tautan navigasinya: “Resep Utama” menggulir ke section kosong di bawah pengantar, sedangkan dua nama resep belum melompat ke mana pun karena id targetnya baru dibuat pada Bagian 2:

Ringkasan Bagian 1 #

• Kerangka lengkap: head berisi empat metadata minimum, header dengan navigasi fragment, main dengan dua section.
• Navigasi fragment menuntut nilai href dan id yang sama persis.
• Tiap resep kelak menjadi article karena lulus uji dicabut; section resep tanpa heading karena article membawa h2 sendiri.

Bagian berikutnya mengisi article pertama dengan daftar bahan.