Informasi Tambahan

Dua resep sudah berisi foto, bahan, dan langkah. Sentuhan terakhir melengkapi keputusan pembaca sebelum memasak: berapa porsi, berapa lama, dan seberapa sulit. Pada bagian ini kita menata tiga informasi itu sebagai dl, menandai durasinya dengan time, lalu menutup halaman dengan section catatan dan footer.

Informasi Ringkas Resep #

Sisipkan blok berikut di dalam article Nasi Goreng Kampung, setelah figure dan sebelum heading Bahan:

<dl>
  <dt>Porsi</dt>
  <dd>2 porsi</dd>
  <dt>Waktu memasak</dt>
  <dd><time datetime="PT15M">15 menit</time></dd>
  <dt>Tingkat kesulitan</dt>
  <dd>Mudah</dd>
</dl>

Mari kita bedah baris demi baris:

1. dl (baris 1): tiap baris informasi adalah pasangan istilah-nilai — “Porsi” → “2 porsi”. Pola ini persis baris “label nilai gizi” pada tabel chapter Memilih Jenis List: pasangan istilah-nilai memakai dl, bukan ul butir tunggal.
2. dt dan dd berselang (baris 2-7): istilah dan nilainya ditulis berurutan langsung di dalam dl, tanpa li — struktur khas description list dari chapter Description List. Browser menjorokkan dd di bawah dt-nya secara otomatis.
3. time untuk durasi (baris 5): teks yang tampil tetap manusiawi — “15 menit” — sementara nilai mesinnya tersimpan pada datetime="PT15M".

Nilai PT15M itu bukan sandi acak; ia adalah durasi berformat ISO 8601 yang diperkenalkan tabel chapter Time. Hurufnya dibaca berurutan:

Perhatikan letak huruf M: setelah T ia berarti menit. PT15M lima belas menit; tanpa T, P15M berarti lima belas bulan.

Blok yang sama untuk Pisang Goreng Crispy hanya mengubah nilainya — <time datetime="PT25M">25 menit</time> dan tingkat kesulitan “Sedang”.

Catatan Penutup dan Footer #

Setelah section resep ditutup, tambahkan catatan penutup di dalam main, lalu footer setelahnya:

<section id="catatan">
  <h2>Catatan Penutup</h2>
  <p>Semua resep di atas sudah dicoba berulang kali di dapur keluarga. Takaran bumbu boleh disesuaikan dengan selera — kurangi cabai bila menyajikan untuk anak-anak, dan resep baru ditambahkan secara berkala.</p>
</section>

<footer>
  <p><small>© 2026 Dapur Siti — catatan masak keluarga Siti.</small></p>
</footer>

Dua blok ini menutup halaman dari dua arah. Section catatan ber-h2 karena temanya layak berjudul — kebalikan dari section resep pada Bagian 1 yang mengandalkan h2 milik article-nya. footer menutup seluruh dokumen, dan small menandai barisnya sebagai keterangan ringkas — pasangan yang sama dipakai kaki halaman pada chapter Menyusun Halaman Semantik.

Hasil Akhir pada Browser #

Halaman kini utuh: nama situs dan navigasi di atas, pengantar, dua resep lengkap dengan foto, informasi ringkas yang menjorok rapi, daftar bahan dan langkah, catatan penutup, serta footer kecil di bawah. Total 120 baris dalam satu berkas index.html — cukup kecil untuk dibaca ulang dalam satu duduk, cukup lengkap untuk dipakai sebagai pola katalog Anda sendiri: tambah article ketiga, salin polanya, isi konten baru.

Inilah hasil akhir proyek — navigasi di atas tetap hidup, silakan dicoba:

Pada demo, dua foto hidangan diganti placeholder SVG berukuran sama agar tampilannya langsung terlihat; markup dan seluruh teksnya sama persis dengan berkas proyek.

Ringkasan Bagian 5 #

• Informasi porsi, waktu, dan tingkat kesulitan memakai dl — pasangan istilah-nilai.
• Durasi memakai time dengan datetime ISO 8601: PT15M lima belas menit; M setelah T adalah menit, bukan bulan.
• Section catatan ber-h2 menutup isi, footer dengan small menutup dokumen.

Proyek selesai. Berkas lengkap dapat diunduh dari halaman overview proyek.