Struktur Dokumen yang Valid

Doctype, elemen html, head beserta metadatanya, dan body telah kita pelajari satu per satu. Kini saatnya merakit seluruh potongan tersebut menjadi satu dokumen utuh yang sah menurut spesifikasi. Dokumen yang valid bukan sekadar keindahan penulisan: struktur yang benar membuat browser merender halaman pada mode yang tepat, membantu teknologi bantu, dan mempermudah kita menemukan letak kesalahan. Pada Chapter ini kita menyusun anatomi lengkapnya, menyimpulkannya dalam ceklis, lalu mempelajari kesalahan umum beserta cara validator mendeteksinya.

Anatomi Dokumen yang Valid #

Dokumen HTML yang valid tersusun seperti hierarki berikut, dengan tiap anak wajib berada di induk yang benar:

Pembacaan diagram dari atas ke bawah menghasilkan aturan kebenaran: doctype di baris pertama, elemen html akar tunggal, head dan body sebagai dua anak langsung, lalu metadata mengisi head dan konten mengisi body. Urutan di dalam head mengikuti kebiasaan yang telah kita pelajari: charset, viewport, lalu title sebagai penutup. Tiga komponen itu adalah kelengkapan minimal head, sedangkan isi body bergantung pada halaman yang sedang kita bangun.

Ceklis Struktur Dokumen #

Sebelum menyebut sebuah dokumen selesai, kita periksa daftar berikut:

• Deklarasi <!doctype html> berada di baris pertama.
• Satu elemen html dengan atribut lang yang sah.
• Satu elemen head berisi meta charset, meta viewport, dan tepat satu title.
• Satu elemen body menampung seluruh konten yang terlihat.
• Setiap elemen ditutup, dan tidak ada elemen yang bersarang saling menembus.
• Tidak ada elemen yang menetap di tempat yang salah, misalnya title di dalam body.

Enam poin di atas berasal dari aturan spesifikasi yang kita pelajari sepanjang section ini, dan jumlahnya sedikit sehingga mudah diperiksa mata sebelum menjalankan validator.

Kesalahan Umum dan Pesan Validator #

Validator seperti Nu Html Checker membaca dokumen seperti browser, lalu memeriksa pohon hasil parsing terhadap aturan spesifikasi. Kesalahan struktur yang paling sering muncul beserta pesan khasnya:

Dua perilaku validator perlu dipahami. Pertama, validator sering melaporkan satu kesalahan lalu menahan pesan berikutnya pada bagian yang sama (suppressing further errors), sehingga perbaikan dikerjakan satu per satu dari pesan teratas. Kedua, kesalahan berdampak berantai: heading yang ditulis di dalam head dipindahkan parser ke body, dan pesan berikutnya melaporkan tag body ganda, bukan heading yang salah tempat.

Membandingkan Dokumen Tidak Valid dan Valid #

Contoh berikut mengumpulkan dua kesalahan sekaligus, doctype hilang dan title ganda; contoh ini disimpan sebagai ilustrasi, bukan file latihan:

<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Halaman Siti</title>
  <title>Profil Siti</title>
</head>
<body>
  <h1>Selamat datang</h1>
  <p>Halaman ini mengandung dua kesalahan struktur.</p>
</body>
</html>

Validator menandai baris pertama sebagai doctype yang hilang, lalu menandai title kedua karena head hanya boleh memuat tepat satu. Perbaikannya sederhana: tambahkan <!doctype html> di baris pertama, lalu hapus salah satu title. Bandingkan dengan dokumen utuh berikut yang memenuhi seluruh ceklis:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dokumen Valid Lengkap</title>
</head>
<body>
  <!-- seluruh konten halaman ditulis di dalam body -->
  <h1>Dokumen Valid Lengkap</h1>
  <p>Kerangka di atas adalah pola yang kita pakai untuk seluruh latihan berikutnya.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Dokumen Valid Lengkap" di bagian atas halaman
  - Satu paragraf penjelasan di bawahnya
  - Teks "Dokumen Valid Lengkap" pada tab browser
  - Pada tab Console DevTools: document.compatMode bernilai CSS1Compat

Mari kita telaah peran setiap baris penting di atas:

1. Baris 1 (<!doctype html>): pembuka wajib yang menetapkan standards mode.
2. Baris 2 (<html lang="id">): akar tunggal beserta penanda bahasa dokumen.
3. Baris 3-7 (<head> … </head>): metadata lengkap: charset dulu, viewport, lalu tepat satu title.
4. Baris 9 (<!-- ... -->): komentar HTML; browser mengabaikan isinya, sekaligus pengingat tempat konten ditulis.
5. Baris 10-12 (<body> …): satu body menampung heading dan paragraf yang terlihat.

Kerangka di atas menjadi titik berangkat setiap file latihan kita. Section Elemen dan Atribut berikutnya turun ke bahan bangunan konten: elemen dan atribut beserta aturan penggunaannya, sehingga isi body tersusun dengan makna yang tepat.

Referensi resmi untuk pendalaman:

• W3C — Nu Html Checker
• WHATWG — HTML Living Standard: The HTML syntax
• MDN Web Docs — Sintaks dasar HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dokumen Valid Lengkap</title>
</head>
<body>
  <!-- seluruh konten halaman ditulis di dalam body -->
  <h1>Dokumen Valid Lengkap</h1>
  <p>Kerangka di atas adalah pola yang kita pakai untuk seluruh latihan berikutnya.</p>
</body>
</html>