Apa Itu Quirks Mode dalam HTML ?

Heru Iryanto
Heru Iryanto
Teacher, Content Creator and Full-Stack Developer
Web Programming HTML
2 March 2026
Apa Itu Quirks Mode dalam HTML ?

Saat belajar HTML dasar, Anda mungkin pernah mendengar istilah Quirks Mode. Tapi sebenarnya, apa itu Quirks Mode dalam HTML? Apakah berbahaya? Dan bagaimana cara menghindarinya?

🔥 Daftar Isi :

Apa Itu Quirks Mode?

Quirks Mode adalah mode “kompatibilitas lama” pada browser yang membuat halaman website dirender (ditampilkan) seperti standar HTML versi lama (sekitar era 1990–2000an).

Mode ini aktif ketika browser menganggap dokumen HTML Anda tidak mengikuti standar modern.

Biasanya terjadi karena:

  • Tidak ada <!DOCTYPE html>
  • DOCTYPE salah
  • Struktur HTML tidak valid

Singkatnya:
✅ Standards Mode → Mengikuti standar HTML5 modern
❌ Quirks Mode → Mengikuti perilaku browser lama

Kenapa Quirks Mode Bisa Terjadi?

Dulu (sebelum HTML5), banyak website dibuat dengan cara yang tidak standar.

Ketika browser modern dibuat, muncul masalah:

  • Kalau langsung pakai standar baru, website lama bisa rusak tampilannya.

Solusinya:

Browser dibuat punya 2 mode:

  • Standards Mode → Mengikuti standar HTML & CSS modern
  • Quirks Mode → Meniru perilaku browser lama

Contoh Penyebab Quirks Mode

❌ Tanpa DOCTYPE

<html>
<head>
    <title>Website Saya</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

Browser bisa masuk ke Quirks Mode.

✅ Dengan DOCTYPE (Benar)

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Website Saya</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

Ini akan menggunakan Standards Mode.

Apa Dampak Quirks Mode?

Kalau website masuk Quirks Mode, bisa terjadi:

  • Perhitungan width & height berbeda
  • Margin dan padding berantakan
  • Layout CSS tidak konsisten
  • Tampilan berbeda antar browser
  • Flexbox atau Grid bisa bermasalah
  • Debugging jadi sulit

Bagaimana Cara Cek Apakah Website Masuk Quirks Mode?

Di Google Chrome:

  • Klik kanan → Inspect
  • Buka tab Console
  • Biasanya akan muncul info apakah halaman dalam Quirks Mode

Atau lihat di tab Rendering DevTools.

Quirks Mode

Hubungannya dengan SEO?

Secara langsung, Quirks Mode bukan faktor ranking Google.

Tapi secara tidak langsung bisa berdampak:

  • Layout rusak → UX buruk
  • Mobile tidak responsif
  • Bounce rate naik
  • Core Web Vitals turun

Dan itu bisa memengaruhi SEO.

Kesimpulan

Quirks Mode adalah mode kompatibilitas lama pada browser yang aktif jika struktur HTML tidak standar.

Cara menghindarinya sangat mudah:

👉 Selalu tulis <!DOCTYPE html> di baris paling atas file HTML.

Itu saja.

🔥 Artikel