Tag wajib agar HTML bekerja sesuai harapan

 (blog.jim-nielsen.com)
30 poin oleh GN⁺ 2025-10-28 | Belum ada komentar. | Bagikan ke WhatsApp
  • Agar halaman web ditampilkan di browser sesuai harapan, beberapa tag HTML dasar wajib disertakan
  • <!doctype html> memastikan rendering mode standar sehingga mencegah kesalahan perhitungan layout
  • <html lang="en"> meningkatkan aksesibilitas, pencarian, dan kualitas terjemahan dengan memberikan informasi bahasa
  • <meta charset="utf-8"> dan <meta name="viewport" ...> 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 
      <!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
  • 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

<!doctype html> — deklarasi mode standar

  • <!doctype html> 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
  • <!doctype html> tidak peka huruf besar-kecil, sehingga bentuk seperti <!DOCTYPE HTML> atau <!doCTypE HTml> tetap dikenali
    • Penulis bahkan bercanda, “kalau ingin menulis markup gaya 1998, silakan pakai huruf besar semua”

<html lang="en"> — menetapkan bahasa dokumen

  • <html lang="en"> 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(
    "<!doctype html><h1>Hello world</h1>",
    {
        status: 200,
        headers: { "Content-Type": "text/html; charset=utf-8" },
    }
);

<meta charset="utf-8"> — menentukan encoding karakter

  • <meta charset="utf-8"> 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 <meta charset="utf-8">: karakter khusus dan emoji rusak
    • Dengan tag tersebut: semua karakter tampil normal
  • Di blognya juga disertakan gambar screenshot yang membandingkan kedua kondisi itu

<meta name="viewport" content="width=device-width,initial-scale=1.0"> — 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 
      <div id="root"></div>
<script src="bundle.js"></script>
  • 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

Bacaan terkait

Belum ada komentar.

Belum ada komentar.