Di artikel sebelumnya, kamu sudah berhasil membuat halaman "Halo Dunia" pertamamu. Sekarang saatnya kita pahami struktur dasar HTML seperti mengenal kerangka rumah sebelum kamu membangun rumah impianmu.
Anatomi Dokumen HTML
Setiap dokumen HTML memiliki struktur yang wajib dan sudah baku. Mirip seperti surat yang punya kop surat, isi surat, dan tanda tangan. Berikut kerangka dasarnya:
<!DOCTYPE html>
<html>
<head>
<!-- Info tentang halaman (tidak terlihat) -->
</head>
<body>
<!-- Isi halaman (yang terlihat di browser) -->
</body>
</html>
Ada 4 komponen utama yang harus kamu pahami:
| Komponen | Fungsi | Terlihat di Browser? |
|---|---|---|
<!DOCTYPE html> |
Memberi tahu browser bahwa ini dokumen HTML versi terbaru (HTML5) | ❌ Tidak |
<html> |
Kontainer atau pembungkus seluruh kode HTML | ❌ Tidak |
<head> |
Menyimpan info meta, judul tab, link CSS, dll | ❌ Tidak (kecuali <title> di tab) |
<body> |
Tempat semua konten yang ingin ditampilkan | ✅ Ya (semua isinya) |
Mari Bedah Satu Per Satu
<!DOCTYPE html> - Perkenalan ke Browser
Baris pertama dan wajib. DOCTYPE bukan tag HTML, tapi instruksi untuk browser agar menjalankan halaman dalam mode standar (bukan mode "aneh" kompatibilitas lama).
<!DOCTYPE html>, browser bisa menampilkan halaman secara tidak konsisten (mode quirks). Jadi jangan dilewatkan ya!
<html> ... </html> - Akar dari Segalanya
Tag <html> adalah induk dari semua tag lainnya. Semua kode HTML harus berada di antara tag pembuka <html> dan penutup </html>.
Kadang kamu lihat atribut lang="id" di dalamnya:
<html lang="id">
Ini memberi tahu browser bahwa konten halaman berbahasa Indonesia (berguna untuk mesin pencari dan pembaca layar).
<head> ... </head> - Area Rahasia
Apa pun yang ada di dalam <head> tidak akan terlihat di halaman utama. Fungsinya untuk:
- Menentukan judul tab browser (pakai
<title>) - Menghubungkan file CSS dan JavaScript
- Menambahkan meta tag (deskripsi, kata kunci, viewport)
- Menyematkan favicon (icon kecil di tab)
Contoh head yang lengkap:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Kerenku</title>
<meta name="description" content="Belajar HTML dari nol">
</head>
<body> ... </body> - Panggung Utama
Inilah area yang paling seru. Semua yang kamu tulis di dalam <body> akan terlihat oleh pengunjung: teks, gambar, tombol, tabel, form, video, dll.
Buat file coba-struktur.html dengan kode berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Judul ini muncul di TAB browser</title>
<style>
/* CSS ini tidak terlihat, tapi mempengaruhi tampilan */
body { font-family: Arial; background: #f0f0f0; }
</style>
</head>
<body>
<h1>Halo! Ini yang TERLIHAT di halaman</h1>
<p>Paragraf ini juga terlihat oleh pengunjung.</p>
<!-- Coba tambahkan teks rahasia di bawah ini -->
<!-- <p>Ini teks rahasia yang tidak tampak karena dikomentari</p> -->
</body>
</html>
Praktikkan:
- Copy kode di atas ke Notepad.
- Simpan sebagai
coba-struktur.html. - Buka dengan browser.
- Perhatikan: Judul tab browser adalah "Judul ini muncul di TAB browser".
- Perhatikan: Teks di dalam body muncul, teks di dalam head tidak muncul (kecuali title di tab).
Perbandingan Sederhana: Rumah vs HTML
| Komponen Rumah | Komponen HTML |
|---|---|
| Tanah & IMB (tidak terlihat) | <!DOCTYPE html> |
| Pondasi & Kerangka Rumah | <html> |
| Arsip / Data Bangunan (gambar teknis, izin) | <head> |
| Ruangan, Perabot, Dekorasi (yang terlihat) | <body> |
Kesalahan Umum Pemula
- Lupa menutup tag:
<body> ...(harusnya</body>) - Menulis konten di dalam head: Isi head tidak akan muncul, jangan heran kalau teksmu "hilang"
- Lupa menulis
<!DOCTYPE html>: Browser bisa kacau tampilannya - Dobel
<html>atau<body>: Cukup satu kali saja
Intisari Hari Ini
- Setiap HTML wajib punya
<!DOCTYPE html>di baris pertama - Tag
<html>membungkus seluruh kode <head>untuk data tersembunyi (judul tab, CSS, meta)<body>untuk semua konten yang ingin ditampilkan ke pengunjung- Selalu tutup tag dengan
</...>
<head>, ubah judul tab menjadi "Belajar HTML Itu Seru!". Di dalam <body>, buat 3 paragraf tentang kesan pertamamu belajar HTML. Simpan dan buka di browser. Berhasil? Luar biasa!
Artikel Sebelumnya: HTML Dasar #1 - Apa Itu HTML? Cara Kerja dan Tools yang Dibutuhkan
Artikel Selanjutnya: HTML Dasar #3 - Tag Heading (h1-h6) dan Paragraf (p)