Tabel data, pengelompokan konten ke dalam section, dan pasangan istilah-nilai dengan dl sudah kita kenal satu per satu. Kini saatnya merangkai semuanya menjadi satu halaman yang memakai ketiganya secara padu: katalog koleksi buku milik perpustakaan komunitas fiktif Pustaka Cendekia. Halaman ini memuat tiga tabel kategori, daftar aturan peminjaman, dan metadata lengkap — seluruhnya dalam satu berkas index.html.

Proyek ini melatih keterampilan yang jarang terlatih lewat potongan kecil: merakit tabel data accessible dari caption sampai scope="row", menimbang tiga tabel terpisah lawan satu tabel raksasa ber-kolom kategori, menandai tahun terbit dengan time, menyusun aturan perpustakaan sebagai dl, serta merangkai header, main, dan footer menjadi satu dokumen utuh yang tervalidasi.

Perilaku yang Diharapkan #

Sebelum menulis kode, mari kita tetapkan dulu hasil akhirnya. Halaman yang selesai menampilkan:

  • nama perpustakaan beserta tagline dan navigasi mini di bagian atas,
  • judul katalog dan pengantar singkat,
  • tiga section kategori — Fiksi, Nonfiksi, Referensi — masing-masing berisi tabel empat kolom: Judul, Penulis, Tahun, Kategori,
  • section “Cara Meminjam” berisi daftar aturan perpustakaan,
  • footer kecil di bagian bawah.

Setiap tabel memakai struktur yang ramah pembaca layar: caption sebagai konteks pembuka, thead dengan th scope="col", dan kolom Judul sebagai th scope="row" — pola lengkap yang kita rangkum pada chapter Accessible Tables.

Navigasi di header memakai fragment: satu klik pada “Nonfiksi” menggulirkan halaman langsung ke tabel nonfiksi tanpa memuat halaman baru. Untuk melihat hasilnya, cukup buka berkas index.html di browser — tanpa server dan tanpa alat tambahan. Proyek ini murni teks dan tabel, jadi tidak ada folder assets/ yang perlu disiapkan.

Tahapan Pengerjaan #

Proyek dikerjakan dalam empat bagian berurutan. Setiap bagian menghasilkan halaman yang tetap bisa diperiksa di browser:

  1. Struktur direktori — menyusun kerangka halaman: head lengkap, header dengan navigasi fragment, dan tiga section kosong siap diisi.
  2. Tabel katalog buku — mengisi section Fiksi dengan tabel pertama yang lengkap: caption, thead ber-scope, tbody, dan time untuk tahun terbit.
  3. Pengelompokan informasi — melengkapi tabel Nonfiksi dan Referensi, menimbang keputusan tiga tabel lawan satu tabel, lalu menambahkan aturan peminjaman sebagai dl.
  4. Metadata buku — meninjau metadata head, mengenal data terstruktur JSON-LD sebagai pengayaan, menutup halaman dengan footer, dan menguji hasil akhir.

Mulailah dari Bagian 1 dan ikuti urutannya karena setiap bagian dibangun di atas struktur bagian sebelumnya.

Kode Sumber Lengkap #

Berkas index.html berikut memuat keseluruhan hasil empat bagian di atas — 110 baris, sepuluh judul buku, tiga tabel accessible. Gunakan tombol unduh pada header code block untuk menyimpannya, lalu buka langsung di browser:

html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pustaka Cendekia — Katalog Koleksi</title>
  <meta name="description" content="Katalog koleksi Pustaka Cendekia, perpustakaan komunitas warga: sepuluh buku fiksi, nonfiksi, dan referensi beserta tata cara peminjaman.">
</head>
<body>
  <header>
    <p><strong>Pustaka Cendekia</strong> — perpustakaan komunitas warga</p>
    <nav aria-label="Navigasi katalog">
      <ul>
        <li><a href="#fiksi">Fiksi</a></li>
        <li><a href="#nonfiksi">Nonfiksi</a></li>
        <li><a href="#referensi">Referensi</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Katalog Koleksi Pustaka Cendekia</h1>
    <p>Pustaka Cendekia adalah perpustakaan komunitas yang dikelola warga: koleksinya berasal dari sumbangan anggota, petugasnya relawan, dan seluruh layanan gratis. Katalog berikut memuat sepuluh judul yang tersedia di rak, dikelompokkan menjadi fiksi, nonfiksi, dan referensi.</p>
    <section id="fiksi">
      <h2>Fiksi</h2>
      <table>
        <caption>Koleksi fiksi Pustaka Cendekia, diperbarui Oktober 2026</caption>
        <thead>
          <tr>
            <th scope="col">Judul</th><th scope="col">Penulis</th><th scope="col">Tahun</th><th scope="col">Kategori</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Laut di Ujung Kampung</th><td>Raras Asih</td><td><time datetime="2021">2021</time></td><td>Novel</td>
          </tr>
          <tr>
            <th scope="row">Rumah Kaca di Kota Baru</th><td>Bagus Wirawan</td><td><time datetime="2019">2019</time></td><td>Novel</td>
          </tr>
          <tr>
            <th scope="row">Surat dari Sendai</th><td>Maya Kusnadi</td><td><time datetime="2023">2023</time></td><td>Cerpen</td>
          </tr>
          <tr>
            <th scope="row">Nyanyian Musim Hujan</th><td>Anton Gunadi</td><td><time datetime="2020">2020</time></td><td>Puisi</td>
          </tr>
        </tbody>
      </table>
    </section>
    <section id="nonfiksi">
      <h2>Nonfiksi</h2>
      <table>
        <caption>Koleksi nonfiksi Pustaka Cendekia, diperbarui Oktober 2026</caption>
        <thead>
          <tr>
            <th scope="col">Judul</th><th scope="col">Penulis</th><th scope="col">Tahun</th><th scope="col">Kategori</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Sejarah Kecil Kota Pesisir</th><td>Hilda Marpaung</td><td><time datetime="2018">2018</time></td><td>Sejarah</td>
          </tr>
          <tr>
            <th scope="row">Berkebun di Lahan Sempit</th><td>Yoga Pratama</td><td><time datetime="2022">2022</time></td><td>Panduan</td>
          </tr>
          <tr>
            <th scope="row">Renungan dari Ruang Baca</th><td>Farid Maulana</td><td><time datetime="2024">2024</time></td><td>Esai</td>
          </tr>
        </tbody>
      </table>
    </section>
    <section id="referensi">
      <h2>Referensi</h2>
      <table>
        <caption>Koleksi referensi Pustaka Cendekia, hanya dibaca di tempat</caption>
        <thead>
          <tr>
            <th scope="col">Judul</th><th scope="col">Penulis</th><th scope="col">Tahun</th><th scope="col">Kategori</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Kamus Istilah Maritim</th><td>Nadia Kahfi</td><td><time datetime="2020">2020</time></td><td>Kamus</td>
          </tr>
          <tr>
            <th scope="row">Atlas Pesisir Nusantara</th><td>Bambang Sutrisno</td><td><time datetime="2017">2017</time></td><td>Atlas</td>
          </tr>
          <tr>
            <th scope="row">Ensiklopedia Tanaman Nusantara</th><td>Ratih Puspitasari</td><td><time datetime="2021">2021</time></td><td>Ensiklopedia</td>
          </tr>
        </tbody>
      </table>
    </section>
    <section id="cara-meminjam">
      <h2>Cara Meminjam</h2>
      <dl>
        <dt>Keanggotaan</dt>
        <dd>Cukup datang ke ruang baca dengan kartu identitas; relawan mencatat nama Anda pada buku anggota.</dd>
        <dt>Lama pinjam</dt>
        <dd>Dua pekan per buku, maksimal tiga judul sekaligus.</dd>
        <dt>Perpanjangan</dt>
        <dd>Boleh satu kali, cukup kabari relawan penjaga sebelum jatuh tempo.</dd>
        <dt>Buku referensi</dt>
        <dd>Tidak dipinjamkan — kamus, atlas, dan ensiklopedia hanya dibaca di ruang baca.</dd>
      </dl>
    </section>
  </main>
  <footer>
    <p><small>© 2026 Pustaka Cendekia — koleksi warga, dikelola warga.</small></p>
  </footer>
</body>
</html>

Hasil yang dijanjikan bagian Perilaku yang Diharapkan bisa diperiksa langsung di sini — navigasinya hidup: klik “Fiksi”, “Nonfiksi”, atau “Referensi”, halaman bergulir ke tabel kategorinya tanpa memuat halaman baru:

Peta besar berkasnya terbaca dari struktur section-nya. Mari kita bedah per blok:

  1. Blok head (baris 1-8): doctype, lang="id", charset, viewport, title, dan meta description — metadata minimal yang sudah kita kuasai sejak Section Struktur Dokumen.
  2. Blok header (baris 10-19): nama perpustakaan dan tagline dalam satu paragraf, lalu nav berisi tiga tautan fragment menuju section kategori.
  3. Blok pembuka main (baris 20-22): satu h1 untuk seluruh halaman plus paragraf pengantar — konteks katalog bagi pembaca dan mesin pencari.
  4. Blok Fiksi (baris 23-47): section pertama berisi tabel paling lengkap — caption, thead empat kolom ber-scope="col", dan tbody empat baris yang tiap barisnya dibuka th scope="row".
  5. Blok Nonfiksi dan Referensi (baris 48-91): dua section dengan pola tabel yang sama; caption Referensi sekaligus memberi tahu aturan khusus kategori itu — “hanya dibaca di tempat”.
  6. Blok aturan (baris 92-104): section “Cara Meminjam” berisi dl empat pasangan — tiap aturan sebagai dt, penjelasannya sebagai dd.
  7. Blok penutup (baris 105-110): footer bertanda hak cipta, lalu penutup body dan html.

Empat bagian berikut membedah berkas ini tahap demi tahap. Setiap part menampilkan potongan yang identik dengan bagiannya pada berkas di atas, sehingga hasil mengetik ulang kita bisa diperiksa baris demi baris.

# Struktur Direktori

Siapkan kerangka halaman direktori dengan header dan area katalog.

Buka → # Tabel Katalog Buku

Bangun tabel katalog buku dengan caption, thead, dan tbody.

Buka → # Pengelompokan Informasi

Kelompokkan buku per kategori memakai section dan heading.

Buka → # Metadata Buku

Tampilkan ISBN, tahun, dan penerbit dengan elemen semantik yang tepat.

Buka →