Tiga tabel dan aturan peminjaman sudah lengkap. Bagian terakhir menutup proyek dari dua arah: ke atas — menimbang metadata head — dan ke bawah — menambahkan footer, lalu menguji hasil akhir dengan validator dan daftar periksa aksesibilitas tabel.
Metadata yang Sudah Kita Tulis #
Seluruh metadata sudah tertulis sejak Bagian 1; saatnya menimbang isinya. Dua baris head memikul tugas berbeda:
title— “Pustaka Cendekia — Katalog Koleksi”: tampil di tab browser, pada daftar bookmark, dan sebagai baris pertama hasil pencarian. Nama perpustakaan berdiri di depan agar identitasnya tetap terbaca di ruang sempit.description— cuplikan satu-dua kalimat yang kerap tampil di bawah judul pada hasil pencarian. Isinya merangkum tiga hal: apa halaman ini (katalog koleksi), siapa pemiliknya (perpustakaan komunitas), dan apa isinya (fiksi, nonfiksi, referensi, tata cara peminjaman).
Keduanya dibedah tuntas pada chapter Title dan Description. Prinsip yang kita pegang sepanjang proyek — satu h1, heading berurutan, section semantik — berasal dari bab Struktur Halaman untuk Search Engine: mesin membaca kerangka halaman, bukan hanya kata kunci.
Data Terstruktur untuk Satu Buku #
Lapis yang lebih eksplisit: data terstruktur JSON-LD dengan kosakata Schema.org — diperkenalkan pada bab yang sama dengan contoh Article; untuk buku, jenisnya Book:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Book",
"name": "Laut di Ujung Kampung",
"author": "Raras Asih",
"datePublished": "2021",
"publisher": "Pustaka Cendekia"
}
</script>Mari kita bedah isi datanya secara singkat:
type="application/ld+json"(baris 1): browser tidak mengeksekusi dan tidak menampilkanscriptini — isinya untuk mesin penjelajah.@context(baris 3): menyatakan kosakata yang dipakai — Schema.org.@type(baris 4): jenis entitasnya buku.namesampaipublisher(baris 5-8): fakta buku pertama tabel Fiksi dalam bentuk terbaca mesin — data yang sama dengan baristh scope="row"dantd-nya, kini dinyatakan tanpa perlu menebak dari markup tabel.
Berkas proyek kita sengaja tidak memuat blok ini — fokus proyek adalah struktur body yang solid. Bila ingin mencoba, tempel blok itu ke dalam head setelah meta description: tampilan halaman tidak berubah dan validasi tetap lolos.
Footer Penutup #
Setelah </main>, tambahkan penutup dokumen:
<footer>
<p><small>© 2026 Pustaka Cendekia — koleksi warga, dikelola warga.</small></p>
</footer>Dua keputusan kecil di baliknya:
footerdi luarmain: penutup seluruh dokumen — bukan bagian isi katalog — sehingga tempatnya setelahmainditutup.smallpada barisnya: menandai baris sebagai keterangan ringkas; browser menampilkannya lebih kecil secara bawaan, pas untuk catatan hak cipta.
Uji Akhir: Validator dan Aksesibilitas #
Sebelum menyimpan berkas akhir, jalankan dua ujian. Ujian pertama: daftar periksa aksesibilitas tabel dari chapter Accessible Tables:
- Setiap tabel ber-
captiondeskriptif sebagai anak pertamatable— terpenuhi ketiganya. - Semua judul memakai
thdenganscope—coluntuk judul atas,rowuntuk judul kiri. - Tidak ada sel kosong; setiap sel memuat data nyata.
- Struktur polos tanpa
colspan/rowspan— paling andal untuk semua alat bantu.
Ujian kedua: validator W3C seperti pada chapter HTML Validator.
Hasil Akhir pada Browser #
Halaman kini utuh: nama perpustakaan dan navigasi di atas, judul dan pengantar, tiga tabel kategori dengan judul kolom dan barisnya, aturan peminjaman yang menjorok rapi, dan footer kecil di bawah. Total 110 baris dalam satu berkas index.html — cukup kecil untuk dibaca ulang dalam satu duduk, cukup lengkap untuk dipakai sebagai pola katalog koleksi Anda sendiri: menambah judul baru cukup menyalin satu blok tr dan mengisi datanya.
Inilah hasil akhir proyek — navigasinya hidup, silakan dicoba:
Ringkasan Bagian 4 #
titledandescriptionmenjadi wajah halaman di tab browser dan hasil pencarian; JSON-LD siap menambah lapis fakta eksplisit bila kelak diperlukan.footerdengansmallmenutup dokumen di luarmain.- Hasil akhir lolos dua ujian: daftar periksa tabel accessible terpenuhi dan validator tidak melaporkan galat.
Proyek selesai. Berkas lengkap dapat diunduh dari halaman overview proyek.