Halaman lengkap: menyatukan semuanya
Sekarang satukan semuanya menjadi satu dokumen utuh: <!DOCTYPE html>, atribut lang, meta wajib di <head>, dan struktur semantik di <body>. Deklarasi doctype memberi tahu browser agar memakai mode standar; tanpa itu browser masuk ke mode kompatibilitas lama dan tata letakmu bisa bergeser. <html lang="id"> membuat screen reader memakai pelafalan bahasa Indonesia — tanpa itu teksmu bisa dibacakan dengan pelafalan Inggris dan nyaris tidak dimengerti. Kerangka ini akan kamu tulis ulang di hampir setiap proyek, jadi hafalkan urutannya sampai otomatis.
👀 Contoh dulu
<!-- kerangka lama: doctype, lang, dan viewport belum ada --> <html> <head> <title>Toko Kopi</title> </head> <body> <div class="atas">Menu</div> <div class="isi">Selamat datang</div> </body> </html>
Hasilnya: Halaman tetap tampil, tapi browser masuk mode kompatibilitas lama, screen reader tidak tahu bahasa halamannya, dan strukturnya hanya div tanpa makna.
💡 Ini kerangka yang akan kamu tulis ulang di hampir setiap proyek — hafalkan urutannya sampai otomatis.
📝 Sekarang giliranmu
Buat dokumen lengkap: <!DOCTYPE html>, <html lang="id">, <head> (charset + viewport + title), dan <body> berisi <header>, <main>, dan <footer>.