Arsitektur Konten

Arsitektur konten menetapkan kerangka setiap halaman sebelum markup pertama ditulis, sehingga keputusan struktur tidak berubah di tengah pengerjaan. Topik ini merencanakan landmark yang berulang pada ketiga halaman proyek perpustakaan komunitas, hierarki judul per halaman, keputusan elemen untuk setiap kebutuhan konten, penamaan berkas, dan struktur folder proyek. Hasil akhirnya berupa kerangka folder yang siap diisi halaman utuh.

Landmark yang berulang di setiap halaman#

Ketiga halaman proyek memakai rangkaian landmark yang sama, yaitu header, nav, main, dan footer, karena rangkaian itulah yang membuat halaman-halaman itu terasa sebagai satu situs. Header memuat nama perpustakaan, nav memuat tiga tautan antarhalaman, main menampung isi khas halamannya, dan footer menutup dengan informasi singkat. Landmark yang konsisten memudahkan pengguna berpindah halaman, dan memudahkan pembaca layar melompat langsung ke main tanpa membaca ulang navigasi.

Kerangka yang diulang pada setiap berkas dituliskan sebagai berikut. Selain keempat landmark, kerangka itu memuat skip link sebagai elemen pertama di dalam body dan atribut id pada main sebagai sasarannya.

<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">
  <!-- isi khas setiap halaman ditulis di sini -->
</main>
<footer>
  <p>Perpustakaan Komunitas Baca, balai warga RW 04.</p>
</footer>

Kerangka di atas disalin ke tiga berkas HTML, lalu bagian di dalam main diganti mengikuti fokus halamannya. Atribut aria-label pada nav memberi nama pada landmark ketika satu halaman memuat lebih dari satu nav, dan menuliskannya sejak awal menghindari penyuntingan di kemudian hari. Seluruh tautan navigasi memakai alamat relatif berupa nama berkas, sehingga situs tetap berfungsi penuh meskipun foldernya dipindahkan ke lokasi lain.

Hierarki judul per halaman#

Setiap halaman memuat tepat satu h1, dan judul-judul di bawahnya menurun tanpa melompat tingkat. Pada Beranda, h1 berisi nama perpustakaan dan berada di dalam header, karena halaman itu memang perkenalan atas situsnya. Pada halaman lain, h1 berisi judul halamannya dan berada di awal main. Aturan satu h1 ini menjaga kerangka dokumen tetap tunggal, sehingga daftar judul yang dibacakan pembaca layar maupun yang dibaca mesin pencari tidak rancu.

Tabel di atas sekaligus menjadi daftar isi per halaman. Setiap h2 menyatakan satu bagian utama, dan tidak ada bagian yang membutuhkan h3 pada proyek sekecil ini. Apabila nanti satu bagian membutuhkan anak bagian, tingkat berikutnya dipilih secara berurutan dan bukan berdasarkan ukuran hurufnya, karena ukuran tampilan adalah urusan CSS.

Keputusan elemen per kebutuhan konten#

Elemen dipilih dari makna kontennya, dan keputusannya ditetapkan lebih dahulu agar penulisan halaman tidak berhenti untuk menimbang penempatan setiap elemen. Tabel berikut memetakan setiap kebutuhan konten pada proyek ini ke elemen yang dipakai beserta alasannya.

Pemetaan itu memperlihatkan pola umumnya. Data yang berjajar berupa baris dan kolom masuk tabel, isi yang berdiri sendiri masuk article, dan pelengkap yang bisa dilepas tanpa merusak isi utama masuk aside. Pada formulir, kelompok kontrol yang satu makna dibungkus fieldset dengan legend sebagai judulnya, sedangkan kontrol tunggal cukup berlabel langsung.

Penamaan berkas dan beranda folder#

Seluruh nama berkas ditulis kebab-case, yaitu huruf kecil dipisahkan tanda hubung, tanpa spasi, tanpa aksen, dan tanpa huruf kapital. Kebiasaan ini menghindari tiga persoalan sekaligus, yaitu spasi yang berubah menjadi %20 pada URL, perbedaan perlakuan huruf besar dan kecil pada server yang peka huruf, serta ketidakseragaman antarsistem operasi. Nama halaman dan nama berkasnya dibuat berdekatan agar tautan mudah ditebak, sehingga halaman Koleksi disimpan sebagai koleksi.html dan halaman Kontak sebagai kontak.html. Nama berkas sekaligus menjadi alamat halamannya pada URL, sehingga nama yang deskriptif membantu pengguna membaca alamat sebelum halamannya dibuka.

Berkas index.html berkedudukan khusus sebagai beranda folder. Ketika URL menunjuk ke sebuah folder tanpa nama berkas, server mengirimkan index.html di dalamnya secara bawaan, sehingga alamat situs cukup ditulis sampai nama foldernya. Karena itu halaman Beranda disimpan sebagai index.html dan bukan beranda.html, dan tautan “Beranda” pada nav menuju index.html. Ekstensi .html juga tetap ditulis pada setiap tautan, karena pratinjau berkas lokal di browser tanpa server mengandalkan nama berkas yang lengkap. Kebiasaan yang sama berlaku pada setiap folder yang dipublikasikan.

Struktur folder proyek#

Seluruh berkas proyek berada di dalam satu folder bernama perpustakaan-komunitas, dengan folder khusus untuk aset yang berulang, yaitu css untuk lembar gaya dan gambar untuk berkas gambarnya. Pemisahan itu menjaga agar folder akar hanya berisi halaman, sehingga struktur proyek terbaca sekilas.

perpustakaan-komunitas/
├── index.html
├── koleksi.html
├── kontak.html
├── css/
│   └── gaya.css
└── gambar/
    └── sampul-buku.svg

Kerangka folder tersebut dibangun dengan perintah berikut. Opsi -p pada mkdir membuat seluruh folder induknya sekaligus dan tidak melaporkan error apabila foldernya sudah ada, sedangkan touch membuat berkas kosong yang kelak diisi markup.

# membuat folder proyek beserta folder asetnya
mkdir -p perpustakaan-komunitas/css perpustakaan-komunitas/gambar
# membuat tiga halaman situs
touch perpustakaan-komunitas/index.html perpustakaan-komunitas/koleksi.html perpustakaan-komunitas/kontak.html
# membuat aset pendukung
touch perpustakaan-komunitas/css/gaya.css perpustakaan-komunitas/gambar/sampul-buku.svg
# menampilkan struktur yang terbentuk
ls -R perpustakaan-komunitas

perpustakaan-komunitas:
css
gambar
index.html
koleksi.html
kontak.html

perpustakaan-komunitas/css:
gaya.css

perpustakaan-komunitas/gambar:
sampul-buku.svg

Keluaran ls -R menampilkan folder akar beserta dua folder asetnya, dan seluruh berkas kosong sudah menunggu diisi. Berkas gaya.css dihubungkan dari ketiga halaman melalui link rel="stylesheet", sedangkan sampul-buku.svg dirujuk oleh Beranda sebagai gambar sampulnya. Dengan struktur yang tetap, alamat relatif seperti css/gaya.css tertulis sama di ketiga halaman karena ketiganya berada satu tingkat dengan folder asetnya.

Kesalahan umum#

Menamai berkas dengan spasi dan huruf kapital. Nama seperti Halaman Koleksi.html menjadi Halaman%20Koleksi.html pada URL dan berperilaku berbeda antarsistem operasi pada server yang peka huruf. Ubah nama menjadi halaman-koleksi.html sejak awal, karena mengganti nama di kemudian hari berarti memperbaiki seluruh tautan yang menunjuknya.

Melompatkan tingkat judul demi ukuran huruf. Kerangka yang berpindah dari h1 langsung ke h3 membuat struktur dokumen tampak kehilangan satu bagian. Gunakan h2 untuk bagian utama, lalu atur ukuran tampilannya dengan CSS.

Mengubah struktur folder di tengah pengerjaan. Berkas yang dipindah membatalkan seluruh alamat relatif yang sudah tertulis, dan tautan yang rusak baru terlihat saat halaman dibuka. Tetapkan struktur folder sejak topik ini, lalu tambahkan aset baru ke foldernya masing-masing.

Ringkasan#

• Ketiga halaman memakai rangkaian landmark yang sama berupa header, nav, main, dan footer, dengan skip link sebagai elemen pertama pada body.
• Setiap halaman memuat tepat satu h1, dan setiap kebutuhan konten sudah dipetakan ke elemennya sebelum markup ditulis.
• Nama berkas ditulis kebab-case, dan index.html berfungsi sebagai beranda folder yang dikirim server secara bawaan.
• Struktur folder proyek memisahkan halaman dari asetnya, yaitu folder css dan gambar, sehingga alamat relatif tertulis sama di semua halaman.

Referensi#

• Document and website structure — MDN Web Docs — Panduan pembagian struktur situs multihalaman beserta peran tiap wadahnya.
• Sections — HTML Living Standard (WHATWG) — Ketentuan resmi elemen header, nav, main, dan heading pada spesifikasi HTML.
• The Heading elements — MDN Web Docs — Dokumentasi h1 sampai h6 beserta kaidah hierarkinya.