Struktur Dasar Dokumen HTML
Kerangka wajib setiap halaman HTML: doctype, html, head, body, title, dan meta charset. Plus aturan penulisan yang rapi.
Kerangka sebuah halaman
Setiap halaman HTML yang benar punya kerangka yang sama. Hafalkan bentuk ini, karena kamu akan menulisnya ribuan kali:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul Halaman</title>
</head>
<body>
<h1>Halo!</h1>
<p>Isi halaman ada di sini.</p>
</body>
</html>| Bagian | Fungsi |
|---|---|
<!DOCTYPE html> | Memberi tahu browser bahwa ini dokumen HTML5 (versi terbaru). Selalu di baris pertama. Bukan tag, jadi tidak ditutup. |
<html lang="id"> | Pembungkus seluruh halaman. Atribut lang menyebut bahasa halaman (id = Indonesia, en = Inggris), penting untuk mesin pencari dan pembaca layar. |
<head> | "Kepala" halaman: informasi tentang halaman yang tidak tampil di area isi (judul tab, pengaturan karakter, tautan CSS). |
<meta charset="UTF-8"> | Menentukan kode karakter supaya huruf seperti é, ñ, dan emoji tampil benar. |
<title> | Judul yang muncul di tab browser dan hasil pencarian Google. |
<body> | "Badan" halaman: semua yang terlihat oleh pengunjung. |
Nesting: elemen di dalam elemen
Elemen boleh berisi elemen lain. Ini disebut nesting (bersarang). Aturannya: yang dibuka paling akhir harus ditutup paling awal, seperti kotak di dalam kotak.
<!-- BENAR -->
<p>Teks <b>tebal</b> di dalam paragraf.</p>
<!-- SALAH: urutan penutupnya tertukar -->
<p>Teks <b>tebal</p></b>Hubungan antar elemen punya nama: <html> adalah parent (induk) dari <head> dan <body>; keduanya adalah sibling (saudara) dan sekaligus child (anak) dari <html>. Istilah ini akan sering muncul saat belajar CSS.
Elemen kosong (void element)
Beberapa elemen tidak punya isi sehingga tidak perlu tag penutup, contohnya <meta>, <br>, <hr>, <img>, dan <input>. Menulis <br> dan <br /> sama-sama diterima.
Kebiasaan menulis yang rapi
- Gunakan huruf kecil untuk nama tag dan atribut:
<p>, bukan<P>. - Beri indentasi (menjorok 2 spasi) untuk elemen anak agar struktur mudah dibaca.
- Selalu beri tanda kutip pada nilai atribut:
class="kotak". - Satu tag pembuka, satu tag penutup. Jangan biarkan ada yang menggantung.
Catatan: browser sangat toleran. Meskipun kamu lupa <html> atau <head>, halaman sering tetap tampil. Tapi kode yang tidak lengkap bisa berperilaku aneh di browser lain, buruk untuk SEO, dan sulit dirawat. Biasakan menulis kerangka lengkap.