Anatomi Dokumen

Setiap halaman web yang valid dibangun dari kerangka yang sama, yaitu deklarasi doctype, elemen html, bagian head, dan bagian body. Topik ini membahas peran setiap bagian tersebut beserta aturan penataannya, lalu menutupnya dengan satu berkas utuh yang memuat halaman valid minimal. Halaman yang dihasilkan cukup dibuka langsung di browser tanpa alat tambahan apa pun.

Peta anatomi dokumen#

Dokumen HTML tersusun sebagai pohon, yaitu struktur bersarang yang terbentuk ketika satu elemen membungkus elemen lain di dalamnya. Elemen yang membungkus disebut induk (parent), sedangkan elemen yang dibungkus disebut anak (child). Deklarasi doctype berdiri paling awal, diikuti elemen html yang menjadi akar pohon, kemudian head dan body sebagai dua cabang utamanya.

Hubungan sarang tersebut diperlihatkan pada diagram berikut. Diagram dibaca dari atas ke bawah sebagaimana browser membaca urutan baris dokumen.

Peran keempat bagian itu dirangkum pada tabel berikut.

Deklarasi doctype#

Baris pertama setiap dokumen HTML modern adalah deklarasi doctype, yaitu pernyataan singkat yang memberi tahu browser bahwa dokumen mengikuti aturan HTML Living Standard. Deklarasi ini ditulis persis seperti <!DOCTYPE html>, tidak memerlukan tag penutup, dan tidak peka huruf besar-kecil sehingga <!doctype html> sama sahnya. Meskipun bentuknya menyerupai tag, doctype bukan elemen dan tidak boleh diberi isi apa pun.

Keberadaan doctype menentukan mode perenderan halaman. Dengan doctype, browser merender halaman dalam mode standar (standards mode), dan CSS dihitung menurut aturan terkini. Tanpa doctype, browser masuk ke mode usang (quirks mode) yang meniru perilaku versi lama.

Elemen html dan atribut lang#

Elemen html adalah elemen akar (root element) yang membungkus seluruh isi dokumen. Hanya ada satu elemen html per dokumen, dan seluruh elemen lain berada di dalamnya. Elemen head dan body menjadi dua anak langsungnya, dengan urutan penulisan yang selalu sama.

Atribut lang dipasang pada tag pembuka untuk menyatakan bahasa isi dokumen. Nilai lang="id" menandai bahasa Indonesia, sedangkan lang="en" menandai bahasa Inggris. Pembaca layar (screen reader) memakai nilai ini untuk memilih cara pelafalan, mesin pencari memakainya untuk memilah hasil, dan penerjemah otomatis membacanya sebagai petunjuk bahasa. Karena itu, lang diisi sesuai bahasa yang benar-benar dipakai halaman.

Bagian head dan meta charset#

Elemen head menyimpan metadata, yaitu data mengenai halaman dan bukan isinya. Dua anggota head yang wajib dipahami pada tahap ini adalah title dan meta charset. Elemen title menetapkan judul dokumen yang tampil pada tab browser, daftar bookmark, dan hasil pencarian, sedangkan elemen meta dengan atribut charset="utf-8" menyatakan pengodean karakter (character encoding) dokumen.

Pengodean UTF-8 mencakup karakter pada hampir semua aksara yang digunakan saat ini. Apabila deklarasi charset ditiadakan, browser harus menebak pengodeannya, dan tebakan yang keliru membuat karakter di luar ASCII dasar tampil sebagai karakter rusak (mojibake). Karena itu, meta charset diletakkan sebagai baris pertama di dalam head.

Bagian body dan halaman valid minimal#

Elemen body menyimpan seluruh konten yang dirender browser, misalnya judul, paragraf, tautan, dan gambar. Pada halaman valid minimal, body cukup memuat satu judul dan satu paragraf. Kerangka lengkapnya dikumpulkan dalam berkas utuh berikut.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="utf-8">
    <title>Catatan Harian</title>
  </head>
  <body>
    <h1>Catatan Harian</h1>
    <p>Dokumen ini memuat kerangka minimal sebuah halaman HTML yang valid.</p>
  </body>
</html>

Fungsi setiap baris diuraikan berikut ini.

1. Baris 1 mendeklarasikan doctype agar halaman dirender dalam mode standar.
2. Baris 2 membuka elemen html dan menyatakan bahasa Indonesia melalui lang="id".
3. Baris 3 membuka head, yaitu wadah metadata dokumen.
4. Baris 4 menyatakan pengodean UTF-8 melalui meta charset.
5. Baris 5 menetapkan judul Catatan Harian yang tampil pada tab browser.
6. Baris 6 menutup head karena metadata sudah lengkap.
7. Baris 7 membuka body, yaitu wadah konten yang dirender.
8. Baris 8 dan 9 menuliskan satu judul h1 dan satu paragraf p sebagai isi minimal.
9. Baris 10 dan 11 menutup body, lalu html, sesuai urutan kebalikan dari pembukaannya.

Berkas tersebut dibuat dari terminal dengan langkah berikut.

# membuat folder proyek
mkdir -p halaman-kerja
# masuk ke folder proyek
cd halaman-kerja
# membuat berkas kosong index.html
touch index.html
# menampilkan isi folder
ls

index.html

Perintah touch membuat berkas kosong bernama index.html, dan ls menunjukkan bahwa berkasnya sudah ada. Isi berkas kemudian disalin dari blok kode di atas, lalu berkas dibuka dengan browser melalui menu buka berkas atau dengan menyeretnya ke jendela browser. Halaman yang tampil memuat judul tab Catatan Harian beserta satu judul dan satu paragraf di dalam halaman.

Kesalahan umum#

Konten ditulis di dalam head. Browser yang memaklumi markup tetap merender teks tersebut, tetapi struktur dokumen menjadi tidak valid. Pindahkan seluruh konten tampil ke dalam body, dan simpan head untuk metadata.

Atribut charset ditiadakan. Karakter di luar ASCII dasar, misalnya tanda kutip khusus atau huruf beraksen, dapat tampil sebagai karakter rusak. Tambahkan meta charset="utf-8" sebagai baris pertama di dalam head.

Doctype diperlakukan sebagai tag biasa. Deklarasi doctype kadang diberi tag penutup atau diberi isi, padahal bentuknya adalah pernyataan tunggal. Tulis <!DOCTYPE html> apa adanya pada baris pertama, tanpa pasangan penutup.

Ringkasan#

• Deklarasi <!DOCTYPE html> mengaktifkan mode standar, sedangkan ketiadaannya memicu quirks mode.
• Elemen html menjadi akar dokumen, dan atribut lang menyatakan bahasa isinya.
• head menyimpan metadata seperti title dan meta charset, sedangkan body menyimpan konten yang dirender.

Referensi#

• Elemen html — MDN Web Docs — Kaidah elemen html sebagai akar dokumen beserta atribut yang diperbolehkan.
• Quirks Mode and Standards Mode — MDN Web Docs — Penjelasan mode perenderan yang ditentukan oleh keberadaan doctype.
• Elemen head — MDN Web Docs — Peran head sebagai wadah metadata dokumen.
• Sintaks HTML — WHATWG — Definisi resmi deklarasi doctype pada HTML Living Standard.