Pengunjung halaman restoran mencari dua informasi terlebih dahulu: apa saja menunya dan bagaimana cara menghubungi warung. Bagian ini mengisi main dengan dua section yang menjawab keduanya: menu makanan berharga dan kontak lengkap dengan jam buka. Pemilihan elemennya mengikuti makna konten, bukan tampilan, agar browser, mesin pencari, dan pembaca layar sama-sama memahaminya.

Memilih Elemen untuk Menu dan Kontak #

Setiap kelompok konten punya elemen yang paling tepat:

KontenElemen yang dipakaiAlasan
Daftar hidangandl dengan dt dan ddNama hidangan berpasangan dengan keterangan dan harganya
Alamat dan kontakaddress dengan tautan tel: dan mailto:Elemen khusus info kontak; tel: memicu panggilan di ponsel
Jam bukatable dengan caption dan th scopeData dua dimensi hari versus jam operasional

Tautan tel:+6281200001111 meminta perangkat membuka aplikasi telepon dengan nomor yang terisi. Nomor di dalam href ditulis format internasional tanpa spasi agar terbaca ponsel mana pun, sedangkan teks tautannya tetap memakai format lokal 0812-0000-1111 agar nyaman dibaca. Pola serupa berlaku pada tautan mailto: yang membuka aplikasi surel.

Mengisi Main dengan Menu dan Kontak #

File berikut melengkapi restoran.html dari Bagian 1 dengan dua section berisi konten:

html restoran-konten.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Warung Melati menyajikan masakan rumahan Sunda di Bandung setiap hari.">
  <title>Warung Melati - Masakan Rumahan Sunda</title>
</head>
<body>
  <header class="hero">
    <img src="../assets/logo-resto.svg" alt="Logo Warung Melati" width="72" height="72">
    <h1>Warung Melati</h1>
    <p>Masakan rumahan Sunda, disajikan hangat sejak 2015</p>
  </header>
  <main>
    <section id="menu">
      <h2>Menu Hari Ini</h2>
      <dl class="menu">
        <dt>Nasi Timbel Ayam</dt>
        <dd>Nasi putih hangat dengan ayam goreng, tahu, tempe, sambal, dan lalapan. Rp25.000</dd>
        <dt>Soto Bandung</dt>
        <dd>Kuah bening berisi irisan daging sapi, kacang tanah, dan emping. Rp20.000</dd>
        <dt>Pepes Ikan Mas</dt>
        <dd>Ikan mas berbumbu kuning yang dikukus dalam daun pisang. Rp28.000</dd>
        <dt>Es Cincau Hijau</dt>
        <dd>Cincau hijau dengan kuah gula merah dan santan. Rp8.000</dd>
      </dl>
    </section>
    <section id="kontak">
      <h2>Kontak dan Jam Buka</h2>
      <address>
        Jl. Melati No. 10, Bandung<br>
        Telepon: <a href="tel:+6281200001111">0812-0000-1111</a><br>
        Surel: <a href="mailto:[email protected]">[email protected]</a>
      </address>
      <table>
        <caption>Jam buka</caption>
        <thead>
          <tr>
            <th scope="col">Hari</th>
            <th scope="col">Jam Operasional</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Senin - Jumat</th>
            <td>08.00 - 20.00</td>
          </tr>
          <tr>
            <th scope="row">Sabtu - Minggu</th>
            <td>07.00 - 21.00</td>
          </tr>
        </tbody>
      </table>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Warung Melati</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text 
Di bawah hero kini tampil dua blok berurutan:
  - "Menu Hari Ini" memuat empat hidangan: nama tebal, keterangan, lalu harga
  - "Kontak dan Jam Buka" memuat alamat, tautan telepon dan surel, serta tabel dua baris

Mari kita bedah isi main pada baris 15-56:

  1. Baris 16-28: section#menu membuka dengan h2, lalu dl.menu menyusun empat pasangan; dt menuliskan nama hidangan, sedangkan dd memuat keterangan yang diakhiri harganya.
  2. Baris 29-35: section#kontak membuka dengan h2, lalu address membungkus alamat, tautan tel:, dan tautan mailto: yang dipisah br.
  3. Baris 36-54: table jam buka memakai caption sebagai judulnya, thead dengan th scope="col" untuk dua kolom, dan tbody dengan th scope="row" untuk nama kelompok hari.
  4. Baris 55-56: section kontak dan main ditutup; footer dari Bagian 1 tetap dipertahankan.

Pemeriksaan Hasil Tahap Ini #

  1. Buka restoran-konten.html di browser: menu empat hidangan tampil dengan harga, lalu kontak dan tabel jam buka di bawahnya.
  2. Di ponsel, ketuk nomor telepon pada bagian kontak; aplikasi telepon terbuka dengan nomor terisi.
  3. Jalankan tests/cek-struktur.html, lalu centang butir-butir menu dan kontak yang telah dipenuhi.

Isi halaman kini lengkap, tetapi tampilannya masih mengikuti gaya bawaan browser. Bagian berikutnya menatanya dengan stylesheet milik proyek.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

restoran-konten.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Warung Melati menyajikan masakan rumahan Sunda di Bandung setiap hari.">
  <title>Warung Melati - Masakan Rumahan Sunda</title>
</head>
<body>
  <header class="hero">
    <img src="../assets/logo-resto.svg" alt="Logo Warung Melati" width="72" height="72">
    <h1>Warung Melati</h1>
    <p>Masakan rumahan Sunda, disajikan hangat sejak 2015</p>
  </header>
  <main>
    <section id="menu">
      <h2>Menu Hari Ini</h2>
      <dl class="menu">
        <dt>Nasi Timbel Ayam</dt>
        <dd>Nasi putih hangat dengan ayam goreng, tahu, tempe, sambal, dan lalapan. Rp25.000</dd>
        <dt>Soto Bandung</dt>
        <dd>Kuah bening berisi irisan daging sapi, kacang tanah, dan emping. Rp20.000</dd>
        <dt>Pepes Ikan Mas</dt>
        <dd>Ikan mas berbumbu kuning yang dikukus dalam daun pisang. Rp28.000</dd>
        <dt>Es Cincau Hijau</dt>
        <dd>Cincau hijau dengan kuah gula merah dan santan. Rp8.000</dd>
      </dl>
    </section>
    <section id="kontak">
      <h2>Kontak dan Jam Buka</h2>
      <address>
        Jl. Melati No. 10, Bandung<br>
        Telepon: <a href="tel:+6281200001111">0812-0000-1111</a><br>
        Surel: <a href="mailto:[email protected]">[email protected]</a>
      </address>
      <table>
        <caption>Jam buka</caption>
        <thead>
          <tr>
            <th scope="col">Hari</th>
            <th scope="col">Jam Operasional</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Senin - Jumat</th>
            <td>08.00 - 20.00</td>
          </tr>
          <tr>
            <th scope="row">Sabtu - Minggu</th>
            <td>07.00 - 21.00</td>
          </tr>
        </tbody>
      </table>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Warung Melati</p>
  </footer>
</body>
</html>