Topik ini menerapkan rencana arsitektur konten menjadi halaman yang utuh, yaitu Beranda dan halaman Kontak dari situs perpustakaan komunitas. Pembahasannya bergerak dari head yang lengkap, landmark dan konten semantik pada Beranda, sampai formulir keanggotaan pada Kontak. Setelah topik ini, dua dari tiga halaman proyek selesai dibangun, dan kedua berkas utuhnya dapat dibuka langsung di browser tanpa server.
Head lengkap pada setiap halaman#
Head pada kedua halaman proyek memuat empat kelompok metadata yang sama, yaitu pengodean karakter, viewport, judul dan deskripsi, serta favicon, kemudian diikuti lembar gaya halamannya. Susunan lengkapnya terlihat pada potongan berikut yang diambil dari beranda.html.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Perpustakaan Komunitas Baca: Beranda</title>
<meta name="description" content="Situs Perpustakaan Komunitas Baca: pengenalan, jam buka, koleksi, dan pendaftaran anggota.">
<link rel="icon" href="sampul-buku.svg" type="image/svg+xml">
<style>
body { font-family: sans-serif; margin: 0 auto; max-width: 40rem; padding: 0 1rem; color: #1f2937; }
.skip-link { position: absolute; top: -48px; left: 8px; background: #1e3a5f; color: #ffffff; padding: 8px 16px; }
.skip-link:focus { top: 8px; }
nav { display: flex; gap: 12px; background: #eef2f7; padding: 8px; }
figure { margin: 1rem 0; }
figcaption { font-size: 0.9rem; color: #475569; }
table { border-collapse: collapse; }
caption { text-align: left; font-weight: bold; padding: 4px 0; }
th, td { border: 1px solid #94a3b8; padding: 4px 12px; text-align: left; }
</style>
</head>Elemen title dan meta description menyebut halamannya secara spesifik, sehingga tab browser menampilkan Beranda dan Kontak dengan pembeda yang jelas meskipun keduanya berasal dari satu situs. Favicon meminjam berkas gambar sampul yang sama dengan konten Beranda, karena situs sekecil ini belum memerlukan ikon terpisah. Pada bundle topik ini, sampul-buku.svg berada berdampingan dengan berkas HTML, sehingga href-nya cukup nama berkasnya saja. Pada folder proyek dari topik arsitektur konten, sampul-buku.svg berpindah ke folder gambar, sehingga atribut href berubah menjadi gambar/sampul-buku.svg. Isi elemen style dipindah ke css/gaya.css yang dihubungkan melalui link rel="stylesheet".
Landmark dan konten semantik pada Beranda#
Tubuh Beranda mengikuti kerangka landmark dari topik arsitektur, dengan tambahan atribut tabindex="-1" pada main agar skip link yang menjadi tautan pertamanya dapat memindahkan fokus ke sana. Bagian main berisi satu article berisi pengenalan dan satu aside berisi jam buka, sesuai pemetaan elemen yang sudah ditetapkan. Gambar sampul dibungkus figure bersama figcaption-nya, dan kutipan anggota ditutup footer sebagai wadah atribusinya.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160" role="img" aria-label="Ilustrasi buku terbuka dengan pita penanda merah">
<rect x="4" y="4" width="232" height="152" rx="8" fill="#eef2f7" stroke="#94a3b8"/>
<rect x="40" y="118" width="160" height="6" rx="3" fill="#cbd5e1"/>
<path d="M 120 40 C 100 30 70 30 50 38 L 50 112 C 70 104 100 104 120 114 Z" fill="#ffffff" stroke="#64748b" stroke-width="2"/>
<path d="M 120 40 C 140 30 170 30 190 38 L 190 112 C 170 104 140 104 120 114 Z" fill="#f8fafc" stroke="#64748b" stroke-width="2"/>
<line x1="120" y1="40" x2="120" y2="114" stroke="#64748b" stroke-width="2"/>
<line x1="62" y1="56" x2="106" y2="54" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
<line x1="62" y1="70" x2="106" y2="68" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
<line x1="62" y1="84" x2="98" y2="82" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
<line x1="134" y1="54" x2="178" y2="56" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
<line x1="134" y1="68" x2="178" y2="70" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
<line x1="134" y1="82" x2="170" y2="84" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
<path d="M 150 36 L 160 36 L 160 66 L 155 57 L 150 66 Z" fill="#dc2626"/>
</svg>Gambar di atas adalah satu-satunya berkas media proyek ini, dan penggunaannya menutup dua kewajiban sekaligus. Atribut alt mendeskripsikan isi ilustrasi bagi pembaca yang tidak melihat gambarnya. Atribut width dan height menahan ruang gambar sebelum berkasnya selesai dimuat, sehingga tata letak tidak bergeser. Kutipan anggota yang mengikutinya ditulis dengan blockquote dan footer, mengikuti pola atribusi yang sudah dibahas pada modul konten teks, dan seluruh teksnya tetap bagian dari article yang sama.
Berkas utuh beranda.html#
Berkas berikut menyatukan seluruh bagian yang sudah dibahas, mulai dari head, skip link, header dengan h1 nama perpustakaan, main berisi article dan aside, sampai footer. Buka berkasnya di browser, lalu cocokkan tampilannya dengan markupnya, dan perhatikan bahwa teks alt, keterangan gambar, kutipan, serta tabel jam buka tampil sebagai bagian yang menyatu.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Perpustakaan Komunitas Baca: Beranda</title>
<meta name="description" content="Situs Perpustakaan Komunitas Baca: pengenalan, jam buka, koleksi, dan pendaftaran anggota.">
<link rel="icon" href="sampul-buku.svg" type="image/svg+xml">
<style>
body { font-family: sans-serif; margin: 0 auto; max-width: 40rem; padding: 0 1rem; color: #1f2937; }
.skip-link { position: absolute; top: -48px; left: 8px; background: #1e3a5f; color: #ffffff; padding: 8px 16px; }
.skip-link:focus { top: 8px; }
nav { display: flex; gap: 12px; background: #eef2f7; padding: 8px; }
figure { margin: 1rem 0; }
figcaption { font-size: 0.9rem; color: #475569; }
table { border-collapse: collapse; }
caption { text-align: left; font-weight: bold; padding: 4px 0; }
th, td { border: 1px solid #94a3b8; padding: 4px 12px; text-align: left; }
</style>
</head>
<body>
<a class="skip-link" href="#konten-utama">Langsung ke konten utama</a>
<header>
<h1>Perpustakaan Komunitas Baca</h1>
<p>Layanan baca gratis yang dikelola warga balai warga RW 04.</p>
<nav aria-label="Navigasi utama">
<a href="index.html">Beranda</a>
<a href="koleksi.html">Koleksi</a>
<a href="kontak.html">Kontak</a>
</nav>
</header>
<main id="konten-utama" tabindex="-1">
<article>
<h2>Tentang perpustakaan</h2>
<figure>
<img src="sampul-buku.svg" alt="Ilustrasi buku terbuka dengan pita penanda merah" width="240" height="160">
<figcaption>Sampul antologi cerita warga yang terbit tahun lalu.</figcaption>
</figure>
<p>Perpustakaan Komunitas Baca menyediakan sekitar 1.200 koleksi yang dipinjamkan gratis kepada warga sekitar. Koleksinya dikelola bergilir oleh anggota, dan seluruh layanannya tidak dipungut biaya. Daftar judul utama beserta status peminjamannya tersedia pada halaman <a href="koleksi.html">Koleksi</a>.</p>
<blockquote>
<p>Menemukan rak bacaan tetangga ternyata lebih seru daripada menabung untuk membeli buku baru.</p>
<footer>Dewi, anggota sejak dua tahun lalu</footer>
</blockquote>
</article>
<aside>
<h2>Jam buka</h2>
<table>
<caption>Jam buka mingguan</caption>
<thead>
<tr>
<th scope="col">Hari</th>
<th scope="col">Jam</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Senin sampai Kamis</th>
<td>16.00 sampai 20.00</td>
</tr>
<tr>
<th scope="row">Sabtu</th>
<td>09.00 sampai 14.00</td>
</tr>
<tr>
<th scope="row">Jumat dan Minggu</th>
<td>Tutup</td>
</tr>
</tbody>
</table>
</aside>
</main>
<footer>
<p>Perpustakaan Komunitas Baca, balai warga RW 04.</p>
</footer>
</body>
</html>Tabel jam buka pada aside memakai caption sebagai judulnya dan th beratribut scope pada seluruh sel kepalanya, baik kepala kolom maupun kepala baris. Pasangan scope="col" dan scope="row" itulah yang membuat pembaca layar menyebut nama hari setiap kali baris jamnya dibaca. Satu h1 berada di header, sedangkan article dan aside masing-masing dibuka h2, sesuai hierarki yang direncanakan.
Formulir keanggotaan pada Kontak#
Halaman Kontak menambahkan dua elemen yang belum muncul pada Beranda, yaitu address untuk alamat dan form untuk pendaftaran anggota. Atribut action menunjuk ke URL /pendaftaran yang kelak diisi layanan penerima data, sedangkan method="post" menempatkan data pada badan permintaan karena pendaftaran mengubah keadaan penerima, bukan sekadar mencari. Kontrol-kontrolnya dikelompokkan dalam dua fieldset berlegend, dan setiap kontrol berlabel melalui pasangan for dan id.
Pemilihan tipe masukannya mengikuti isi datanya. Nama menggunakan type="text" dengan batas panjang, surel menggunakan type="email" yang memeriksa format alamat, dan telepon menggunakan type="tel" yang dibatasi pattern="[0-9]{9,12}" beserta inputmode="numeric" untuk papan ketik sentuh. Jenis keanggotaan menjadi satu kelompok tombol radio dengan atribut name yang sama, pesan tambahan menggunakan textarea, dan persetujuan peraturan menjadi checkbox beratribut required sehingga formulir tidak terkirim sebelum disetujui.
Seluruh kontrol membawa atribut name, karena atribut itulah yang menjadi kunci pasangan data ketika formulir dikirim. Tombol kirimnya ditulis button type="submit" supaya isinya bebas berupa markup. Seluruh pemeriksaan itu berjalan di browser tanpa satu baris skrip pun.
Berkas utuh kontak.html#
Berkas berikut memuat halaman Kontak selengkapnya, dengan kerangka landmark yang sama persis dengan Beranda sehingga navigasinya terasa menyatu. Kirim formulirnya dalam keadaan kosong di browser untuk melihat pesan validasi bawaan muncul pada kolom pertama yang bermasalah. Setelah formulir terisi dan dikirim, browser menuju /pendaftaran, yaitu alamat yang belum tersedia pada server lokal, sehingga responsnya berupa status 404. Data yang dikirim tetap dapat diperiksa melalui tab Network pada DevTools, karena method POST menempatkan data pada badan permintaan dan bukan pada URL.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Perpustakaan Komunitas Baca: Kontak</title>
<meta name="description" content="Alamat, jam layanan, dan formulir pendaftaran anggota Perpustakaan Komunitas Baca.">
<link rel="icon" href="sampul-buku.svg" type="image/svg+xml">
<style>
body { font-family: sans-serif; margin: 0 auto; max-width: 40rem; padding: 0 1rem; color: #1f2937; }
.skip-link { position: absolute; top: -48px; left: 8px; background: #1e3a5f; color: #ffffff; padding: 8px 16px; }
.skip-link:focus { top: 8px; }
nav { display: flex; gap: 12px; background: #eef2f7; padding: 8px; }
fieldset { border: 1px solid #94a3b8; margin-bottom: 1rem; }
legend { font-weight: bold; padding: 0 6px; }
button { padding: 6px 16px; }
</style>
</head>
<body>
<a class="skip-link" href="#konten-utama">Langsung ke konten utama</a>
<header>
<p class="nama-situs">Perpustakaan Komunitas Baca</p>
<nav aria-label="Navigasi utama">
<a href="index.html">Beranda</a>
<a href="koleksi.html">Koleksi</a>
<a href="kontak.html">Kontak</a>
</nav>
</header>
<main id="konten-utama" tabindex="-1">
<h1>Kontak dan keanggotaan</h1>
<h2>Alamat dan layanan</h2>
<address>
Balai warga RW 04, Jalan Melati 12<br>
surel: [email protected]<br>
telepon: 0812-3456-7890
</address>
<p>Pendaftaran anggota baru dilayani pada jam buka, dan pengurus menjawab pesan paling lambat tiga hari kerja.</p>
<h2>Formulir keanggotaan</h2>
<form action="/pendaftaran" method="post">
<fieldset>
<legend>Data anggota</legend>
<p>
<label for="nama">Nama lengkap</label><br>
<input id="nama" name="nama" type="text" required minlength="3" maxlength="40">
</p>
<p>
<label for="surel">Alamat surel</label><br>
<input id="surel" name="surel" type="email" required>
</p>
<p>
<label for="telepon">Nomor telepon (9-12 digit)</label><br>
<input id="telepon" name="telepon" type="tel" pattern="[0-9]{9,12}" inputmode="numeric" required>
</p>
</fieldset>
<fieldset>
<legend>Jenis keanggotaan</legend>
<input id="umum" name="jenis" type="radio" value="umum" checked>
<label for="umum">Umum</label><br>
<input id="pelajar" name="jenis" type="radio" value="pelajar">
<label for="pelajar">Pelajar</label><br>
<input id="guru" name="jenis" type="radio" value="guru">
<label for="guru">Guru</label>
</fieldset>
<p>
<label for="pesan">Pesan untuk pengurus</label><br>
<textarea id="pesan" name="pesan" rows="4" cols="40"></textarea>
</p>
<p>
<input id="setuju" name="setuju" type="checkbox" value="ya" required>
<label for="setuju">Menyetujui peraturan peminjaman</label>
</p>
<button type="submit">Kirim pendaftaran</button>
</form>
</main>
<footer>
<p>Perpustakaan Komunitas Baca, balai warga RW 04.</p>
</footer>
</body>
</html>Pada halaman ini, h1 berpindah ke dalam main karena judulnya khas halaman, sedangkan header cukup memuat nama situs sebagai paragraf. Perbedaan itu persis mengikuti tabel hierarki judul pada topik arsitektur konten, dan penerapannya pada dua halaman sekaligus membuktikan aturannya tidak bergantung pada satu jenis halaman saja.
Kesalahan umum#
Menyalin kerangka lalu melupakan judul dan deskripsinya. title dan meta description yang ikut tersalin dari berkas lain membuat dua halaman berjudul sama, dan keduanya tampak identik pada daftar hasil pencarian. Ganti kedua isinya segera setelah kerangka disalin, sebelum isi halamannya ditulis.
Menyisipkan gambar tanpa alt atau tanpa dimensi. Gambar tanpa alt dibacakan nama berkasnya oleh pembaca layar, sedangkan gambar tanpa width dan height mendorong isi di bawahnya saat dimuat. Lengkapi kedua atributnya pada gambar mana pun yang disisipkan.
Mengganti label dengan placeholder. Atribut placeholder hilang begitu kolom terisi dan tidak selalu dibacakan pembaca layar, sehingga kontrol yang hanya mengandalkannya kehilangan namanya. Setiap kontrol tetap berlabel label yang berasosiasi, dan placeholder hanya melengkapi.
Ringkasan#
- Head setiap halaman memuat charset, viewport,
titledanmeta descriptionyang spesifik per halaman, favicon, serta lembar gayanya. - Beranda menerapkan landmark lengkap dengan
article,aside,figure, danblockquote, sedangkan kontak menambahkanaddressdan formulir keanggotaan yang lengkap. - Formulir memakai
fieldsetberlegend, label berasosiasi, tipe masukan sesuai data, dan atribut validasi bawaan tanpa skrip tambahan. - Kedua berkas utuhnya berdiri sendiri dan dapat dibuka langsung di browser sebagai bahan pemeriksaan pada tahap audit.
Referensi#
- Elemen img — MDN Web Docs — Daftar atribut img beserta kaidah teks alt dan dimensinya.
- Elemen form — MDN Web Docs — Dokumentasi form beserta atribut action, method, dan kontrol di dalamnya.
- Elemen caption — MDN Web Docs — Peran caption sebagai judul tabel dan kedudukannya di dalam table.
- Elemen figure — MDN Web Docs — Penggunaan figure dan figcaption untuk konten yang berketerangan sendiri.