Sebagian besar elemen HTML ditulis sebagai pasangan: tag pembuka menandai awal elemen, tag penutup menandai akhirnya, dan konten berada di antara keduanya. Kita telah memakai pola ini sejak halaman pertama; sekarang aturannya dibedah sampai detail — dari sensitivitas huruf besar sampai urutan penutup yang harus mencerminkan urutan pembuka.

Aturan pasangan tag terlihat sederhana, tetapi sebagian besar galat struktur HTML berakar pada pelanggarannya. Menguasai pola ini sejak awal membuat kode kita seragam, mudah diperiksa, dan bebas dari kejutan saat browser menata ulang DOM.

Anatomi Pasangan Tag #

Elemen paragraf menampilkan pasangan lengkap dalam bentuknya yang paling sederhana:

html 
<p>Siti sedang belajar tag pembuka dan penutup.</p>

Hasil Render:

Mari kita telaah baris di atas:

  1. Baris 1 (<p>): tag pembuka — nama elemen p di dalam tanda kurung sudut.
  2. Baris 1 (Siti sedang belajar tag pembuka dan penutup.): konten elemen berupa teks yang tampil di layar.
  3. Baris 1 (</p>): tag penutup — nama elemen yang sama diawali garis miring /.

Tiga aturan mengikuti pola tersebut: garis miring hanya milik tag penutup, nama pada pembuka dan penutup harus sama persis, dan konten ditulis di antara kedua tag — tidak di dalamnya.

Nama Tag Tidak Membedakan Huruf #

Parser HTML membaca nama tag tanpa membedakan huruf besar dan huruf kecil (case-insensitive): <P> dan <p>, misalnya, dianggap elemen paragraf yang sama. Meskipun begitu, konvensi penulisan HTML modern memakai huruf kecil untuk seluruh nama elemen dan atribut.

Alasannya praktis: kode bernama huruf kecil lebih mudah dibaca, seragam dengan dokumentasi resmi, dan konsisten dengan seluruh contoh pada Course ini. Kebiasaan menulis huruf besar biasanya dibawa dari XHTML lama yang memang menganjurkannya.

Elemen Tanpa Isi #

Elemen boleh ditulis tanpa konten sama sekali. Pasangan tag kosong tetap sah:

html 
<p></p>

Elemen <p> di atas sah secara sintaks. Halaman menampilkan paragraf kosong — tidak ada teks yang tampil, tetapi elemennya tetap menempati baris tersendiri. Pola seperti ini biasa dipakai sementara sebagai penanda tempat konten yang akan diisi.

Urutan Penutup Cermin Pembuka #

Saat elemen bersarang (nesting), urutan penutup harus mencerminkan urutan pembuka: elemen yang dibuka paling akhir ditutup paling awal — seperti lapisan kotak yang dibongkar dari dalam ke luar.

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

Diagram urutan pembuka dan penutupnya:

text 
<div>          dibuka ke-1   → ditutup paling akhir
  <p>          dibuka ke-2   → ditutup ke-2
    <strong>   dibuka ke-3   → ditutup paling awal

Mari kita telaah kode di atas:

  1. Baris 1 (<div>): pembuka elemen wadah — dibuka paling awal, ditutup paling akhir.
  2. Baris 2 (<p> dan <strong>): paragraf dibuka setelah div; elemen strong dibuka paling akhir di dalam paragraf.
  3. Baris 2 (</strong> lalu </p>): strong ditutup lebih dulu, disusul p — persis kebalikan urutan pembukaan.
  4. Baris 3 (</div>): penutup terakhir untuk pembuka pertama.

Kesalahan Umum Penulisan #

Kesalahan pertama: garis miring diletakkan di tag pembuka.

html 
<p/>Siti sedang belajar HTML.</p>

Garis miring pada tag pembuka <p/> tidak menutup apa pun — parser mengabaikannya, lalu menemui tag penutup yang pasangannya sudah tidak seimbang. Hasil DOM bisa berbeda dari maksud penulis. Bentuk yang benar:

html 
<p>Siti sedang belajar HTML.</p>

Kesalahan kedua: tag penutup hilang sama sekali.

html 
<strong>Teks penting tanpa penutup

Tanpa penutup, parser memperlakukan seluruh teks setelahnya sebagai isi elemen strong dan harus menebak sendiri di mana elemen berakhir. Browser berusaha menutup elemen otomatis di akhir, tetapi hasilnya tidak selalu sesuai niat penulis. Bentuk yang benar:

html 
<strong>Teks penting lengkap dengan penutup</strong>

Ringkasan #

  • Pasangan tag terdiri dari pembuka (<p>), konten, dan penutup (</p>).
  • Nama tag tidak membedakan huruf besar/kecil; konvensi memakai huruf kecil.
  • Elemen kosong seperti <p></p> tetap sah.
  • Urutan penutup mencerminkan pembuka: elemen terdalam ditutup lebih dulu.
  • Dua kesalahan umum: garis miring di tag pembuka dan tag penutup yang hilang.

Chapter berikutnya membahas kelompok elemen khusus yang sama sekali tidak memiliki tag penutup: void element.