Langsung ke konten

Struktur Dokumen HTML

Pelajari struktur dokumen HTML dari nol. Pahami elemen dasar seperti doctype, html, head, dan body yang menjadi fondasi setiap halaman web.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami apa itu HTML, sekarang kita akan belajar membuat file HTML pertama dan memahami struktur dasarnya.

Membuat File HTML Pertama

Sebelum menulis kode HTML, kamu perlu membuat file berekstensi .html. Caranya sangat sederhana:

  1. Buka text editor (VS Code, Sublime Text, atau bahkan Notepad)
  2. Buat file baru
  3. Simpan dengan nama index.html

Mengapa index.html? Karena browser secara otomatis mencari file bernama index saat membuka sebuah folder. Jadi ketika kamu membuka folder di browser, file index.html akan langsung ditampilkan.

Struktur Dasar Dokumen HTML

Setiap dokumen HTML punya struktur baku yang harus dipenuhi. Berikut contohnya:

<!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 pertama saya.</p>
  </body>
</html>

Jangan khawatir jika kode di atas terlihat rumit. Kita akan membahasnya satu per satu.

Penjelasan Tiap Elemen

<!DOCTYPE html>

<!DOCTYPE html> diletakkan di baris paling atas dokumen HTML. Fungsinya memberi tahu browser bahwa dokumen ini menggunakan standar HTML5.

Tanpa deklarasi ini, browser mungkin akan menampilkan halaman dalam mode quirks (mode kompatibilitas lama) yang bisa menyebabkan tampilan berantakan.

<html>

Tag <html> adalah elemen root yang membungkus seluruh konten halaman. Semua elemen HTML lainnya harus berada di dalam tag ini.

Attribute lang="id" memberi tahu browser dan search engine bahwa konten halaman ini ditulis dalam bahasa Indonesia. Ini penting untuk SEO dan aksesibilitas.

Bagian <head> berisi informasi tentang halaman yang tidak terlihat oleh pengunjung. Beberapa elemen penting di dalamnya:

  • <meta charset="UTF-8"> — Mengatur encoding karakter agar teks bisa ditampilkan dengan benar, termasuk karakter Indonesia seperti á, é, ñ
  • <meta name="viewport"> — Membuat halaman responsif agar tampilan optimal di berbagai ukuran layar (HP, tablet, desktop)
  • <title> — Judul halaman yang muncul di tab browser dan hasil pencarian Google

<body>

Bagian <body> berisi semua konten yang terlihat oleh pengunjung. Di sinilah kamu menulis teks, menampilkan gambar, membuat form, dan elemen-elemen lainnya.

Semua yang kamu lihat di sebuah website — artikel, tombol, gambar, video — semuanya berada di dalam tag <body>.

Membuat Halaman Sederhana

Mari kita buat halaman HTML yang lebih lengkap. Salin kode berikut ke file index.html:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Halaman Pertama Saya</title>
  </head>
  <body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah halaman web pertama yang saya buat.</p>
    <p>Saya sedang belajar HTML untuk pemula.</p>
  </body>
</html>

Menjalankan File HTML di Browser

Setelah membuat file, langkah selanjutnya adalah membukanya di browser. Caranya:

  1. Cari file index.html di folder tempat kamu menyimpannya
  2. Klik dua kali file tersebut
  3. Browser akan membuka halaman yang sudah kamu buat

Cara lain, klik kanan pada file → Open with → pilih browser (Chrome, Firefox, atau Edge).

Jika muncul teks “Selamat Datang di Website Saya” di layar, selamat! Kamu berhasil membuat halaman web pertama.

Nesting Element (Pemasangan Element)

Dalam HTML, elemen bisa diletakkan di dalam elemen lain. Ini disebut nesting. Perhatikan contoh berikut:

<body>
  <h1>Judul Utama</h1>
  <p>Paragraf pertama.</p>
  <p>Paragraf kedua.</p>
</body>

Di sini, tag <h1> dan dua tag <p> berada di dalam <body>. Aturan nesting yang benar:

  • Elemen yang dibuka harus ditutup
  • Urutan penutup harus sesuai dengan urutan pembuka
  • Hindari overlapping (tumpang tindih)

Contoh yang salah:

<p><strong>Teks tebal dan miring</p></strong>

Contoh yang benar:

<p><strong>Teks tebal dan miring</strong></p>

Indentasi dan Keterbacaan Kode

HTML tidak memperhatikan spasi atau indentasi. Namun, indentasi yang rapi membuat kode lebih mudah dibaca dan dipelami.

<body>
  <h1>Judul</h1>
  <div>
    <p>Paragraf di dalam div.</p>
  </div>
</body>

Biasakan menggunakan 4 spasi atau 1 tab untuk setiap level indentasi. Ini akan sangat membantu ketika kode sudah mulai panjang dan kompleks.

Tips untuk Pemula

  • Simpan file secara berkala — Gunakan Ctrl+S (atau Cmd+S di Mac) secara rutin agar pekerjaan tidak hilang
  • Gunakan nama file tanpa spasi — Hindari my page.html, gunakan my-page.html atau mypage.html
  • Refresh browser setelah edit — Setelah mengubah kode, tekan F5 atau Ctrl+R di browser untuk melihat perubahannya
  • Gunakan fitur Live Server — Di VS Code, install extension Live Server agar perubahan otomatis terlihat tanpa harus refresh manual

Ringkasan

  • Setiap dokumen HTML harus dimulai dengan <!DOCTYPE html>
  • Elemen <html> membungkus seluruh konten
  • <head> berisi informasi tentang halaman (judul, meta, encoding)
  • <body> berisi konten yang terlihat oleh pengunjung
  • Biasakan indentasi yang rapi agar kode mudah dibaca

Langkah Selanjutnya

Sekarang kamu sudah bisa membuat dan menjalankan file HTML sendiri. Di artikel selanjutnya, kita akan membahas Editor Code untuk HTML — editor mana yang cocok untuk pemula dan bagaimana cara menginstallnya.