Cara Kerja Struktur HTML: Memahami <!DOCTYPE>, Head, dan Body

Jika kamu ingin benar-benar memahami HTML, maka kamu tidak boleh melewatkan satu hal paling fundamental: struktur dasar dokumen HTML. Banyak pemula langsung menulis kode tanpa benar-benar memahami apa fungsi dari <!DOCTYPE>, <html>, <head>, dan <body>. Akibatnya, mereka bisa membuat website, tetapi tidak benar-benar mengerti bagaimana browser membaca dokumen tersebut.

Pada artikel ini kita akan membahas secara tuntas dan runtut, dari atas sampai bawah, bagaimana struktur HTML bekerja, kenapa urutannya tidak boleh salah, dan bagaimana hubungannya dengan SEO, performa, dan pengembangan website modern.

1. Gambaran Umum Struktur HTML

Sebuah dokumen HTML standar selalu memiliki kerangka seperti ini:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Judul Halaman</title>
</head>
<body>
    Konten website ditulis di sini
</body>
</html>

Struktur ini bukan sekadar formalitas. Ini adalah fondasi utama semua website yang pernah kamu buka, mulai dari blog sederhana sampai aplikasi besar seperti yang dibahas dalam Dari Nol Sampai Bikin Website Sendiri.

Sebelum mendalami masing-masing bagian, jika kamu belum memahami konsep HTML secara umum, silakan baca terlebih dahulu Memahami Apa Itu HTML dan Fungsinya.

2. Apa Itu <!DOCTYPE> dan Mengapa Penting?

<!DOCTYPE html> adalah deklarasi yang memberi tahu browser bahwa dokumen ini menggunakan standar HTML5.

Tanpa DOCTYPE, browser bisa masuk ke mode “quirks mode” (mode kompatibilitas lama), yang menyebabkan tata letak tidak konsisten. Jadi meskipun terlihat kecil, baris ini sangat penting untuk memastikan HTML dibaca dengan benar.

DOCTYPE bukan tag HTML biasa, melainkan deklarasi. Ia selalu berada di baris paling atas dokumen.

3. Tag <html>: Pembungkus Seluruh Dokumen

Tag <html> adalah elemen akar (root element). Semua elemen lain berada di dalamnya.

Biasanya kita menambahkan atribut lang seperti:

<html lang="id">

Atribut ini membantu mesin pencari dan pembaca layar memahami bahasa utama halaman, yang sangat baik untuk SEO dan aksesibilitas.

Konsep elemen dan atribut ini dibahas lebih detail di artikel Belajar Elemen HTML dan Tutorial Belajar Atribut HTML.

4. Bagian <head>: Otak di Balik Layar

Tag <head> tidak menampilkan konten langsung ke layar, tetapi berisi informasi penting tentang halaman.

Di dalam <head> biasanya terdapat:

Meta charset
Title
Meta description
Link CSS
Script

Contoh:

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Belajar struktur dasar HTML">
    <title>Struktur Dasar HTML</title>
    <link rel="stylesheet" href="style.css">
</head>

Jika kamu ingin mempercantik tampilan, CSS ditambahkan di sini atau melalui file eksternal seperti dijelaskan dalam Cara Menggunakan CSS untuk Mempercantik HTML.

Jika ingin menambahkan JavaScript, kamu bisa membaca Cara Menggunakan JavaScript pada HTML atau bahkan framework seperti React, Angular, dan Vue.

5. Bagian <body>: Tempat Semua Konten Ditampilkan

Semua yang terlihat oleh pengguna berada di dalam tag <body>.

Di sinilah kita menulis:

Heading (lihat Panduan HTML Headings)
Paragraf (lihat Belajar Paragraf HTML)
Pemformatan teks (lihat Belajar Pemformatan Teks HTML)
Daftar (Cara Membuat Daftar)
Tabel (Cara Membuat Tabel)
Form (Cara Membuat Formulir HTML)
Media (Cara Menggunakan Media)

Semua itu hanya akan tampil jika berada di dalam <body>.

6. Hubungan Struktur HTML dengan SEO

Struktur HTML yang benar membantu mesin pencari memahami konten.

Beberapa hal penting:

Gunakan heading berurutan (H1 → H2 → H3)
Gunakan meta description di head
Gunakan struktur rapi tanpa error

Jika ada kesalahan struktur, baca Cara Memperbaiki Kesalahan HTML.

7. Contoh Struktur HTML Lengkap dan Rapi

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Pertama Saya</title>
</head>
<body>
    <h1>Halo Dunia</h1>
    <p>Ini adalah website pertama saya.</p>
</body>
</html>

Jika kamu ingin membuat dari nol, kamu bisa membaca Membuat File HTML Pertama dan Mengenal Editor Kode.

8. Hubungan Struktur HTML dengan Responsif

Struktur HTML yang benar juga memudahkan membuat website responsif seperti dibahas di Cara Membuat Website Responsif.

Viewport meta di dalam head sangat penting untuk tampilan mobile.

Kesimpulan

Struktur dasar HTML bukan hanya formalitas, tetapi fondasi seluruh website. Tanpa memahami <!DOCTYPE>, <html>, <head>, dan <body>, kamu akan kesulitan memahami konsep lanjutan seperti Bootstrap (Panduan Bootstrap) atau perbedaan teknologi web (Perbedaan HTML, CSS, dan JavaScript).

Memahami struktur berarti memahami fondasi. Dan fondasi yang kuat akan membuat proses belajar HTML menjadi jauh lebih terarah dan tidak membingungkan.

Adi Prayitno

Cara Kerja Struktur HTML: Memahami , Head, dan Body