BAB 3: Struktur Dasar HTML
Kerangka wajib setiap halaman HTML: doctype, html, head, dan body.
Shortcut ! + Tab di Bab 2 menghasilkan kerangka HTML lengkap dalam hitungan detik. Hasilnya terlihat seperti template yang perlu diterima begitu saja — tapi setiap baris di sana punya alasan keberadaannya. Memahami mengapa masing-masing bagian ada akan membuat kamu jauh lebih percaya diri ketika suatu saat kerangka itu tidak bekerja seperti yang diharapkan.
Dokumen HTML Secara Keseluruhan
Sebuah file HTML yang valid memiliki struktur hierarkis yang konsisten. Semua elemen di dalamnya saling bersarang dengan aturan yang jelas — ada yang boleh menjadi induk, ada yang hanya boleh menjadi anak.
Dokumen HTML
|
+-- <!DOCTYPE html> (deklarasi, bukan elemen)
|
+-- <html> (akar dokumen)
|
+-- <head> (metadata halaman)
| |
| +-- <meta charset>
| +-- <meta viewport>
| +-- <title>
|
+-- <body> (konten yang terlihat)
|
+-- konten halamanDiagram di atas adalah cetak biru setiap halaman HTML yang pernah ada. Browser menggunakan struktur ini untuk membangun pohon DOM — representasi internal halaman yang kemudian dirender menjadi tampilan visual.
DOCTYPE: Baris Pertama yang Wajib Ada
Baris pertama di setiap file HTML selalu sama:
<!DOCTYPE html><!DOCTYPE html> bukan elemen HTML biasa. Ia adalah deklarasi tipe dokumen yang memberi tahu browser bahwa file ini menggunakan standar HTML5. Tanpa baris ini, browser masuk ke mode yang disebut quirks mode — sebuah mode kompatibilitas mundur di mana browser menerapkan aturan rendering lama dari era 1990-an. Hasilnya tidak selalu salah, tapi tidak bisa diprediksi.
Jika <!DOCTYPE html> dihilangkan, tampilan halaman bisa berbeda-beda di setiap browser. Ini adalah sumber bug yang sulit ditelusuri karena kodenya sendiri terlihat benar.
Perhatikan penulisannya: DOCTYPE ditulis kapital semua, dan tidak ada tanda kutip di sekitar html. Ini bukan tag HTML biasa — tidak punya tag penutup, tidak punya atribut isi. Cukup satu baris, ditulis sekali, di baris paling atas.
Elemen <html>: Akar Dokumen
Setelah deklarasi DOCTYPE, seluruh isi dokumen dibungkus oleh elemen <html>:
<!DOCTYPE html>
<html lang="id">
...
</html>Elemen <html> adalah akar dari pohon dokumen — semua elemen lain berada di dalamnya. Atribut lang di sini bukan hiasan. Ia memberi tahu browser dan mesin pencari dalam bahasa apa konten halaman ditulis. Pembaca layar (screen reader) juga menggunakan atribut ini untuk menentukan aksen dan pelafalan yang tepat saat membacakan konten ke pengguna tunanetra.
Gunakan lang="id" untuk halaman berbahasa Indonesia, lang="en" untuk bahasa Inggris. Jika halaman menggunakan campuran dua bahasa, kamu bisa menambahkan atribut lang ke elemen-elemen tertentu di dalam <body> untuk menandai bagian yang berbeda bahasa.
Elemen <head>: Informasi untuk Browser
<head> menampung semua informasi tentang halaman yang tidak terlihat langsung oleh pengguna, tapi dibutuhkan oleh browser, mesin pencari, dan layanan eksternal.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman Saya</title>
</head>Meta charset
<meta charset="UTF-8">Ini mendefinisikan encoding karakter yang digunakan halaman. UTF-8 adalah standar yang mendukung hampir semua karakter dari semua bahasa di dunia — termasuk huruf Arab, aksara Jawa, emoji, dan simbol matematika. Tanpa deklarasi charset yang benar, karakter non-ASCII (termasuk huruf beraksara seperti é, ñ, atau bahkan tanda petik “curly”) bisa tampil sebagai kotak kosong atau karakter aneh.
Letakkan <meta charset="UTF-8"> sebagai elemen pertama di dalam <head>, sebelum elemen lainnya. Browser mulai memproses karakter dari byte pertama file — deklarasi charset yang terlambat bisa menyebabkan sebagian karakter sudah salah diinterpretasikan sebelum browser membaca deklarasinya.
Meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">Baris ini mengontrol bagaimana halaman ditampilkan di layar perangkat mobile. Tanpanya, browser mobile akan menganggap halaman dirancang untuk layar desktop lebar dan menyusutkan tampilannya agar muat — hasilnya teks jadi sangat kecil dan tidak nyaman dibaca.
width=device-width memberi tahu browser agar menggunakan lebar layar perangkat sebagai lebar viewport. initial-scale=1.0 menetapkan zoom awal di angka 1 — tidak ada zoom masuk atau keluar saat halaman pertama dibuka.
Title
<title>Judul Halaman Saya</title>Teks di dalam <title> muncul di tiga tempat: tab browser, hasil pencarian Google, dan saat halaman di-bookmark. Ini adalah satu-satunya elemen <head> yang punya dampak langsung terhadap apa yang dilihat pengguna di luar area konten halaman itu sendiri.
Isi <title> harus spesifik dan deskriptif. “Halaman Saya” tidak berguna di hasil pencarian. “Kalkulator BMI — Hitung Indeks Massa Tubuh” jauh lebih informatif dan meningkatkan kemungkinan pengguna mengklik.
Elemen <body>: Konten yang Terlihat
Semua yang ingin ditampilkan kepada pengguna — teks, gambar, tombol, form, video — diletakkan di dalam <body>.
<!-- index.html -->
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Pertama Saya</title>
</head>
<body>
<h1>Selamat datang</h1>
<p>Ini adalah halaman HTML pertama yang kamu buat dengan struktur yang benar.</p>
</body>
</html><body> hanya boleh ada satu di dalam dokumen. Semua elemen konten — heading, paragraf, gambar, daftar, tabel, form — bersarang di dalamnya. Browser mengabaikan konten apa pun yang ditulis di luar <html> atau di luar <body>, jadi pastikan semua konten yang ingin ditampilkan berada di tempat yang tepat.
Indentasi dan Keterbacaan
HTML tidak membutuhkan indentasi untuk berfungsi — browser membaca markup tanpa memedulikan spasi. Tapi kode tanpa indentasi hampir mustahil dibaca manusia, terutama ketika elemen-elemen mulai bersarang lebih dalam.
Konvensi yang paling umum adalah 2 spasi per level indentasi. VS Code menerapkan ini secara otomatis saat menggunakan template Emmet.
<!-- Susah dibaca -->
<html><head><title>Judul</title></head><body><h1>Teks</h1><p>Paragraf</p></body></html>
<!-- Mudah dibaca -->
<html lang="id">
<head>
<title>Judul</title>
</head>
<body>
<h1>Teks</h1>
<p>Paragraf</p>
</body>
</html>Keduanya menghasilkan tampilan yang identik di browser. Perbedaannya ada di kemampuan kamu (dan orang lain) untuk memelihara kode itu enam bulan kemudian.
Latihan
Coba tiga variasi berikut untuk memperkuat pemahaman tentang setiap bagian kerangka:
-
Buat file
profil.htmldengan kerangka HTML lengkap. Di dalam<body>, tambahkan nama kamu sebagai<h1>dan satu paragraf singkat tentang diri kamu. Buka di browser dan perhatikan apa yang tampil di tab browser. -
Hapus baris
<!DOCTYPE html>dari file tadi, simpan, lalu refresh browser. Apakah ada perbedaan visual? (Catatan: di banyak kasus modern tidak ada perbedaan terlihat, tapi buka DevTools → Console untuk melihat apakah ada pesan peringatan dari browser.) -
Ubah
lang="id"menjadilang="en"di atribut<html>. Tidak ada perubahan visual, tapi coba aktifkan pembaca layar di sistem operasi kamu (misalnya Narrator di Windows atau VoiceOver di macOS) dan dengarkan perbedaan pelafalannya.
Kerangka dasar ini akan menjadi fondasi semua file HTML yang kamu tulis ke depan. Sekarang kita perlu mengisi <body> dengan konten yang bermakna — dan langkah pertama adalah memahami bagaimana elemen HTML bekerja: apa itu tag pembuka, tag penutup, konten di antara keduanya, dan kenapa beberapa elemen tidak punya tag penutup sama sekali.
Semua contoh kode di bab ini tersedia di repositori abdasis/html-dasar-code-examples di folder bab-03-struktur-dasar/. Clone repo tersebut agar kamu bisa langsung menjalankan setiap contoh tanpa perlu menyalin kode secara manual.