Void Elements

Seluruh elemen pada chapter sebelumnya ditulis berpasangan: opening tag di awal, closing tag di akhir. HTML juga mengenal sekelompok kecil elemen tanpa konten yang closing tag-nya dilarang; kelompok ini disebut void elements. Kita telah memakainya sejak dokumen pertama: elemen meta di dalam head adalah void element. Pada Chapter ini kita mengenal definisinya, daftar resminya, kebiasaan self-closing slash, dan alasan void element tidak boleh berisi apa pun.

Apa itu Void Element #

Void element adalah elemen yang hanya memiliki opening tag. Standar WHATWG merangkumnya: end tag tidak boleh ditulis untuk void element, dan void element tidak dapat berisi konten apa pun karena tidak ada end tag tempat menaruhnya. Bentuknya selalu satu baris singkat:

<br>
<hr>

Elemen <br> memecah baris di dalam paragraf, sedangkan <hr> menampilkan garis pemisah horizontal; keduanya tidak perlu membungkus apa pun.

Daftar Resmi Void Elements #

Standar menetapkan jumlahnya tegas: hanya 13 elemen berstatus void. Selain itu, seluruh elemen HTML lain wajib punya closing tag bila memiliki konten.

Sebagian elemen di atas baru terasa relevansi nanti: img pada section Images dan Media, input pada section Forms, sedangkan meta, link, dan base pada pembahasan metadata. Sehari-hari, kita paling sering bertemu br, hr, img, input, meta, dan link.

Self-Closing Slash: Warisan XHTML #

Pada era XHTML, void element wajib ditulis dengan garis miring sebelum kurung tutup, misalnya <br />. HTML5 mempertahankan kebiasaan itu sebagai jembatan kompatibilitas: garis miring pada void element sah dan tidak berpengaruh bagi parser, sehingga <br> dan <br/> diperlakukan identik. Garis miring itu hanyalah peninggalan gaya, bukan penanda yang berfungsi.

Kebalikannya perlu diwaspadai: garis miring pada elemen non-void, misalnya <p/>, merupakan parse error. Browser mengabaikannya dan tetap menunggu closing tag, sehingga paragraf yang diniatkan menutup diri sendiri justru menangkap konten berikutnya.

Void Element Diberi Konten: yang Terjadi di Parser #

Bila void element diberi konten, apa yang terjadi? Menulis closing tag untuk void element adalah parse error, dan parser menanganinya dengan cara yang mengejutkan: tag </br> diperlakukan seolah-olah <br>, alias membuat baris baru tambahan.

<p>Baris satu<br>Baris dua</br></p>

Hasilnya: “Baris satu”, “Baris dua”, lalu baris kosong sisa <br> kedua. Teks setelah opening tag void element pun bukan “isinya”, melainkan konten elemen induk — tidak ada mekanisme “di dalam” pada elemen tanpa end tag.

Contoh Lengkap dalam Satu File #

File berikut memakai beberapa void element sekaligus, lengkap dengan gambar gambar-contoh.svg yang disertakan agar contoh menampilkan gambar nyata. Simpan keduanya di folder yang sama, lalu buka file HTML di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Void Elements</title>
</head>
<body>
  <h1>Menu warung Siti</h1>
  <p>Soto ayam<br>Es teh manis jumbo</p>
  <hr>
  <img src="gambar-contoh.svg" alt="Gambar semangkuk soto ayam" width="120" height="120">
  <p>Semua hidangan dibuat saat dipesan.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Menu warung Siti"
  - Paragraf "Soto ayam" dan "Es teh manis jumbo" pada dua baris berbeda
  - Garis pemisah horizontal
  - Gambar semangkuk soto dari file gambar-contoh.svg
  - Paragraf penutup "Semua hidangan dibuat saat dipesan."

Mari kita telaah void element yang bekerja pada file di atas:

1. Baris 4-5 (dua <meta>): metadata dokumen tanpa closing tag, sebagaimana sifat void element.
2. Baris 10 (<br>): memecah paragraf menjadi dua baris tanpa menutup apa pun.
3. Baris 11 (<hr>): garis pemisah yang berdiri sendiri.
4. Baris 12 (<img>): membawa atribut src, alt, width, dan height; tidak ada </img> di mana pun.
5. Baris 13 (<p>): konten setelah img adalah isi body, bukan isi img — img tidak punya “isi”.

Sampai di sini kita telah menguasai anatomi penulisan HTML: elemen, atribut, sarang yang benar, dan elemen tanpa closing tag. Keahlian kecil tersisa sebelum masuk ke konten teks: menampilkan karakter yang dipakai sintaks HTML itu sendiri. Chapter Karakter Khusus HTML menutup rangkaian section ini.

Referensi resmi untuk pendalaman:

• WHATWG — HTML Living Standard: Void elements
• MDN Web Docs — Elements index
• MDN Web Docs — Elemen br
• MDN Web Docs — Elemen img

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Void Elements</title>
</head>
<body>
  <h1>Menu warung Siti</h1>
  <p>Soto ayam<br>Es teh manis jumbo</p>
  <hr>
  <img src="gambar-contoh.svg" alt="Gambar semangkuk soto ayam" width="120" height="120">
  <p>Semua hidangan dibuat saat dipesan.</p>
</body>
</html>