Parent dan Child

Elemen HTML jarang berdiri sendiri. Satu elemen biasanya berada di dalam elemen lain, dan elemen yang berada di dalamnya bisa memuat elemen lain lagi. Susunan berjenjang seperti ini membentuk pohon dokumen — struktur yang menjadi rujukan CSS dan JavaScript saat mencari elemen.

Istilah parent, child, dan sibling adalah kosakata baku untuk membaca pohon tersebut. Chapter ini memperkenalkan ketiganya beserta aturan dasar relasinya.

Parent dan Child #

Elemen yang memuat elemen lain secara langsung disebut parent (induk); elemen yang berada langsung di dalamnya disebut child (anak). Relasi ini ditentukan murni oleh penyarangan pada kode — bukan oleh jenis elemennya.

Contoh pertama, daftar dengan butirnya:

<ul>
  <li>Kopi susu</li>
  <li>Teh melati</li>
</ul>

Hasil Render:

Mari kita telaah kode di atas:

1. Baris 1 (<ul>): parent — wadah daftar yang memuat kedua butir.
2. Baris 2-3 (<li>...</li>): child — dua anak langsung dari <ul>, sekaligus sibling satu sama lain.
3. Baris 2-3 (teks di dalam li): teks bukan elemen, sehingga tidak disebut child.

Contoh kedua memakai div dan p:

<div>
  <p>Budi membuka toko kopi sejak 2020.</p>
</div>

Pada contoh kedua, <div> adalah parent dan <p> adalah child-nya. Polanya sama dengan contoh pertama — hanya jenis elemennya yang berbeda.

Diagram Pohon Tiga Generasi #

Satu elemen bisa menjadi parent dan child sekaligus. Perhatikan tiga generasi berikut:

<div>
  <p>Budi menyukai kopi <strong>pekat</strong>.</p>
</div>

Bentuk pohonnya:

div
└── p            parent bagi strong, child bagi div
    └── strong   child bagi p

Pada diagram tersebut: <div> adalah parent dari <p>; <p> adalah child dari <div> sekaligus parent dari <strong>; dan <strong> adalah child dari <p>. Elemen p memainkan dua peran pada saat yang sama.

Satu istilah tambahan penting: descendant (keturunan) berarti elemen di semua tingkat di bawahnya. Elemen <strong> adalah descendant dari div, tetapi bukan child dari div — child selalu relasi satu tingkat saja.

Tabel Istilah Relasi #

Istilah-istilah ini dipakai di dokumentasi MDN, DevTools, dan diskusi CSS, jadi hafalkan maknanya:

Catatan soal Blok dan Inline #

Sebagian elemen tampil sebagai blok yang memenuhi baris, sebagian mengalir di dalam baris teks. Perbedaan blok vs inline memengaruhi elemen apa yang pantas menjadi child, tetapi pembahasan lengkapnya menunggu Section text-dan-semantics. Untuk sekarang, cukup kuasai konsepnya: parent memuat child, dan child dapat menjadi parent bagi elemen berikutnya — sampai konten paling dalam.

Ringkasan #

• Parent memuat elemen lain secara langsung; child berada langsung di dalamnya.
• Elemen dapat menjadi parent dan child sekaligus pada pohon dokumen.
• Sibling adalah elemen-elemen yang parent-nya sama.
• Child selalu satu tingkat; descendant mencakup semua tingkat di bawahnya.
• Relasi ditentukan penyarangan pada kode, bukan jenis elemen.

Chapter berikutnya beralih ke sisi lain dari elemen: atribut — informasi tambahan yang menempel pada tag pembuka.