Struktur Dasar Dokumen HTML
Setiap halaman web memiliki struktur dasar yang sama — seperti setiap surat memiliki format (tanggal, penerima, isi, penutup). Memahami struktur ini adalah langkah penting sebelum kamu mulai membangun website. Mari kita pelajari bagian-bagian utama dari sebuah dokumen HTML.
📐 Struktur Minimal HTML
Berikut adalah kerangka minimal yang harus ada di setiap halaman HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>
<body>
<!-- Konten halaman kamu di sini -->
<h1>Halo Dunia!</h1>
</body>
</html>
💡 Tips: Di VS Code, kamu bisa mengetik !
lalu tekan Tab untuk auto-generate struktur HTML ini secara otomatis!
🔍 Penjelasan Setiap Bagian
<!DOCTYPE html>
Deklarasi yang memberitahu browser bahwa dokumen ini menggunakan HTML5 (versi terbaru HTML). Ini bukan tag HTML — ini adalah instruksi untuk browser.
Harus ada di baris pertama! Tanpa DOCTYPE, browser akan masuk ke "quirks mode" dan halaman mungkin ditampilkan dengan tidak benar.
<html lang="id">
Element root (akar) — semua element HTML lainnya berada di dalamnya.
Atribut lang="id" menentukan bahasa
halaman (penting untuk SEO dan aksesibilitas).
lang="id"
Bahasa Indonesia
lang="en"
Bahasa Inggris
<head>
Berisi metadata — informasi tentang halaman yang tidak ditampilkan langsung di browser. Ibarat "behind the scenes" dari halaman web.
Isi umum di dalam <head>:
<meta charset>
Encoding karakter — UTF-8 mendukung semua emoji 😊 dan huruf internasional
<meta viewport>
Membuat halaman responsive di mobile — wajib ada!
<title>
Judul yang muncul di tab browser dan hasil pencarian Google
<link>
Menghubungkan file CSS untuk styling
<meta description>
Deskripsi halaman untuk SEO — muncul di Google search results
<body>
Berisi semua konten yang ditampilkan kepada pengguna — teks, gambar, tombol, video, form, dan lainnya. Ini adalah bagian yang "terlihat" di browser.
✅ Semua yang kamu lihat di halaman web — heading, paragraf, gambar, button — semuanya ada di dalam
<body>
🗂️ Visualisasi Struktur HTML
Pikirkan struktur HTML seperti kotak-kotak bersarang (nested boxes):
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" ...>
<title>Judul</title>
</head>
<body>
<h1>Judul Halaman</h1>
<p>Paragraf teks.</p>
<img src="foto.jpg">
</body>
</html>
🆚 Head vs Body — Apa Bedanya?
<head> — Otak
- • Tidak terlihat oleh pengguna
- • Berisi informasi untuk browser & Google
- • Metadata, title, link CSS, favicon
- • SEO tags (description, keywords)
<body> — Mata
- • Terlihat oleh pengguna
- • Berisi semua konten visual
- • Teks, gambar, video, form
- • Navigasi, footer, tombol
💻 Contoh Lengkap: Profil Sederhana
Mari buat halaman profil sederhana menggunakan struktur HTML yang benar:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Profil Saya</title>
<meta name="description"
content="Halaman profil pribadi saya">
</head>
<body>
<h1>Halo, saya Budi! 👋</h1>
<p>Saya seorang Frontend Developer pemula.</p>
<p>Saat ini sedang belajar di Fullstack Talent.</p>
<h2>Keahlian Saya</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript (sedang belajar)</li>
</ul>
<h2>Kontak</h2>
<p>Email: <a href="mailto:budi@email.com">budi@email.com</a></p>
</body>
</html>Halo, saya Budi! 👋
Saya seorang Frontend Developer pemula.
Saat ini sedang belajar di Fullstack Talent.
Keahlian Saya
- HTML
- CSS
- JavaScript (sedang belajar)
Kontak
Email: budi@email.com
💬 Komentar HTML
Kamu bisa menambahkan catatan di kode yang tidak akan ditampilkan di browser. Ini sangat berguna untuk menjelaskan kode:
<!-- Ini adalah komentar, tidak terlihat di browser -->
<!-- Section: Header -->
<h1>Selamat Datang</h1>
<!-- TODO: Tambahkan gambar profil nanti -->
<p>Halaman ini masih dalam pengembangan.</p>✅ Shortcut VS Code: Pilih baris kode, lalu tekan Ctrl + / (atau Cmd + / di Mac) untuk toggle komentar.
✅ Checklist Struktur HTML
Sebelum mempublikasikan halaman web, pastikan checklist ini terpenuhi:
<!DOCTYPE html>
<html lang="..."> dengan atribut bahasa
<meta charset="UTF-8"> di dalam head
<meta name="viewport"> untuk responsive
mobile
<title> yang
deskriptif
<body>
📋 Ringkasan
<!DOCTYPE html>
<head>
berisi metadata (informasi tidak terlihat): title, charset, viewport, SEO
<body>
berisi semua konten yang terlihat oleh pengguna
<!-- ... --> berguna untuk dokumentasi
kode
! + Tab untuk generate boilerplate
otomatis