Kerangka sudah berdiri, kini kita isi resep pertama. Setiap resep dibuka dengan judul lalu daftar bahan — bagian yang paling sering dibaca pembaca sebelum memutuskan memasak. Pada bagian ini kita menyusun daftar bahan Nasi Goreng Kampung dan Pisang Goreng Crispy, termasuk sublist untuk bumbu yang butuh dirinci.

Bahan Resep Pertama #

Ganti komentar di dalam section resep dengan article berikut:

html 
<article id="nasi-goreng-kampung">
  <h2>Nasi Goreng Kampung</h2>
  <h3>Bahan</h3>
  <ul>
    <li>400 gram nasi putih dingin</li>
    <li>3 butir bawang merah, iris tipis</li>
    <li>2 siung bawang putih, cincang halus</li>
    <li>2 butir telur ayam</li>
    <li>2 sendok makan kecap manis</li>
    <li>2 sendok makan minyak goreng</li>
    <li>Bumbu halus:
      <ul>
        <li>3 buah cabai merah keriting</li>
        <li>1 sendok teh terasi bakar</li>
      </ul>
    </li>
  </ul>
</article>

Mari kita bedah baris demi baris:

  1. article dengan id (baris 1): resep mandiri sekaligus sasaran tautan navigasi #nasi-goreng-kampung yang kita pasang pada Bagian 1.
  2. h2 lalu h3 (baris 2-3): judul resep di tingkat dua, judul sub-bagian di tingkat tiga — urutan heading tidak melompat.
  3. ul, bukan ol (baris 4): menukar posisi telur dan bawang tidak mengubah hasil masakan — urutan bahan bebas, maka wadahnya netral. Tabel pada chapter Memilih Jenis List menempatkan “daftar bahan resep” pada baris ul.
  4. Format kuantitas di depan (baris 5-10): tiap butir ditulis “jumlah + satuan + nama bahan” — “400 gram nasi putih dingin”. Penyiapan singkat menyusul setelah koma: “iris tipis”, “cincang halus”. Satu bahan satu baris.
  5. Sublist bumbu halus (baris 11-16): cabai dan terasi adalah rincian dari bumbu halus, jadi ul kedua ditulis di dalam li induknya, setelah teksnya. Perhatikan penutup </li> milik “Bumbu halus:” baru muncul setelah sublist selesai — persis aturan dari chapter Nested Lists.

Bahan Resep Kedua #

Resep kedua tidak memiliki bahan yang perlu dirinci, jadi daftarnya datar:

html 
<article id="pisang-goreng-crispy">
  <h2>Pisang Goreng Crispy</h2>
  <h3>Bahan</h3>
  <ul>
    <li>8 buah pisang kepok matang</li>
    <li>100 gram tepung beras</li>
    <li>50 gram tepung terigu</li>
    <li>150 mililiter air es</li>
    <li>1/2 sendok teh garam</li>
    <li>500 mililiter minyak goreng untuk menggoreng</li>
  </ul>
</article>

Formatnya sama persis dengan resep pertama: kuantitas di depan, penyiapan di belakang bila ada, satu bahan satu baris. Konsistensi inilah yang membuat daftar enak dipindai — pembaca mencari satu bahan dalam sekejap, bukan membaca ulang seluruh daftar.

Hasil pada Browser #

Kedua daftar tampil dengan penanda bulatan, menjorok rapi di bawah heading h3 masing-masing. Sublist bumbu halus tampil lebih dalam dengan penanda bulatan kosong — browser membedakan kedua tingkat itu secara otomatis tanpa satu baris CSS pun. Tautan navigasi kini berfungsi penuh: klik “Nasi Goreng Kampung” menggulir langsung ke resep pertama.

Inilah keadaan halaman pada akhir Bagian 2 — klik “Nasi Goreng Kampung” atau “Pisang Goreng Crispy” pada navigasi untuk melompat ke resepnya:

Ringkasan Bagian 2 #

  • Daftar bahan memakai ul karena urutannya bebas — tampilan bernomor bukan alasan memilih ol.
  • Format butir: jumlah + satuan + nama bahan, penyiapan menyusul setelah koma.
  • Bumbu yang dirinci menjadi sublist di dalam li induknya; penutup li induk menunggu sublist selesai.
  • Format konsisten menjadikan daftar siap dipakai sebagai daftar belanja.

Bagian berikutnya mengisi sisi praktik tiap resep: langkah memasak dengan ol.