Doctype HTML

Setiap dokumen HTML yang kita tulis dibuka oleh satu baris yang tampak seperti tag, tetapi bukan tag: <!DOCTYPE html>. Baris pendek tersebut menentukan mode pemrosesan seluruh dokumen. Chapter ini menjelaskan apa yang dideklarasikan baris tersebut, mengapa letaknya harus di awal dokumen, dan apa yang terjadi bila baris tersebut hilang.

Deklarasi, Bukan Elemen #

<!DOCTYPE html> adalah deklarasi, bukan elemen HTML. Tiga ciri membedakannya dari elemen:

• Deklarasi tidak memiliki tag penutup.
• Deklarasi tidak dapat memiliki atribut.
• Deklarasi tidak menjadi simpul pada pohon DOM — browser membacanya sebagai instruksi sekali baca, lalu langsung memilih mode pemrosesan.

Letaknya juga khusus: deklarasi ditulis sebelum elemen html, dan praktik terbaik menempatkannya pada baris pertama dokumen tanpa apa pun di atasnya. Dengan begitu, browser mengetahui mode pemrosesan sebelum membaca satu elemen pun.

Mode Standar dan Quirks Mode #

Alasan keberadaan doctype berakar pada sejarah. Pada era 1990-an, sebelum CSS matang, tiap browser memiliki aturan tata letak sendiri. Ketika standar modern datang, browser memerlukan cara membedakan dokumen baru dari halaman lama — dan halaman lama tidak memuat doctype modern.

Mekanisme pembedaannya sederhana:

• Dokumen memuat <!DOCTYPE html> → browser memproses dalam mode standar: perilaku mengikuti spesifikasi HTML modern.
• Dokumen tanpa doctype → browser beralih ke quirks mode: browser meniru kebiasaan browser lama agar halaman era 1990-an tetap tampil serupa dengan semula. Pada quirks mode, sejumlah perhitungan tata letak — misalnya cara lebar elemen dihitung terhadap padding — mengikuti aturan lama, sehingga hasil CSS bergeser dari yang kita rancang.

Perbandingan kedua bentuk dokumen:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Dokumen Modern</title>
</head>
<body>
  <p>Dokumen ini diproses dalam mode standar.</p>
</body>
</html>

<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Dokumen Tanpa Doctype</title>
</head>
<body>
  <p>Dokumen ini berpotensi diproses dalam quirks mode.</p>
</body>
</html>

Perbedaan kedua dokumen dirangkum pada tabel berikut:

Kedua dokumen di atas sama-sama tampil di browser tanpa pesan galat. Perbedaan baru terasa ketika CSS mulai mengatur tata letak — dan itulah yang menjadikan doctype yang hilang sulit dilacak.

Mode pemrosesan diputuskan sebelum satu pun elemen dirender, dan seluruh demo pada Course ini berjalan di dalam dokumen yang selalu memuat doctype — sehingga perbandingan mode standar versus quirks mode tidak mungkin ditunjukkan sebagai demo render di sini. Simpan kedua dokumen di atas sebagai dua berkas terpisah, tambahkan aturan CSS yang sama pada keduanya, lalu bandingkan hasil tata letaknya di browser.

Huruf Besar sebagai Konvensi #

Penulisan doctype tidak membedakan huruf besar dan huruf kecil (case-insensitive): <!doctype html>, <!Doctype HTML>, dan <!DOCTYPE html> sama sahnya. Konvensi komunitas menuliskan huruf besar penuh karena bentuk tersebut mudah dikenali pada baris pertama dokumen. Pilih satu bentuk, lalu gunakan bentuk itu secara konsisten di seluruh proyek.

Ringkasan #

• <!DOCTYPE html> adalah deklarasi, bukan elemen: tanpa tag penutup, tanpa atribut, dan tidak menjadi simpul pohon DOM.
• Dengan doctype, browser memakai mode standar; tanpa doctype, browser memakai quirks mode yang meniru kebiasaan browser lama.
• Penulisan doctype case-insensitive, tetapi konvensi memakai huruf besar penuh dan menempatkannya pada baris pertama.

Deklarasi doctype selesai kita bahas. Elemen pertama yang dibungkus deklarasi tersebut — akar html — menjadi fokus chapter berikutnya.