Memahami Hierarki Dokumen

Sejak chapter pertama kita menyebut dokumen HTML sebagai struktur pohon, tetapi belum pernah membahas cara membaca pohon itu. Chapter ini memperkenalkan istilah relasi antarelemen — parent, child, sibling, ancestor, descendant — beserta ukuran tingkat kedalaman. Istilah tersebut dipakai sepanjang sisa Course HTML dan menjadi bekal ketika nanti mempelajari selector CSS serta traversal DOM di JavaScript.

Dokumen sebagai Pohon #

Saat parsing, browser membentuk DOM — pohon objek yang merekam setiap elemen beserta posisinya di dokumen. Markup berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Warung Kopi Budi</title>
</head>
<body>
  <h1>Warung Kopi Budi</h1>
  <p>Selamat datang di <em>Warung Kopi Budi</em>.</p>
</body>
</html>

diubah browser menjadi pohon berikut:

html
├── head
│   └── title
└── body
    ├── h1
    └── p
        └── em

Setiap nama pada diagram adalah satu simpul pohon, dan setiap garis menghubungkan induk dengan anaknya. Teks juga tersimpan sebagai simpul, tetapi diagram di atas hanya memuat elemen agar mudah dibaca.

Tingkat kedalaman dihitung dari akar: html berada pada kedalaman pertama, head dan body pada kedalaman kedua, title, h1, dan p pada kedalaman ketiga, sedangkan em pada kedalaman keempat. Semakin dalam sebuah elemen, semakin banyak elemen pembungkus di atasnya.

Kedalaman heading juga terbaca dari ukurannya. Dokumen mini berikut memuat h1 sampai h4 — perhatikan bahwa makin dalam kedudukan heading di dalam kerangka, makin kecil ukurannya:

Ukuran yang mengecil itulah satu-satunya petunjuk visual hierarki — di baliknya, browser membentuk pohon DOM dengan relasi parent, child, dan sibling persis seperti diagram di atas.

Lima Istilah Relasi #

• Parent — induk langsung: elemen satu tingkat di atas yang membungkus elemen ini.
• Child — anak langsung: elemen satu tingkat di bawah yang dibungkus elemen ini.
• Sibling — elemen seinduk: parent sama, kedalaman sama.
• Ancestor — leluhur: parent, parent dari parent, dan seterusnya ke atas.
• Descendant — keturunan: child, child dari child, dan seterusnya ke bawah.

Perbedaan utama ada pada jarak: parent dan child terhubung langsung, sedangkan ancestor dan descendant boleh terpisah beberapa tingkat.

Tabel Relasi pada Contoh #

Tabel berikut memetakan relasi setiap elemen pada markup di atas:

Dua baris perlu dicermati. Elemen html tidak punya parent maupun sibling — posisi akar. Untuk relasi lintas tingkat: body adalah ancestor dari em (bukan parent-nya), dan em adalah descendant dari html melalui jalur html → body → p → em.

Melihat Pohon di DevTools #

Panel Elements menampilkan pohon yang persis sama: setiap elemen menjadi satu baris, dan indentasi menandai tingkat kedalaman — makin dalam indentasi, makin dalam posisi elemen. Buka halaman latihan dari chapter sebelumnya, klik kanan pada heading, pilih Inspect, dan panel Elements akan menyorot posisi elemen tersebut di dalam pohon.

Satu penghubung ke materi berikutnya: selector CSS seperti p em memilih em yang merupakan descendant dari p, dan kode JavaScript menelusuri pohon DOM dengan relasi yang sama — keduanya dibahas pada Course CSS dan Course JavaScript.

Ringkasan #

• Browser membentuk pohon DOM saat parsing; panel Elements menampilkan pohon yang sama.
• Parent dan child terhubung langsung; ancestor dan descendant boleh terpisah beberapa tingkat; sibling berbagi parent.
• Tingkat kedalaman dihitung dari akar; indentasi pada DevTools menggambarkannya.

Seluruh bagian kerangka dokumen — dari doctype hingga pohon hierarki — telah dibedah. Section berikutnya mengisi body dengan elemen-elemen konten yang sesungguhnya.