Nested Elements

Contoh-contoh sejauh ini menampilkan elemen yang berdiri sejajar, satu demi satu. Halaman web nyata tersusun dari elemen yang bersarang (nested): elemen berada di dalam elemen lain, kadang beberapa tingkat kedalaman. Penulisan bersarang memiliki aturan yang ketat; melanggarnya jarang membuat halaman gagal tampil, tetapi struktur yang terbentuk di dalam browser bisa berbeda dari maksud kita. Pada Chapter ini kita mempelajari pola nesting yang benar, bahaya penyilangan tag, dan aturan konten model yang membatasi isi tiap elemen.

Sarang yang Benar: Elemen Sepenuhnya di Dalam #

Aturan dasarnya satu kalimat: setiap elemen harus sepenuhnya berada di dalam elemen yang membungkusnya. Tag penutup pun harus mengikuti urutan terbalik dari tag pembuka; elemen yang terakhir dibuka wajib ditutup lebih dulu. Dengan dua aturan ini, tingkat kedalaman terbentuk seperti kotak di dalam kotak yang rapi:

<div>            ← tingkat pertama dibuka
  <div>          ← tingkat kedua dibuka
    <p>...</p>   ← tingkat ketiga
  </div>         ← tingkat kedua ditutup dulu
</div>           ← tingkat pertama ditutup terakhir

Elemen <div> pada ilustrasi di atas adalah wadah generik untuk mengelompokkan konten; kita memakainya di sini karena sifatnya netral, sedangkan alternatif semantiknya dibahas pada section Semantic HTML. Perhatikan pula indentasi dua spasi per tingkat. Parser tidak membutuhkan indentasi, tetapi manusia yang membaca kode sangat terbantu olehnya.

Contoh Bersarang Tiga Tingkat #

File berikut menerapkan pola di atas: satu wadah warung berisi heading dan wadah menu, sedangkan wadah menu berisi dua paragraf. Simpan sebagai nesting-benar.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Elemen Bersarang</title>
</head>
<body>
  <div class="warung">
    <h1>Warung Siti</h1>
    <div class="menu">
      <p>Soto ayam khas Lamongan.</p>
      <p>Es teh manis jumbo.</p>
    </div>
  </div>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Warung Siti"
  - Dua paragraf menu: "Soto ayam khas Lamongan." dan "Es teh manis jumbo."
  - Teks "Elemen Bersarang" pada tab browser

Mari kita telaah pola bersarangnya:

1. Baris 9 (<div class="warung">): wadah tingkat pertama dibuka dan belum ditutup.
2. Baris 10 (<h1>): elemen heading berada sepenuhnya di dalam wadah warung.
3. Baris 11 (<div class="menu">): wadah tingkat kedua dibuka di dalam wadah pertama.
4. Baris 12-13 (<p>): dua paragraf sebagai tingkat ketiga, sepenuhnya di dalam wadah menu.
5. Baris 14-15 (dua </div>): tag penutup mengikuti urutan terbalik; wadah menu ditutup lebih dulu, barulah wadah warung.

Penyilangan Tag: Kesalahan yang Menipu Parser #

Kesalahan klasiknya adalah menutup tag dengan urutan yang salah sehingga dua elemen saling menimpa sebagian. Contoh berikut memakai elemen <b> (tebal) dan <i> (miring) — keduanya dibahas tuntas pada section Teks dan Formatting, kita pinjam dulu karena ilustrasinya paling mudah dibaca:

<p>Menu <b>favorit <i>Budi</b> dan Siti</i> hari ini.</p>

Menurut niat penulis, <i> berada penuh di dalam <b>. Kenyataannya tag </b> ditulis ketika <i> masih terbuka, sehingga terjadi penyilangan (overlapping). Parser tidak berhenti dan tidak selalu menampilkan galat; parser menjalankan proses pemulihan (error recovery) lalu membentuk DOM versinya sendiri: elemen <b> ditutup lebih awal, sementara teks " dan Siti" berada di dalam elemen <i> kedua yang berdiri di luar <b>.

Akibatnya struktur DOM tidak sesuai niat, padahal teks yang tampil kelihatan cukup benar. Bug semacam ini menipu karena CSS maupun JavaScript yang menempel pada struktur ikut bekerja di tempat yang salah.

Aturan Konten Model: Blok dan Inline #

Setiap elemen HTML punya content model, yaitu daftar jenis isi yang diizinkan untuk elemen tersebut. Dua kelompok yang paling sering kita jumpai adalah elemen blok dan elemen inline. Aturan praktisnya: elemen blok boleh berisi elemen inline dan teks, sedangkan elemen inline tidak boleh berisi elemen blok.

Batasan ini paling terasa pada elemen p. Menurut referensi resmi, model konten elemen p hanyalah phrasing content, sehingga p maupun heading h1-h6 tidak boleh berisi elemen blok seperti div. Bila kita tetap menulisnya, parser menutup <p> yang terbuka secara otomatis sebelum memulai <div>:

<p>Soto favorit <div>Siti</div></p>

Struktur yang terbentuk ternyata bukan satu paragraf berisi div, melainkan elemen sejajar: paragraf “Soto favorit “, lalu div “Siti”, lalu sebuah paragraf kosong sisa tag penutup </p>. Halaman tetap tampil, tetapi jarak dan struktur elemen berbeda dari rancangan kita.

Kini kita dapat menulis elemen dengan atribut, bersarang rapi, dan menghindari penyilangan. Satu kelompok elemen belum kita bahas pola penutupnya: elemen yang memang tidak punya closing tag. Chapter Void Elements berikutnya membahas daftar resminya beserta aturan khususnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen p
• WHATWG — HTML Living Standard: Elements
• 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>Elemen Bersarang</title>
</head>
<body>
  <div class="warung">
    <h1>Warung Siti</h1>
    <div class="menu">
      <p>Soto ayam khas Lamongan.</p>
      <p>Es teh manis jumbo.</p>
    </div>
  </div>
</body>
</html>