Kita telah menulis satu halaman HTML utuh pada Section sebelumnya, tetapi kerangkanya masih kita perlakukan seperti resep: diketik, disimpan, lalu ditinggalkan tanpa dipahami. Chapter ini membedah kerangka minimal dokumen HTML baris demi baris sehingga setiap bagian memiliki alasan yang jelas untuk ditulis. Kerangka inilah yang menjadi template dasar seluruh halaman sepanjang Course HTML.

Kerangka Minimal #

Sebuah dokumen HTML minimal memuat enam bagian: deklarasi doctype, elemen html sebagai akar, head berisi deklarasi charset dan judul, serta body yang menampung konten. Aturan tersebut berlaku untuk halaman apa pun — dari halaman profil pribadi sampai beranda toko daring.

Mekanisme pemrosesannya berurutan dari atas ke bawah. Browser membaca doctype terlebih dahulu untuk memilih mode pemrosesan, lalu membangun pohon dokumen dari elemen html ke bawah. Bagian head diproses lebih dulu karena deklarasi charset di dalamnya menentukan cara browser membaca byte berikutnya; setelah seluruh metadata terbaca, isi body dirender menjadi halaman yang kita lihat di layar.

Berikut kerangka minimal yang lengkap:

html Kerangka minimal dokumen HTML 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Kedai Kopi Siti</title>
</head>
<body>
  <h1>Kedai Kopi Siti</h1>
  <p>Buka setiap hari pukul 07.00.</p>
</body>
</html>

Hasil Render:

Mari kita telaah setiap baris kerangka tersebut:

  1. Baris 1 (<!DOCTYPE html>): deklarasi doctype; mengaktifkan mode standar pemrosesan HTML modern — dibahas tuntas pada chapter Doctype HTML.
  2. Baris 2 (<html lang="id">): elemen akar yang membungkus seluruh isi dokumen; atribut lang menyatakan bahasa konten — dibahas pada chapter Bahasa Dokumen.
  3. Baris 3 (<head>): pembuka wadah metadata — informasi tentang dokumen, bukan isi halaman.
  4. Baris 4 (<meta charset="UTF-8">): menetapkan pengodean karakter UTF-8 — dibahas pada chapter Character Encoding.
  5. Baris 5 (<title>...</title>): judul dokumen yang tampil pada tab browser — dibahas pada chapter Elemen title.
  6. Baris 6 (</head>): penutup wadah metadata.
  7. Baris 7 (<body>): pembuka wadah konten; semua yang tampil di layar ditulis di dalam bagian ini.
  8. Baris 8-9 (<h1> dan <p>): contoh konten — judul halaman dan satu paragraf pembuka.
  9. Baris 10-11 (</body> dan </html>): penutup wadah konten dan penutup elemen akar.

Peran Setiap Bagian #

Tabel berikut merangkum peran keenam bagian beserta statusnya:

BagianPeranStatus
<!DOCTYPE html>Memilih mode pemrosesan standarWajib
<html lang="id">Akar seluruh elemen; bahasa kontenWajib; lang sangat dianjurkan
<head>Wadah metadata dokumenWajib
<meta charset="UTF-8">Pengodean karakterDianjurkan kuat
<title>Judul pada tab dan hasil pencarianWajib
<body>Wadah konten yang tampil di layarWajib

Template untuk Seluruh Course #

Mulai chapter ini, setiap latihan memakai kerangka yang sama; yang berubah hanya isi <title> dan isi <body>. Kebiasaan menulis kerangka secara lengkap membuat kita jarang melupakan bagian penting pada saat halaman bertambah kompleks.

Ringkasan #

  • Kerangka minimal: doctype, html beratribut lang, head berisi meta charset dan title, lalu body.
  • Browser memproses head sebelum body; deklarasi charset menentukan cara byte dokumen dibaca.
  • Kerangka ini menjadi template dasar seluruh halaman pada Course HTML — hanya isi title dan body yang berganti.

Template dasar sudah kita pahami. Chapter berikutnya mulai dari baris pertama dokumen: deklarasi doctype.