Bab 04: Membuat Struktur Dasar di HTML
Setiap halaman web selalu dimulai dari satu hal yang sama yaitu struktur dasar HTML. Struktur inilah yang jadi kerangka utama sebelum kamu mikirin tampilan dengan CSS atau nambah interaksi pakai JavaScript. Kalau struktur dasar HTML nya berantakan, browser bisa salah paham, dan hasil akhirnya juga ikut berantakan.
Di artikel ini, kita akan bahas cara membuat struktur dasar HTML secara runtut dan mudah dipahami, mulai dari <!DOCTYPE html> sampai pembagian head dan body. Pembahasannya fokus ke logika dan fungsi tiap bagian, bukan sekadar hafalan. Kalau kamu masih di tahap awal belajar HTML dan ingin lihat gambaran besarnya dulu, kamu bisa mulai dari halaman panduan dasar HTML sebagai halaman induknya.
Apa Itu Struktur Dasar HTML?
Struktur dasar HTML adalah kerangka minimal yang wajib ada di setiap file HTML agar browser bisa membacanya dengan benar. Ini bukan cuma “aturan formalitas”, tapi bagian penting biar web kamu:
- Tampil konsisten di semua perangkat
- Bisa diakses oleh mesin pencari (SEO-friendly)
- Gampang dikembangkan ke depannya
Bayangkan ini seperti template dokumen resmi ada kop surat, judul, isi, dan tanda tangan. Kalau salah satu bagian hilang, dokumennya terasa “nggak lengkap”.
Doctype: “Surat Izin” agar Browser Paham
Baris pertama di file HTML mu harus ini:
<!DOCTYPE html>Ini bukan tag HTML, tapi deklarasi. Fungsinya kasih tahu browser “Hei, ini dokumen HTML5, tolong render pake mode terbaru, jangan pake mode lama kayak zaman Internet Explorer!”
Tanpa <!DOCTYPE html>, browser bisa masuk ke quirks mode (mode aneh) dan tampilan jadi kacau. Jadi, jangan pernah lupa!
Elemen <html>: Wadah Utama Semua Konten
Setelah doctype, masuk ke elemen root:
<html lang="id">
</html>Atribut lang=”id” kasih tahu browser (dan mesin pencari) bahwa konten ini berbahasa Indonesia. Ini penting buat:
- Aksesibilitas (pembaca layar)
- SEO lokal
- Terjemahan otomatis
Semua konten HTML lainnya <head> dan <body> harus ada di dalam tag ini.
Bagian <head>: Otak di Balik Layar
Bagian <head> itu kayak ruang kontrol yang nggak kelihatan pengunjung, tapi vital banget buat fungsi dan identitas website.
<meta charset=”UTF-8″> Biar teks nggak aneh
<meta charset="UTF-8">UTF-8 adalah standar encoding teks global. Tanpa ini, huruf seperti “é”, “ñ”, atau bisa jadi tanda tanya atau kotak aneh. Apalagi kalau kamu pake huruf Jawa, Arab, atau emoji jadi wajib pakai UTF-8!
<title> Judul yang muncul di tab browser
<title>Website Pertamaku</title>Ini yang muncul di tab browser dan hasil pencarian Google. Jangan kosongin! Judul yang jelas bikin pengunjung tahu mereka di halaman yang tepat.
<meta name=”viewport”> Ini bikin responsif di HP
<meta name="viewport" content="width=device-width, initial-scale=1.0">Ini kunci ajaib biar website kamu nggak kecil banget atau perlu di zoom terus di HP. Tanpa viewport, browser mobile anggap halamanmu ukuran desktop dan pengalaman pengguna jadi buruk.
Bagian <body>: Panggung Utama Website
Di sinilah seluruh konten yang dilihat pengguna ada: teks, gambar, tombol, video, dll.
<body>
<h1>Selamat Datang, Bos!</h1>
<p>Ini halaman web pertamaku.</p>
</body>Semua yang kamu lihat di layar dari logo sampai footer harus berada di dalam <body>. Jangan taruh konten di luar sini, ya!
Contoh Lengkap Struktur Dasar HTML
Berikut contoh file HTML yang siap pakai:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Pertamaku</title>
</head>
<body>
<h1>Halo, Dunia Web!</h1>
<p>Selamat datang di halaman pertamaku.</p>
</body>
</html>Simpan sebagai index.html lalu buka di browser, dan voila website pertamamu hidup.
Kesalahan Umum Pemula Saat Buat Struktur HTML
- Lupa <!DOCTYPE html>→ browser render salah.
- Tag nggak seimbang→ misal <head> tapi nggak ditutup.
- Naruh konten di luar <body>→ bisa jalan di browser, tapi nggak valid dan berisiko.
- Nggak pakai lang atau charset→ teks error atau nggak aksesibel.
Cek ulang strukturmu sebelum lanjut coding!
Tips Menjaga Struktur Tetap Rapi dan Valid
- Gunakan indentasi Tiap level dalam tag, kasih spasi/tab biar mudah dibaca.
- Validasi dengan W3C Validator Pastikan strukturnya sesuai standar (validator.w3.org).
- Simpan sebagai template Buat file template.html yang bisa kamu salin tiap mulai proyek baru.
- Jangan hapus bagian kecil Kayak meta viewport, kelihatannya sepele, tapi efeknya besar!
Memahami struktur dasar HTML adalah langkah kecil yang dampaknya besar. Begitu kamu paham kerangkanya, membaca kode orang lain jadi lebih gampang, dan menulis HTML sendiri juga terasa lebih masuk akal, bukan sekadar coba-coba.
Setelah ini, kamu bisa lanjut memperdalam elemen-elemen HTML satu per satu supaya makin kebayang cara kerja halaman web secara utuh. Untuk alur belajar yang lebih runtut dari nol sampai siap ngoding, kamu bisa kembali ke panduan Belajar HTML untuk Pemula sebagai titik awalnya.
Dan ingat setiap developer hebat dulu juga pernah nulis <h1>Hello World</h1> untuk pertama kalinya.