Struktur Konten yang Konsisten

Situs multi-halaman pada Chapter sebelumnya telah terhubung utuh; sekarang kita jaga isi di dalamnya. Halaman-halaman sejenis — semua artikel, semua halaman produk — paling nyaman dibaca bila mengikuti pola konten yang sama, dan konsistensi itu membantu tiga pihak sekaligus: pembaca, pemelihara situs, dan pengunjung screen reader. Chapter ini menutup section Arsitektur Halaman Web dengan menetapkan pola konten, merumuskannya sebagai content model, lalu menerapkannya pada satu artikel utuh.

Pola Konten untuk Jenis yang Sama #

Ambil contoh blog milik Budi. Setiap artikelnya memuat komponen yang sama dengan urutan yang sama — itulah pola kontennya:

Pola ini berlaku dua arah: bagi penulis pola adalah daftar yang harus diisi; bagi pembaca pola adalah janji bahwa tanggal selalu di bawah judul dan penulis menutup artikel.

Mengapa Konsistensi Berdampak #

Manfaat pola konten yang sama dapat dipetakan ke tiga pihak:

• Pembaca: letak informasi dapat diperkirakan — usia tulisan selalu di bawah judul.
• Pemeliharaan: perubahan pola cukup dirancang sekali dan diterapkan seragam; posisi komponen baru telah jelas.
• Screen reader: landmark dan jenjang heading yang seragam membuat pengunjung melompat antarbagian dengan pola yang sama di halaman mana pun.

Content Model: Kontrak di Balik Pola #

Pola yang telah disepakati layak dituliskan eksplisit. Wujudnya disebut content model — deskripsi komponen wajib dan opsional untuk satu jenis konten beserta urutannya, istilah yang berakar dari dunia editorial. Model artikel blog Budi menjadi:

Model konten: "artikel blog"
1. Judul artikel   - wajib, satu h1
2. Tanggal terbit  - wajib, time dengan datetime
3. Lead            - wajib, satu paragraf pembuka
4. Subjudul        - opsional, h2, boleh berulang
5. Isi             - paragraf atau list di bawah tiap subjudul
6. Penulis         - wajib, footer milik artikel

Content model berperan sebagai kontrak: penulis mengetahui komponen yang wajib disiapkan, halaman mengetahui struktur yang menampungnya. Bila kelak situs berpindah ke tool dengan mesin template, model inilah yang diterjemahkan menjadi template.

Checklist Konsistensi #

Sebelum halaman dinyatakan mengikuti pola, jalankan pemeriksaan singkat berikut:

• Satu h1 per halaman, dan isinya judul konten — bukan nama situs.
• Heading tanpa loncatan level, dari h1 menuju h2 lalu h3.
• Seluruh komponen wajib pada content model hadir di halaman sejenis.
• Urutan komponen sama di setiap halaman sejenis.
• Elemen semantik yang sama untuk komponen yang sama — tanggal selalu time, penulis selalu di footer artikel.
• Penulisan label seragam, misalnya format tanggal yang sama di semua artikel.

Checklist ini melengkapi pemeriksaan penulisan tag pada section Validation dan Code Quality: kali ini yang dijaga adalah kesetiaan halaman pada pola kontennya.

Template Artikel dalam Praktik #

Model di atas kini kita terapkan pada satu artikel resep. Simpan file berikut sebagai artikel-soto-ayam.html; dalam situs utuh article ini berada di dalam main, namun contoh fokus pada unit artikelnya:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Soto Ayam Kuah Kuning — Blog Kebun Budi</title>
</head>
<body>
  <article>
    <header>
      <h1>Soto Ayam Kuah Kuning</h1>
      <p>Terbit pada <time datetime="2025-04-12">12 April 2025</time></p>
    </header>
    <p>Soto ayam kuah kuning ini matang dalam empat puluh menit tanpa bumbu yang rumit.</p>
    <h2>Bahan Utama</h2>
    <ul>
      <li>Setengah kilogram daging ayam</li>
      <li>Bumbu kuning siap pakai</li>
      <li>Bihun dan telur rebus</li>
    </ul>
    <h2>Langkah Memasak</h2>
    <ol>
      <li>Rebus ayam hingga matang, lalu suwir dagingnya.</li>
      <li>Hangatkan kuah kuning bersama rempahnya.</li>
      <li>Sajikan ayam dengan bihun, telur, dan kuah yang panas.</li>
    </ol>
    <footer>
      <p>Ditulis oleh Budi — [email protected]</p>
    </footer>
  </article>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Soto Ayam Kuah Kuning" beserta baris tanggal terbit
  - Satu paragraf lead di bawahnya
  - Daftar bahan lalu langkah memasak bernomor
  - Baris penulis di bagian bawah artikel

Mari kita bandingkan halaman ini dengan content modelnya:

1. article: membungkus seluruh unit resep sebagai komposisi yang mandiri dan dapat didistribusikan.
2. header artikel: komponen wajib pertama dan kedua — h1 judul, lalu time beratribut datetime untuk tanggal machine-readable.
3. Paragraf lead: pembuka satu kalimat, komponen wajib ketiga.
4. h2 Bahan Utama dengan ul: subjudul opsional pertama; urutan bahan tidak bermakna sehingga list tak berurut yang dipilih.
5. h2 Langkah Memasak dengan ol: subjudul opsional kedua; urutan langkah bermakna sehingga list berurut yang dipakai.
6. footer artikel: penutup berisi nama penulis — footer juga berlaku di dalam article untuk menyimpan metadata artikel itu sendiri.
7. title: pola “Judul Artikel — Blog Kebun Budi” yang konsisten dengan situs multi-halaman.

Setiap komponen wajib hadir, urutannya sesuai model, elemen semantiknya seragam. Artikel berikutnya cukup mengisi pola yang sama — perancangan selesai satu kali untuk semuanya.

Seluruh bekal arsitektural kini lengkap: struktur satu halaman, pola layout, kerangka yang dapat dipakai ulang, situs multi-halaman, dan pola konten yang konsisten. Section Proyek menyusul; di sanalah seluruh bekal ini dipraktikkan untuk membangun situs utuh dari perencanaan hingga halaman final.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen article
• MDN Web Docs — Structuring documents
• web.dev — Learn HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Soto Ayam Kuah Kuning — Blog Kebun Budi</title>
</head>
<body>
  <article>
    <header>
      <h1>Soto Ayam Kuah Kuning</h1>
      <p>Terbit pada <time datetime="2025-04-12">12 April 2025</time></p>
    </header>
    <p>Soto ayam kuah kuning ini matang dalam empat puluh menit tanpa bumbu yang rumit.</p>
    <h2>Bahan Utama</h2>
    <ul>
      <li>Setengah kilogram daging ayam</li>
      <li>Bumbu kuning siap pakai</li>
      <li>Bihun dan telur rebus</li>
    </ul>
    <h2>Langkah Memasak</h2>
    <ol>
      <li>Rebus ayam hingga matang, lalu suwir dagingnya.</li>
      <li>Hangatkan kuah kuning bersama rempahnya.</li>
      <li>Sajikan ayam dengan bihun, telur, dan kuah yang panas.</li>
    </ol>
    <footer>
      <p>Ditulis oleh Budi — [email protected]</p>
    </footer>
  </article>
</body>
</html>