Struktur Dasar HTML

Setiap halaman HTML memiliki struktur dasar yang wajib ada. Struktur ini memberitahu browser bagaimana cara membaca dan menampilkan halaman web kamu.

Kerangka Dasar HTML

Berikut adalah kerangka dasar dari sebuah dokumen HTML:


<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Halo, Dunia!</h1>
    <p>Ini adalah halaman web saya.</p>
</body>
</html>

Penjelasan Setiap Bagian

<!DOCTYPE html> — Memberitahu browser bahwa dokumen ini menggunakan HTML5
<html> — Tag pembungkus utama seluruh isi halaman
<head> — Berisi informasi tentang halaman (tidak ditampilkan di browser)
<meta charset> — Mengatur encoding karakter agar huruf seperti "é", "ñ", atau "ä" tampil benar
<meta name="viewport"> — Membuat tampilan responsif di perangkat mobile
<title> — Judul yang muncul di tab browser
<body> — Berisi semua konten yang ditampilkan ke pengguna

Hasilnya di Browser

Jika kamu menyimpan file di atas sebagai index.html lalu membukanya di browser, tampilannya seperti ini:

Halo, Dunia!

Ini adalah halaman web saya.

Perhatikan bahwa isi dari <head> seperti <title> dan <meta> tidak muncul di dalam halaman — mereka bekerja di balik layar.