Struktur Dasar HTML – Anatomi Halaman Web

June 7, 2025

Sebelum kamu bikin website yang keren, kita harus paham dulu struktur dasar HTML. Ini ibarat kerangka tubuh manusia: ada kepala, badan, dan bagian penting lainnya.

1. Struktur Dasar HTML

Ini contoh struktur HTML paling sederhana:

Judul Halaman

Halo Dunia!

Selamat datang di dunia HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Selamat datang di dunia HTML.</p>
  </body>
</html>

Yuk kita bedah satu per satu.

2. Penjelasan Tiap Bagian

`<!DOCTYPE html>`

Ini memberi tahu browser bahwa dokumen ini adalah HTML versi modern (HTML5). Wajib ada di baris paling atas!

`<html> ... </html>`

Tag ini membungkus semua isi halaman HTML. Bisa dibilang ini adalah “rumah besar” dari halamanmu.

`<head> ... </head>`

Bagian ini nggak terlihat di halaman web, tapi penting banget. Isinya informasi tentang halaman, misalnya:

Judul (<title>)
Pengaturan karakter
Link ke file CSS atau JavaScript

Contoh:

<head>
  <title>Halaman Belajar</title>
</head>

`<body> ... </body>`

Nah ini dia yang tampil di browser. Semua konten seperti teks, gambar, link, dan video akan kamu tulis di sini.

Contoh:

<body>
  <h1>Selamat Datang!</h1>
  <p>Ini adalah konten utama.</p>
</body>

3. Ilustrasi Sederhana

Kalau diibaratkan, struktur HTML itu seperti:

<!DOCTYPE html>         ← Jenis dokumen
<html>                  ← Rumah
  <head>                ← Atap, informasi tentang rumah
    <title>Judul</title>
  </head>
  <body>                ← Ruangan utama, isi rumah
    <h1>Halo!</h1>
    <p>Isi halaman di sini</p>
  </body>
</html>

4. Tips Penting

Selalu simpan file dengan ekstensi .html
Indentasi (spasi masuk) bikin kode kamu lebih rapi dan mudah dibaca
Gunakan editor yang bantu highlight syntax (contoh: VS Code)

Kesimpulan

Struktur dasar HTML itu sederhana, tapi fondasinya sangat kuat. Semua halaman web, sekeren apa pun tampilannya, tetap mulai dari struktur ini.

Di artikel berikutnya, kita akan menulis HTML pertamamu secara utuh dan menjalankannya di browser. Stay tuned!

Tags:belajarelementhtml, codingdasar, frontend, html, htmlindonesia, htmluntukpemula, kodinghtml, pembelajarancoding, strukturhtml, taghtml, tutorialhtml, webdevelopment

About The Author

cauza

CEO at CMC (Cauza Multimedia Creatifa), Senior of IT & Multimedia Departement at PT. Zafa Mulia Mandiri (Zafa Tour) Lives in Palembang