Doctype HTML: Fungsi <!DOCTYPE html> dan Letaknya

Apa itu <!DOCTYPE html>

<!DOCTYPE html> adalah deklarasi doctype: baris pertama sebuah file HTML, sebelum tag <html>. Baris ini memberi tahu browser "ini dokumen HTML modern", dan browser menanggapinya dengan menampilkan halaman dalam standards mode, mengikuti spesifikasi HTML dan CSS saat ini.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>The doctype is the very first line of this file.</p>
</body>
</html>

Satu baris itu adalah seluruh doctype HTML5. Doctype tidak punya tag penutup dan tidak ada apa pun lagi di dalamnya.

Aturan sintaks

• Doctype ditulis paling awal. Hanya spasi kosong dan komentar yang boleh muncul sebelumnya. Teks atau tag apa pun sebelum doctype membuat browser mengabaikannya.
• Tidak peka huruf besar kecil. <!DOCTYPE html> dan <!doctype html> identik. Pilih satu gaya dan pertahankan.
• Doctype bukan elemen. Tidak ada </!DOCTYPE>, dan kamu tidak bisa menambahkan class atau atribut lain padanya.
• Kata setelah DOCTYPE harus html. <!DOCTYPE html5> bukan versi yang lebih baru; browser memperlakukan halaman itu seolah tidak punya doctype yang valid.
• Satu per dokumen. Halaman yang dibangun dari beberapa file (template, include) tetap hanya menghasilkan satu doctype di bagian atas HTML akhirnya.

Standards mode dan quirks mode

Browser punya tiga mode tampilan, dan doctype memilih salah satunya:

Quirks mode ada supaya halaman yang ditulis sebelum adanya standar web tetap terlihat seperti yang dilihat pembuatnya. Untuk halaman baru, mode ini hanya menimbulkan masalah: height: 100% yang berhasil di satu halaman tapi tidak di halaman lain, atau tabel yang mengabaikan ukuran font-mu, adalah gejala klasik doctype yang hilang.

Pratinjau editor di halaman ini selalu tampil dalam standards mode, jadi menghapus doctype di sana tidak akan menunjukkan quirks mode. Pemeriksa di bawah ini memakai DOMParser, yang menerapkan aturan yang sama dengan yang dipakai browser saat memuat file. Edit doctype di kotak teks dan mode-nya ikut berubah:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Doctype checker</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    textarea { width: 100%; height: 70px; font: 14px monospace; }
    #mode { font-weight: bold; padding: 8px 12px; border-radius: 6px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label for="src">First line of a document:</label>
  <textarea id="src"><!DOCTYPE html></textarea>
  <p>Rendering mode: <span id="mode"></span></p>
  <script>
    const src = document.getElementById('src');
    const mode = document.getElementById('mode');
    function check() {
      const doc = new DOMParser().parseFromString(src.value + '<p>x</p>', 'text/html');
      const standards = doc.compatMode === 'CSS1Compat';
      mode.textContent = standards ? 'standards (CSS1Compat)' : 'quirks (BackCompat)';
      mode.style.background = standards ? '#dcfce7' : '#fef3c7';
    }
    src.addEventListener('input', check);
    check();
  </script>
</body>
</html>

Coba hapus barisnya, ketik <!DOCTYPE html5>, atau taruh sebuah kata sebelum doctype: masing-masing mengubah hasilnya menjadi quirks.

Doctype lama: HTML 4.01 dan XHTML

Sebelum HTML5, doctype menyebut file DTD dengan identifier publik yang panjang. Kamu masih akan menemukannya di bagian atas situs-situs lama:

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Browser tidak pernah mengunduh file DTD itu. Browser hanya membaca identifier-nya untuk memilih mode: HTML 4.01 Strict dan XHTML 1.0 Strict menghasilkan standards mode, versi Transitional menghasilkan limited quirks mode, dan HTML 4.01 Transitional tanpa URL menghasilkan quirks mode penuh. Tempel salah satunya ke pemeriksa di atas untuk mengujinya; perhatikan bahwa compatMode melaporkan limited quirks mode sebagai CSS1Compat, nilai yang sama dengan standards mode, jadi hanya quirks mode penuh yang muncul sebagai BackCompat.

Mengganti doctype lama dengan <!DOCTYPE html> aman untuk halaman yang sudah dalam standards mode. Halaman yang tadinya dalam quirks mode bisa sedikit bergeser (biasanya tinggi elemen dan celah di bawah gambar), jadi periksa tampilannya setelah perubahan.

Doctype di DOM

Doctype menjadi node DocumentType, terpisah dari elemen <html>. Script membacanya lewat document.doctype, dan document.compatMode melaporkan mode yang akhirnya dipakai halaman:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document.doctype</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    code { background: #e5e7eb; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>doctype name: <code id="name"></code></p>
  <p>compatMode: <code id="compat"></code></p>
  <p>first child of document: <code id="first"></code></p>
  <script>
    const dt = document.doctype;
    document.getElementById('name').textContent = dt ? dt.name : 'none';
    document.getElementById('compat').textContent = document.compatMode;
    document.getElementById('first').textContent = document.firstChild.constructor.name;
  </script>
</body>
</html>

document.compatMode adalah cara tercepat untuk memeriksa situs mana pun yang sedang aktif: buka console browser lalu ketikkan. "CSS1Compat" berarti standards mode (atau limited quirks mode), "BackCompat" berarti quirks mode.

Kerangka HTML5 lengkap

Doctype adalah satu bagian dari dokumen minimal yang seharusnya menjadi awal setiap halaman. Setiap baris di bawah ini punya tugasnya masing-masing:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Starter page</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
    li code { background: #e5e7eb; padding: 1px 5px; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>Starter page</h1>
  <ul>
    <li><code>&lt;!DOCTYPE html&gt;</code> turns on standards mode</li>
    <li><code>lang="en"</code> names the page language</li>
    <li><code>charset="utf-8"</code> makes accented letters and emoji display correctly</li>
    <li><code>viewport</code> makes the page fit phone screens</li>
    <li><code>&lt;title&gt;</code> is the text on the browser tab</li>
  </ul>
</body>
</html>

Atribut lang dan tag meta viewport masing-masing punya halamannya sendiri.

Kesalahan umum

• Ada sesuatu sebelum doctype. Karakter nyasar, echo untuk debug dari script server, atau tag HTML di atas <!DOCTYPE html> membuat seluruh halaman masuk ke quirks mode. Komentar dan baris kosong tidak masalah.
• Mengarang versi. <!DOCTYPE html5> atau <!DOCTYPE HTML 5> tidak valid dan memicu quirks mode. Doctype HTML5 cukup <!DOCTYPE html>.
• Menutupnya. <!DOCTYPE html></!DOCTYPE> bukan HTML yang valid. Deklarasi ini tidak punya tag penutup.
• Tidak menulisnya di file uji kecil. Bug layout yang kamu kejar di file coba-coba tanpa doctype mungkin tidak ada di halaman sebenarnya, dan sebaliknya.
• Mempertahankan doctype Transitional lama. Doctype itu membuat halaman masuk ke limited quirks mode tanpa manfaat apa pun. Ganti dengan <!DOCTYPE html>.