Struktur Dasar Dokumen HTML

April 30, 2025

Untuk membuat dokumen HTML, setidaknya kamu harus menyertakan tiga tag utama, yaitu:

<html>
  <head>
    <!-- Informasi dokumen -->
  </head>
  <body>
    <!-- Konten halaman -->
  </body>
</html>

1. `<!DOCTYPE html>`

Sebelum tag <html>, kita perlu menuliskan deklarasi:

<!DOCTYPE html>

Tujuannya adalah untuk memberitahu browser bahwa kita menggunakan HTML5 sebagai standar. Ini penting agar browser tidak salah menafsirkan kode kita.

2. Elemen `<html>`

Tag <html> adalah pembungkus utama seluruh dokumen HTML. Semua elemen HTML lainnya berada di dalamnya.
Biasanya juga ditambahkan atribut lang untuk mendeskripsikan bahasa konten:

<html lang="id"></html>

3. Elemen `<head>`

Tag <head> berisi informasi meta atau pengaturan dokumen yang tidak terlihat langsung oleh pengguna.

Hal-hal yang biasanya ada di <head>:

<title> → judul halaman (terlihat di tab browser)
<meta charset="UTF-8"> → untuk encoding karakter
<meta name="viewport"> → agar halaman responsif
<link rel="stylesheet"> → menghubungkan file CSS
<script> → menyisipkan JavaScript
<meta name="description">, <meta name="author">, dll.

Contoh:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Halaman Pertamaku</title>
</head>

4. Elemen `<body>`

Semua konten yang akan ditampilkan di layar pengguna ditulis di dalam <body>.
Mulai dari:

Judul & paragraf
Gambar & video
Tombol & link
Formulir & tabel

Contoh:

<body>
  <h1>Selamat Datang</h1>
  <p>Ini adalah halaman web pertamaku!</p>
</body>

Contoh Dokumen HTML Lengkap

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar HTML</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah contoh struktur dasar HTML.</p>
  </body>
</html>

Kesimpulan

Untuk membuat dokumen HTML, susunannya adalah:

Awali dengan <!DOCTYPE html>
Gunakan <html> sebagai elemen utama
Simpan metadata di <head>
Simpan semua konten yang terlihat di <body>

Dengan memahami struktur ini, kamu udah selangkah lebih dekat jadi web developer! 🚀

Struktur Dasar Dokumen HTML

1. <!DOCTYPE html>

2. Elemen <html>