Deklarasi Doctype

Setiap file HTML yang rapi diawali satu baris pendek: <!doctype html>. Baris ini bukan elemen dan tidak menampilkan apa pun di halaman, tetapi browser membacanya lebih dulu untuk memilih mode rendering dokumen. Tanpa deklarasi tersebut, halaman tetap tampil, namun browser menghitung tata letak dengan aturan lama yang hasilnya berbeda antarbrowser. Pada Chapter ini kita membedah fungsi doctype, perbedaan quirks mode dan standards mode, serta sejarah singkat di balik perampingan deklarasinya.

Fungsi Deklarasi Doctype #

Doctype adalah singkatan dari document type declaration, yaitu deklarasi tipe dokumen yang menjadi pembuka setiap dokumen HTML. Spesifikasi WHATWG menyebut doctype sebagai required preamble: bagian pembuka yang wajib ada. Posisinya paling depan sebelum elemen apa pun; parser menoleransi komentar dan spasi kosong di atasnya, tetapi kebiasaan terbaik adalah menuliskannya di baris pertama file.

Mekanisme di balik layar berjalan begitu dokumen dimuat. Parser membaca token pertama; bila token tersebut doctype, parser menetapkan mode standar. Bila token pertama bukan doctype, parser mencatat kesalahan dan mengaktifkan mode kompatibilitas lama. Perbedaan mode ini memengaruhi seluruh perhitungan tata letak.

Quirks Mode dan Standards Mode #

Browser memilih dari tiga mode rendering berdasarkan doctype yang ditemukan. Tabel berikut merangkum pemicu dan perilakunya:

Dalam quirks mode, browser menghitung ukuran dan jarak dengan aturan halaman lama, sehingga satu file yang sama dapat tampil berbeda bila doctype-nya hilang. Karena perilaku lama itu tidak seragam antarbrowser, halaman pada quirks mode sulit diprediksi. Inilah alasan deklarasi doctype selalu menjadi baris pertama di setiap latihan kita.

Doctype Panjang Masa Lalu #

Deklarasi doctype tidak selalu sependek sekarang. Pada era HTML 4.01, deklarasi wajib menyebut tipe definisi dokumen (DTD) resmi W3C beserta alamatnya:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Alamat di baris tersebut menunjuk file definisi aturan HTML 4.01, tetapi browser tidak pernah mengunduhnya; browser hanya membaca pola teks doctype untuk memilih mode rendering. Penulis harus menyalin deklarasi panjang dengan tepat, sebab satu kesalahan ketik saja membuat browser masuk quirks mode. Deklarasi modern memangkas seluruh kerumitan itu: seperti yang kita pelajari pada Chapter HTML Living Standard, HTML kini dikelola tanpa nomor versi, sehingga doctype tidak membawa nomor apa pun.

Aturan Penulisan Doctype #

Aturan penulisan doctype modern:

• Ditulis di baris paling pertama file, sebelum elemen apa pun.
• Tidak case-sensitive: <!doctype html>, <!DOCTYPE html>, dan <!DoCtYpE hTmL> dianggap identik oleh parser.
• Bukan elemen dan bukan tag: tidak punya tag penutup, tidak berisi konten, tidak menerima atribut, dan tidak dapat diberi style.
• Cukup satu doctype per dokumen; doctype kedua diabaikan parser sebagai kesalahan.
• Tidak membawa nomor versi; pola penulisannya sama untuk seluruh dokumen modern.

Kesalahan yang mudah muncul pada pemula adalah menulis doctype seolah-olah elemen biasa yang diberi tag penutup:

<!doctype html></doctype>
<html lang="id">
  <!-- sisa dokumen -->
</html>

Parser tidak mengenal </doctype> dan validator menandainya dengan pesan Stray end tag "doctype". Deklarasi ini memang tunggal, bukan pasangan tag pembuka dan penutup seperti elemen pada umumnya.

Contoh Dokumen dengan Doctype #

File berikut adalah kerangka minimal yang akan kita pakai berulang di sisa course ini:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Coba Deklarasi Doctype</title>
</head>
<body>
  <h1>Doctype di Baris Pertama</h1>
  <p>Dokumen ini diawali deklarasi doctype sehingga browser menerapkan standards mode.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Doctype di Baris Pertama" di bagian atas halaman
  - Satu paragraf penjelasan di bawahnya
  - Teks "Coba Deklarasi Doctype" pada tab browser

Mari kita telaah peran setiap baris penting di atas:

1. Baris 1 (<!doctype html>): deklarasi pembuka yang mengaktifkan standards mode.
2. Baris 2 (<html lang="id">): elemen akar beserta penanda bahasa; pembahasannya penuh ada di Chapter berikutnya.
3. Baris 3-6 (<head> … </head>): wadah metadata berisi pengodean karakter dan judul tab browser.
4. Baris 7-10 (<body> … </body>): wadah konten terlihat: satu heading dan satu paragraf.

Doctype hanyalah pembuka; struktur sebenarnya baru dimulai dari elemen html. Chapter Elemen html membedah elemen akar tersebut beserta atribut lang dan dir yang menempel padanya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Quirks Mode and Standards Mode
• WHATWG — HTML Living Standard: The DOCTYPE
• MDN Web Docs — Document.compatMode

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Coba Deklarasi Doctype</title>
</head>
<body>
  <h1>Doctype di Baris Pertama</h1>
  <p>Dokumen ini diawali deklarasi doctype sehingga browser menerapkan standards mode.</p>
</body>
</html>