Bagian 1: Menyusun Struktur Katalog

Bagian pertama membangun fondasi katalog: kerangka dokumen yang valid dan daftar produk yang tertata. Kerangka yang benar membuat browser merender halaman dalam mode standar dan mempermudah tahap berikutnya, karena kita tinggal mengisi setiap kartu satu per satu. Kita mulai dari head yang lengkap, lalu menyusun tiga wilayah body: header, main, dan footer. Daftar produknya memakai ul dengan satu li per produk, pola yang berasal dari section Lists dan Semantic HTML.

Peta Struktur Katalog #

Sebelum menulis kode, kita petakan dulu unsur yang menyusun halaman katalog beserta perannya:

Daftar produk memakai ul karena urutan produk tidak penting; ul memang menandai kumpulan butir sederajat. Setiap li berperan sebagai kartu yang menampung nama produk dan satu kalimat singkat. Nama produk ditulis h2 karena h1 telah dipakai nama toko di header, sehingga hierarki heading halaman tetap lurus dari atas ke bawah.

Menyusun Kerangka dan Daftar Produk #

File berikut adalah hasil utuh tahap ini. Simpan sebagai katalog.html, atau unduh melalui tautan pada header code block:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Katalog produk Toko Aroma: kopi dan teh pilihan dengan harga yang jelas.">
  <title>Katalog Produk Toko Aroma</title>
</head>
<body>
  <header>
    <h1>Toko Aroma</h1>
    <p>Kopi dan teh pilihan, dikirim langsung dari Bandung</p>
  </header>
  <main>
    <ul class="katalog">
      <li>
        <h2>Kopi Arabika Gayo</h2>
        <p>Single origin dari dataran tinggi Aceh.</p>
      </li>
      <li>
        <h2>Kopi Robusta Lampung</h2>
        <p>Kopi pekat untuk kopi susu gula aren.</p>
      </li>
      <li>
        <h2>Teh Hijau Pegunungan</h2>
        <p>Teh hijau segar dari kebun Jawa Barat.</p>
      </li>
      <li>
        <h2>Teh Melati</h2>
        <p>Teh beraroma bunga melati untuk sore hari.</p>
      </li>
    </ul>
  </main>
  <footer>
    <p>&copy; 2025 Toko Aroma</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

Browser menampilkan:
  - Nama "Toko Aroma" dan tagline di bagian atas halaman
  - Empat nama produk berurutan ke bawah, masing-masing dengan satu kalimat singkat
  - Baris hak cipta di dasar halaman
  - Teks "Katalog Produk Toko Aroma" pada tab browser

Mari kita telaah peran setiap bagian kode di atas:

1. Baris 1-2: deklarasi doctype dan <html lang="id"> menempatkan browser pada mode standar serta memberi tahu bahasa kontennya.
2. Baris 4-7: empat metadata wajib proyek — charset, viewport, description, dan title — menempati head sebelum elemen apa pun.
3. Baris 10-13: header menampung h1 nama toko dan p tagline.
4. Baris 15-32: main memuat ul.katalog; empat li di dalamnya masing-masing berisi h2 nama produk dan p kalimat singkat.
5. Baris 34-36: footer menutup halaman dengan baris hak cipta.

Pemeriksaan Hasil Tahap Ini #

1. Buka katalog.html di browser, lalu pastikan nama toko, empat nama produk, dan footer tampil dengan susunan yang benar.
2. Periksa judul pada tab browser; teksnya harus sama dengan isi elemen title.
3. Buka tests/cek-struktur.html, lalu centang butir-butir kerangka yang telah dipenuhi oleh file ini.

Kerangka katalog telah berdiri, tetapi setiap kartu masih berupa teks tanpa gambar dan harga. Bagian berikutnya melengkapinya satu per satu.

Referensi resmi untuk pendalaman:

• MDN Web Docs — ul: The Unordered List element
• MDN Web Docs — li
• MDN Web Docs — Structuring documents

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Katalog produk Toko Aroma: kopi dan teh pilihan dengan harga yang jelas.">
  <title>Katalog Produk Toko Aroma</title>
</head>
<body>
  <header>
    <h1>Toko Aroma</h1>
    <p>Kopi dan teh pilihan, dikirim langsung dari Bandung</p>
  </header>
  <main>
    <ul class="katalog">
      <li>
        <h2>Kopi Arabika Gayo</h2>
        <p>Single origin dari dataran tinggi Aceh.</p>
      </li>
      <li>
        <h2>Kopi Robusta Lampung</h2>
        <p>Kopi pekat untuk kopi susu gula aren.</p>
      </li>
      <li>
        <h2>Teh Hijau Pegunungan</h2>
        <p>Teh hijau segar dari kebun Jawa Barat.</p>
      </li>
      <li>
        <h2>Teh Melati</h2>
        <p>Teh beraroma bunga melati untuk sore hari.</p>
      </li>
    </ul>
  </main>
  <footer>
    <p>&copy; 2025 Toko Aroma</p>
  </footer>
</body>
</html>