Bahan sudah tercantum, kini sisi praktiknya. Langkah memasak adalah bagian yang dibaca sambil berdiri di depan kompor — pembaca melirik, melakukan, lalu melirik lagi. Pada bagian ini kita menuliskan langkah kedua resep sebagai ol, dengan redaksi yang ringkas dan urutan yang tidak bisa ditukar.

Langkah Resep Pertama #

Tambahkan blok berikut di dalam article Nasi Goreng Kampung, tepat setelah daftar bahannya:

html 
<h3>Langkah</h3>
<ol>
  <li>Panaskan minyak goreng di wajan dengan api sedang.</li>
  <li>Tumis bawang merah, bawang putih, dan bumbu halus hingga harum.</li>
  <li>Sisihkan tumisan ke tepi wajan, kemudian buat orak-arik telur di sisi kosong.</li>
  <li>Masukkan nasi dingin, aduk hingga tercampur rata dengan bumbu dan telur.</li>
  <li>Tambahkan kecap manis, aduk hingga warna nasi merata.</li>
  <li>Angkat dan sajikan selagi hangat.</li>
</ol>

Mari kita bedah baris demi baris:

  1. ol, bukan ul (baris 2): menukar langkah pertama dan langkah terakhir menghasilkan proses yang tidak masuk akal — urutan di sini adalah maknanya. Tabel pada chapter Memilih Jenis List menempatkan “langkah memasak” pada baris ol dengan alasan “urutan langkah = makna”.
  2. Nomor dari browser (baris 3-8): kita tidak menulis satu angka pun — penanda 1 sampai 6 ditambahkan ol sendiri. Menyisipkan langkah baru di tengah tidak perlu menomori ulang apa pun.
  3. Satu aksi utama per langkah: “Panaskan”, “Tumis”, “Masukkan” — tiap butir memuat satu tindakan inti. Langkah ketiga menggabungkan aksi kecil penyiapan (menyisihkan tumisan) dengan aksi utamanya (orak-arik telur) karena keduanya terjadi di satu momen yang sama.
  4. Redaksi perintah, bukan narasi: tiap butir dibuka kata kerja — “Panaskan…”, bukan “kami memanaskan…”. Pembaca sedang memasak, bukan membaca cerita.
  5. Tanda selesai di ujung kalimat: “hingga harum”, “hingga warna nasi merata” — tiap langkah diberi kondisi kapan ia selesai, sehingga pembaca tahu kapan melirik langkah berikutnya.

Langkah Resep Kedua #

Pola yang sama berlaku untuk Pisang Goreng Crispy — enam langkah, satu aksi per langkah, tiap langkah berakhir pada kondisi terukur:

html 
<h3>Langkah</h3>
<ol>
  <li>Kupas pisang, lalu belah tiap buah menjadi dua bagian.</li>
  <li>Campur tepung beras, tepung terigu, dan garam dalam mangkuk.</li>
  <li>Tuang air es sedikit demi sedikit sambil diaduk hingga adonan licin.</li>
  <li>Celupkan pisang ke adonan hingga seluruh permukaannya terbalut.</li>
  <li>Goreng pisang dalam minyak panas hingga kuning keemasan.</li>
  <li>Angkat, tiriskan, lalu sajikan selagi hangat.</li>
</ol>

Perhatikan gradasi kondisi selesainya: “hingga adonan licin”, “hingga seluruh permukaannya terbalut”, “hingga kuning keemasan”. Semakin terukur tanda selesainya, semakin sedikit pembaca harus menebak sendiri.

Hasil pada Browser #

Kedua resep kini menampilkan daftar bernomor 1 sampai 6 di bawah daftar bahannya. Nomor tampil otomatis dari ol — coba sisipkan satu li baru di tengah daftar lewat panel Elements di DevTools, dan seluruh nomor menyesuaikan seketika tanpa menyentuh teks kita.

Inilah keadaan halaman pada akhir Bagian 3 — dua daftar bernomor tampil di bawah daftar bahan masing-masing resep:

Ringkasan Bagian 3 #

  • Langkah memasak memakai ol karena menukar urutan mengubah makna — kebalikan dari daftar bahan.
  • Nomor berasal dari browser; menomori manual di teks menghasilkan nomor ganda.
  • Redaksi langkah: buka dengan kata kerja, satu aksi utama per butir, tutup dengan kondisi selesai.

Struktur kedua resep kini lengkap secara teks. Bagian berikutnya menyisipkan foto hidangan.