Home » HTML » Struktur Dasar Dokumen HTML

Struktur Dasar Dokumen HTML

Setiap dokumen HTML memiliki struktur dasar yang menjadi kerangka utama untuk memastikan konten ditampilkan dengan benar oleh browser. Struktur ini terdiri dari beberapa bagian wajib yang harus ada:

Deklarasi DOCTYPE html

Tujuan: Memberi tahu browser bahwa dokumen ini menggunakan versi HTML terbaru (HTML5).
Catatan: Bukan sebuah tag HTML, melainkan instruksi untuk browser.
Pentingnya:
- Menghindari “quirks mode” (mode kompatibilitas lama) pada browser.
- Memastikan browser merender halaman sesuai standar HTML5.
Contoh

<!DOCTYPE html>

Tag html

<html lang="id">

Tujuan: Menandai awal dan akhir dokumen HTML, serta menjadi elemen root (akar) dari halaman web.
Atribut Umum: lang (menentukan bahasa utama dokumen, misal lang="id" untuk Bahasa Indonesia).
Pentingnya:
- Menjadi penanda awal dan akhir dokumen.
- Membantu mesin pencari dan alat bantu aksesibilitas memahami bahasa halaman.
Contoh

<html lang=”id”>
  <!– Seluruh konten HTML –>
</html>

Tag head

Tujuan: Berisi metadata (informasi tentang dokumen) yang tidak ditampilkan di halaman web, tetapi penting untuk SEO, styling, dan konfigurasi.
Isi Utama:
- <meta charset="UTF-8">: Menentukan pengkodean karakter (unicode).
- <title>: Judul halaman yang muncul di tab browser.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Mengatur tampilan responsif di perangkat mobile.
- <link>: Menghubungkan ke file eksternal (CSS, ikon).
- <style>: Menambahkan CSS internal.
- <script>: Skrip JavaScript (bisa diletakkan di sini atau sebelum penutup </body>).
Pentingnya: Mengatur informasi teknis yang tidak terlihat di halaman, tetapi penting untuk SEO, performa, dan aksesibilitas.
Contoh

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Belajar HTML</title>
  <link rel="stylesheet" href="style.css">
</head>

Tag body

Tujuan: Berisi semua konten yang ditampilkan di halaman web, seperti teks, gambar, tautan, tabel, dan formulir.
Pentingnya:
- Semua konten yang ingin ditampilkan ke pengguna harus berada di dalam <body>.
- Struktur yang baik di <body> memengaruhi tata letak dan pengalaman pengguna.
Contoh

<body>
  <h1>Selamat Datang!</h1>
  <p>Ini adalah paragraf pertama saya.</p>
  <img decoding="async" src="gambar.jpg" alt="Deskripsi gambar">
</body>

Contoh Lengkap Struktur 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</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah contoh struktur dasar HTML.</p>
  </body>
</html>

Poin Penting:

Urutan Struktur:
- Dokumen harus dimulai dengan <!DOCTYPE html>, diikuti oleh tag <html>, lalu <head>, dan diakhiri dengan <body>.
Kesesuaian Tag:
- Tag <head> dan <body> harus berada di dalam tag <html>.
Metadata Penting:
- charset="UTF-8" wajib digunakan untuk menghindari masalah karakter khusus.
- Tag <title> harus selalu ada di dalam <head>.

Struktur ini adalah fondasi wajib bagi semua halaman web modern. Tanpanya, browser mungkin tidak dapat menampilkan konten dengan benar atau gagal memahami versi HTML yang digunakan.

Sumber : DeepSeek