Tag wajib agar HTML bekerja sesuai harapan

• Agar halaman web ditampilkan di browser sesuai harapan, beberapa tag HTML dasar wajib disertakan
• `` memastikan rendering mode standar sehingga mencegah kesalahan perhitungan layout
• `` meningkatkan aksesibilitas, pencarian, dan kualitas terjemahan dengan memberikan informasi bahasa
• dan masing-masing mengatur encoding karakter dan skala tampilan di perangkat mobile
• Tag-tag ini bukan sekadar elemen formalitas, melainkan komponen inti untuk menjaga konsistensi standar web dan pengalaman pengguna

---

Gambaran struktur dasar HTML dan tag wajib

• Tulisan ini dibuat dengan terinspirasi dari presentasi Alex Petros, “Incantations that make HTML work correctly”
  • Penulis merangkum snippet dasar yang sebaiknya selalu disertakan saat membuka file HTML langsung di browser
  • Contoh struktur dasarnya adalah sebagai berikut

• Masing-masing tag membantu browser menafsirkan dan menampilkan HTML secara standar
  • Jika ada yang terlewat, browser bisa beralih ke mode non-standar (quirks mode), atau muncul masalah seperti karakter rusak dan tampilan mobile yang mengecil

`` — deklarasi mode standar

• `` adalah deklarasi yang memberi tahu browser agar merender dalam mode standar (standards mode)
  • Tanpa deklarasi ini, browser akan beralih ke quirks mode dan meniru perilaku HTML lama yang non-standar
  • Akibatnya, perhitungan layout, ukuran, dan perataan bisa berubah sehingga menimbulkan kesalahan tampilan yang tidak terduga
• tidak peka huruf besar-kecil, sehingga bentuk seperti atau `` tetap dikenali
  • Penulis bahkan bercanda, “kalau ingin menulis markup gaya 1998, silakan pakai huruf besar semua”

`` — menetapkan bahasa dokumen

• `` adalah tag untuk menentukan bahasa utama dokumen
  • Informasi ini dipakai oleh browser, mesin pencari, screen reader, dan berbagai alat lainnya
• Contoh penggunaan utamanya
  • Screen reader memilih pelafalan dan intonasi suara yang tepat
  • Mesin pencari meningkatkan akurasi pengindeksan dan terjemahan
  • Fitur berbasis locale seperti pemeriksa ejaan dapat diterapkan
• Jika atribut bahasa dihilangkan, tampilannya mungkin tampak baik-baik saja, tetapi alat-alat di sekitarnya bisa memproses dokumen secara keliru
  • Karena itu, sebaiknya dicantumkan secara eksplisit di dalam HTML
• Informasi bahasa juga bisa dikirim lewat header respons server, tetapi saat membuka file lokal secara langsung, menentukannya di dalam HTML lebih aman
  • Contoh kode

    return new Response(
        "Hello world
    
    

", { status: 200, headers: { "Content-Type": "text/html; charset=utf-8" }, } ); ```

`` — menentukan encoding karakter

• `` membuat browser mengenali encoding karakter dokumen
  • Dengan begitu, karakter non-ASCII seperti é, ü, ñ, ©, ™, ®, …, 👍 dapat ditampilkan dengan benar
• Tanpa tag ini, karakter khusus atau tanda kutip cerdas di dokumen bisa tampil rusak
  • Penulis memberi contoh kasus “smart quotes” yang rusak di blog miliknya
• Perbandingan contoh
  • Tanpa ``: karakter khusus dan emoji rusak
  • Dengan tag tersebut: semua karakter tampil normal
• Di blognya juga disertakan gambar screenshot yang membandingkan kedua kondisi itu

`` — pengaturan viewport mobile

• Tag ini mengatur rasio layar dan tingkat pembesaran di browser mobile
  • Jika dihilangkan, halaman di perangkat mobile akan diperkecil sehingga tampil kecil
• Penulis menceritakan kasus saat “di desktop terlihat baik, tetapi ketika dibuka di mobile semuanya tampak kecil”, sebagai contoh lupa menambahkan tag meta viewport
  • Perbedaan tersebut dijelaskan secara visual lewat screenshot perbandingan kiri (tanpa tag) dan kanan (dengan tag)
• Karena itu, bahkan untuk prototipe sederhana sekali pun, tag ini perlu disertakan agar proporsi layout tetap sesuai harapan

Penutup — dasar HTML yang sesungguhnya

• Di bagian akhir, penulis bercanda dengan mengatakan, “saya lupa snippet yang paling penting”
  • Lalu ia menampilkan contoh kode berikut

• Ini adalah sindiran ringan terhadap struktur aplikasi berbasis JavaScript yang sering dipakai dalam pengembangan web modern
• Secara keseluruhan, tulisan ini menekankan bahwa tag-tag dasar HTML adalah elemen inti yang menjamin perilaku sesuai standar web

[GN⁺]

Pendapat Hacker News

• Fakta menarik: HN dan paulgraham.com sama-sama dirender dalam Quirks Mode karena tidak memiliki deklarasi DOCTYPE Ini bisa dicek di developer tools dengan document.compatMode Saya memakai userscript untuk menyalin teks dari elemen yang sedang di-hover dengan mudah, tetapi di Quirks Mode perilakunya tidak stabil Memang bisa dipaksa dengan document.write("" + document.documentElement.innerHTML), tetapi ini menginisialisasi ulang seluruh dokumen dan menimbulkan masalah Saya penasaran apakah dari sisi pengguna ada cara yang lebih bersih untuk memaksa Standards Mode
  • Saya berharap dang mau melakukan sedikit peningkatan kegunaan untuk HN Ukuran font default-nya sekitar 12px, jadi terlihat terlalu kecil di kebanyakan perangkat modern CSS-nya juga tampaknya masih memakai kode lama yang dipublikasikan sekitar 13 tahun lalu
  • Bisa diatasi dengan filter uBlock Contoh: `||news.ycombinator.com/*$replace=/

[ahwjdekf]

Kalau memang esensial, kenapa tidak dijadikan perilaku bawaan? Bagaimanapun, web memang aneh sekali. Cara berpikirnya benar-benar berbeda.

[dongho42]

Mungkin karena kompatibilitas mundur? Kalau cara kerja dasarnya langsung diubah begitu saja, hal-hal yang sebelumnya berjalan dengan baik bisa rusak.