HTML40 / 46

Dua meta tag yang tidak boleh lupa

<meta charset="UTF-8"> mencegah teks berubah jadi karakter aneh (é, �) — wajib, dan harus berada di awal <head>. <meta name="viewport" content="width=device-width, initial-scale=1"> membuat halaman menyesuaikan lebar layar HP; tanpa ini, semua CSS responsive-mu tidak berpengaruh di mobile dan halaman tampil mengecil seperti versi desktop.

👀 Contoh dulu

<!-- head yang MASIH KURANG: viewport belum ada -->
<head>
  <meta charset="UTF-8">
  <title>Toko Kopi</title>
</head>

Hasilnya: Huruf beraksen tampil benar, tapi di HP halaman mengecil seperti versi desktop karena viewport belum dideklarasikan.

💡 Keduanya wajib ada di setiap halaman. Tanpa viewport, media query CSS-mu tidak akan terasa di HP.

📝 Sekarang giliranmu

Lengkapi <head> dengan meta charset UTF-8 dan meta viewport width=device-width, initial-scale=1.

Preview