Struktur Dasar Dokumen HTML
Setiap halaman web di internet, mulai dari Google, Tokopedia, sampai landing page produk kamu, semuanya dibangun di atas struktur HTML yang sama. Begitu kamu paham kerangkanya, kamu bisa membaca halaman web mana pun.
Anatomi Sebuah Halaman Web
Ini adalah kerangka minimum sebuah halaman HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page Produk Saya</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Ini konten yang dilihat pengunjung.</p>
</body>
</html>Jangan panik. Kita bedah satu per satu.
<!DOCTYPE html> — Deklarasi Tipe
Baris pertama ini cuma formalitas. Kamu bilang ke browser: “Dokumen ini pakai HTML versi 5 (versi terbaru).” Cukup taruh di baris pertama, tidak perlu diubah-ubah.
<html> — Pembungkus Utama
Seluruh konten halaman ada di dalam tag <html>. Atribut lang="id" memberitahu browser dan mesin pencari bahwa halaman ini berbahasa Indonesia. Ini penting untuk SEO.
<head> — Bagian yang Tidak Terlihat
Bagian <head> berisi informasi tentang halaman, tapi tidak ditampilkan di layar. Ini area “di balik layar” yang termasuk:
<meta charset="UTF-8">— Supaya karakter Indonesia (á, é, dll) dan emoji ditampilkan dengan benar<meta name="viewport">— Ini wajib supaya halaman tampil responsif di HP. Tanpa ini, halaman bakal terlihat super kecil di layar mobile<title>— Judul yang muncul di tab browser dan di hasil pencarian Google
Untuk advertiser, <head> ini area yang sangat penting karena di sinilah tracking code biasanya dipasang. Meta Pixel, Google Analytics, GTM, semuanya ditaruh di bagian <head>.
<body> — Bagian yang Terlihat
Semua yang kamu lihat di layar, teks, gambar, tombol, formulir, video, semuanya ada di dalam <body>. Ini area kerja utama kamu.
Analogi Surat Resmi
Bayangkan HTML itu seperti surat resmi:
<!DOCTYPE>= Kop surat (menunjukkan ini dokumen resmi)<head>= Amplop (informasi pengirim, alamat tujuan, tapi tidak dibaca langsung)<body>= Isi surat (konten yang benar-benar dibaca penerima)
Tag Pembuka dan Tag Penutup
Perhatikan pola ini:
<h1>Judul Halaman</h1><h1>adalah tag pembuka</h1>adalah tag penutup (ada garis miring/)
Hampir semua elemen HTML mengikuti pola ini. Tag pembuka menandai awal, tag penutup menandai akhir. Konten ada di antaranya.
Kalau kamu lupa menutup tag, halaman bisa berantakan. Ini salah satu sumber error paling umum, dan sekarang kamu sudah tahu cara mengidentifikasinya.
Cara Latihan Tanpa Instalasi
Kamu tidak perlu install software apa pun untuk mulai latihan. Buka codepen.io atau jsfiddle.net, ketik kode HTML di editor, dan hasilnya langsung muncul di preview.
Coba salin kerangka HTML di atas, ganti teks di dalam <h1> dan <p> dengan nama produk dan deskripsi singkatnya. Lihat hasilnya langsung.
Yang Perlu Kamu Ingat
Dari chapter ini, ada tiga hal yang harus tertanam:
- Setiap halaman web punya
<head>(informasi tersembunyi) dan<body>(konten terlihat) - Tracking code seperti pixel dan GTM dipasang di
<head> - Setiap tag punya pembuka dan penutup, jangan lupa menutup tag
Chapter berikutnya, kita masuk ke elemen-elemen konten yang paling sering kamu temui di landing page.