Kalau kamu sudah baca apa itu HTML, sebenarnya kamu sempat melihat kerangka dasar sebuah halaman di sana. Nah, sekarang kita pelan-pelan, perhatikan baik-baik. Soalnya begini: semua halaman HTML di internet — sebesar atau serumit apa pun — dibangun dari sekumpulan bagian yang itu-itu juga. Begitu kerangka ini “klik” di kepalamu, kamu bisa menyiapkan halaman apa saja dengan pede, bukan sekadar copy-paste sesuatu yang kamu sendiri belum paham.
Di artikel ini kita bedah strukturnya baris demi baris. Selesai membaca, kamu bukan cuma tahu apa yang harus diketik di awal sebuah berkas HTML, tapi juga paham kenapa tiap bagian itu ada.
Kerangkanya, sekaligus
Berikut satu dokumen HTML yang utuh tapi seminimal mungkin. Nggak ada embel-embel — cuma rangka dasar yang dibutuhkan setiap halaman:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Halamanku</title>
</head>
<body>
<h1>Halo!</h1>
<p>Ini konten halamannya.</p>
</body>
</html>Cuma segitu. Ada lima bagian yang bekerja di sini: doctype, elemen <html>, <head>, <body>, dan beberapa potong metadata di dalam head. Yuk kita kupas satu per satu.
Doctype: <!DOCTYPE html>
Baris paling atas di setiap halaman HTML selalu deklarasi doctype:
<!DOCTYPE html>Tugasnya simpel: memberi tahu browser, “tampilkan halaman ini pakai standar HTML modern.” Bentuknya pendek dan agak nyeleneh, jadi wajar kalau kamu bertanya-tanya kenapa baris ini penting. Jawabannya ada di sejarah. Browser bisa jalan dalam dua mode — “standards mode” yang modern, dan “quirks mode” jadul yang menirukan perilaku browser zaman dulu. Doctype inilah saklar yang menentukan mode mana yang dipakai. Kalau dipasang, kamu dapat standards mode; kalau lupa, browser balik ke quirks mode dan tata letakmu bisa berantakan dengan cara yang halus tapi bikin pusing.
Yang perlu kamu ingat cuma satu hal: taruh <!DOCTYPE html> di baris pertama setiap halaman, tanpa kecuali. Ini sebenarnya bukan tag (lihat saja, tidak ada pasangan penutupnya), jadi anggap saja sebagai instruksi satu baris yang ditempel di paling atas berkas.
Kenapa sekarang pendek sekali?
Versi HTML lawas punya doctype yang panjang dan ruwet — ada yang berupa satu baris penuh teks nyaris tak terbaca, lengkap dengan tautan ke sebuah alamat web. HTML5 memangkasnya jadi <!DOCTYPE html> saja. Jadi kalau suatu hari kamu menemukan doctype panjang yang bikin ngeri di kode lama, itu asal-usulnya. Sekarang, yang pendek sudah lebih dari cukup.
Akarnya: <html>
Tepat setelah doctype, ada elemen <html>, dan elemen inilah yang membungkus semua isi halaman:
<html lang="id">
...
</html>Namanya elemen akar (root), karena ia ibarat batang pohon tempat semua elemen lain bercabang. Apa pun yang ada di halaman pasti berada di dalamnya, dan dalam satu dokumen hanya boleh ada satu elemen <html>.
Coba perhatikan atribut lang. Atribut ini memberi tahu browser dan mesin pencari halamanmu ditulis dalam bahasa apa — id untuk bahasa Indonesia, en untuk bahasa Inggris, dan seterusnya. Kelihatannya sepele, tapi perannya jauh lebih besar dari dugaan:
- Pembaca layar (screen reader) memakainya untuk menentukan pelafalan yang tepat. Kalau bahasanya tidak kamu beri tahu, screen reader yang disetel ke bahasa Inggris bakal salah melafalkan teks Indonesia.
- Mesin pencari memakainya untuk menyodorkan halamanmu ke audiens yang sesuai.
- Fitur browser seperti terjemahan otomatis juga bergantung padanya.
Jadi biasakan selalu mengisi lang, dan isi sesuai bahasa asli halamannya.
Dua paruh: <head> dan <body>
Di dalam <html>, dokumen terbelah jadi dua bagian yang tidak pernah saling tumpang tindih: <head> dan <body>. Begitu beda keduanya benar-benar jelas di kepalamu, kamu bakal terhindar dari banyak sekali kebingungan.
<html lang="id">
<head>
<!-- informasi TENTANG halaman -->
</head>
<body>
<!-- konten halaman yang DILIHAT orang -->
</body>
</html>Cara paling gampang mengingatnya begini:
<head>menampung informasi tentang halaman — hal-hal yang tidak dibaca langsung oleh pengunjung. Misalnya judul, pengaturan encoding karakter, tautan ke stylesheet, serta metadata untuk mesin pencari dan media sosial.<body>menampung konten sesungguhnya — semua yang dilihat dan dipakai pengunjung. Mulai dari heading, paragraf, gambar, tautan, tombol, sampai formulir.
Konten yang terlihat TIDAK masuk ke head
Ini salah satu jebakan yang paling sering bikin pemula bingung, dan biasanya berujung pada bug yang menyebalkan: kamu menulis <h1> atau <p>, halaman dibuka, tapi… kosong, tidak ada apa-apa. Sembilan dari sepuluh kasus, penyebabnya konten itu nyasar ke dalam <head>, bukan <body>. Head memang bukan tempat konten yang terlihat — itu tugasnya body. Jadi kalau ada yang kamu tulis tapi tidak muncul, cek dulu ia nyangkut di bagian yang mana.
Apa yang ada di dalam <head>
Head memang mungil, tapi perannya penting. Mari kita tengok baris-baris yang hampir selalu kamu taruh di sana, halaman demi halaman.
Kumpulan karakter
<meta charset="UTF-8" />Baris ini memberi tahu browser kumpulan karakter mana yang dipakai halaman untuk menampilkan teks. Pilih UTF-8 — ia mencakup nyaris semua huruf, aksen, simbol, dan emoji dari berbagai bahasa. Kalau tidak dipasang, teksmu berisiko berubah jadi deretan tanda tanya atau simbol aneh, apalagi untuk karakter beraksen. Taruh baris ini paling awal di dalam head, sebelum title.
Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Yang satu ini urusannya sama ponsel. Tanpa baris ini, browser di HP menganggap halamanmu dibuat untuk layar desktop, lalu mengecilkan semuanya biar muat — alhasil pengunjung harus mencubit dan zoom dulu cuma untuk membaca. Baris ini bilang ke browser, “samakan lebar halaman dengan lebar layar perangkat, dan jangan dikecilkan.” Untuk situs zaman sekarang, ini wajib hukumnya, bukan sekadar pelengkap.
Title
<title>Halamanku</title>Title punya dua peran sekaligus. Ia jadi teks yang muncul di tab browser, sekaligus judul yang dipajang Google untuk halamanmu di hasil pencarian. Tapi ia tidak muncul di bagian halaman yang terlihat — tempatnya memang di head. Title yang bagus itu pendek, deskriptif, dan beda untuk tiap halaman. Mesin pencari sangat memperhitungkannya, jadi sayang kalau dibuat asal-asalan.
Beberapa hal lain yang masuk ke head
Seiring situsmu makin berkembang, head juga jadi tempat menaruh beberapa hal lain: <meta name="description"> (teks ringkasan yang ditampilkan mesin pencari di bawah judul), <link rel="stylesheet"> untuk memuat CSS, <link rel="icon"> untuk ikon kecil di tab alias favicon, plus tag social sharing supaya tautan ke halamanmu kelihatan rapi saat dibagikan di media sosial. Kamu nggak perlu langsung pakai semuanya di hari pertama — cukup ingat bahwa head-lah rumah buat hal-hal ini.
Apa yang ada di dalam <body>
Body adalah tempat konten sesungguhnya hidup — dan di sinilah hampir semua pekerjaanmu berlangsung selama belajar. Semua yang benar-benar dilihat pengunjung ada di sini:
<body>
<h1>Selamat datang di situsku</h1>
<p>Ini sebuah paragraf teks yang bisa dibaca pengunjung.</p>
<img src="foto.jpg" alt="Deskripsi fotonya" />
<a href="https://acy-partner.com">Tautan ke suatu tempat</a>
</body>Heading, paragraf, gambar, tautan, daftar, tabel, formulir, tombol — semuanya bermuara di body. Tiap kali kamu belajar elemen HTML baru, hampir pasti tempatnya di sini. Head itu sekumpulan baris di balik layar yang kecil dan tetap; body justru kanvas terbuka tempat kamu membangun halaman.
Bagaimana bagian-bagiannya tersarang
Bakal lebih gampang dipahami kalau kamu membayangkan strukturnya sebagai kotak di dalam kotak. Doctype berdiri sendiri di paling atas, lalu sisanya bersarang rapi ke dalam:
<!DOCTYPE html>
└── <html>
├── <head>
│ ├── <meta charset>
│ ├── <meta viewport>
│ └── <title>
└── <body>
├── <h1>
└── <p><html> menampung <head> dan <body>. <head> menampung metadata. <body> menampung konten yang terlihat. Rapi, mudah ditebak, dan persis sama di setiap halaman yang kamu bangun. Selama pohon kecil ini tertanam di kepalamu, kamu nggak akan pernah bingung lagi ke mana sebaris HTML baru harus ditaruh.
Titik awal yang bisa dipakai ulang
Ini satu tip yang bakal menghemat waktumu: daripada mengetik ulang kerangka dari ingatan tiap kali, simpan saja salinan template minimal ini, lalu mulai setiap halaman baru dari situ. Tinggal ganti judulnya, masukkan kontenmu ke body, dan kamu siap jalan:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Judul halaman di sini</title>
</head>
<body>
<!-- Kontenmu di sini -->
</body>
</html>Sebagian besar editor kode malah bisa membuatkan ini secara otomatis, tapi nggak ada salahnya mengetiknya sendiri beberapa kali dulu. Justru dengan mengetiknya manual, struktur ini benar-benar menempel di ingatan.
Penutup
Yuk kita rangkum semuanya:
- Setiap halaman HTML dibuka dengan
<!DOCTYPE html>— satu baris yang menyalakan standards mode modern di browser. - Elemen
<html>adalah akar yang membungkus segalanya, dan atributlang-nya menyatakan bahasa halaman. - Di dalamnya ada dua bagian yang tidak saling tumpang tindih:
<head>(informasi tentang halaman) dan<body>(konten yang dilihat orang). - Head menyimpan encoding karakter (
UTF-8), baris viewport (untuk ponsel), dan title (teks tab sekaligus judul di hasil pencarian) — ditambah metadata lain seiring situsmu tumbuh. - Body menyimpan semua yang terlihat: heading, paragraf, gambar, tautan, dan sisanya.
Kerangka ini tidak pernah berubah dari satu halaman ke halaman lain, jadi begitu kamu menguasainya, ya sudah, kuasai untuk selamanya. Berikutnya di section ini, kita mulai mengisi body itu dengan konten sungguhan — dimulai dari elemen teks yang paling sering kamu pakai: heading, paragraf, daftar, serta tag-tag yang memberi penekanan dan menata tulisanmu.
