Tag, Elemen, dan Atribut

Analogi: Label pada Kardus Pindahan

Bayangkan kamu sedang pindahan rumah. Kamu mengambil kardus kosong, menempel label "BUKU" di sisi luarnya, mengisinya dengan buku, lalu menutup kardusnya. Label itu memberi tahu semua orang: kardus ini berisi buku, perlakukan dengan semestinya.

Tag HTML bekerja seperti label itu. Tag pembuka <p> berkata "mulai dari sini, isinya adalah paragraf", lalu tag penutup </p> berkata "paragrafnya selesai sampai sini". Teks di antara kedua label itulah isi kardusnya. Dan seperti kardus yang bisa ditempeli catatan tambahan ("JANGAN DIBANTING"), tag bisa diberi atribut: info tambahan seperti link tujuan atau teks alternatif gambar.

Kenapa Konsep Ini Ada?

Sebelum HTML, teks di komputer hanyalah teks polos. Sebuah file berisi "Bab 1" dan "ini isi babnya" tidak memberi tahu komputer mana yang judul dan mana yang isi. Manusia bisa menebak dari ukuran huruf atau posisi, tapi komputer tidak bisa menebak. Ia butuh penanda yang eksplisit dan tidak ambigu.

Di sinilah tag memecahkan masalah: tag memberi makna terstruktur pada teks. Dengan menulis <h1>Bab 1</h1>, kamu berkata dengan tegas ke browser: "ini judul utama, bukan teks biasa". Browser lalu tahu cara menampilkannya, mesin pencari tahu ini topik halaman, dan aplikasi pembaca layar tahu harus membacakannya sebagai judul. Satu penanda kecil, tiga pihak terbantu.

Elemen adalah istilah untuk keseluruhan paketnya: tag pembuka + isi + tag penutup. Atribut lahir dari kebutuhan berikutnya: kadang makna saja tidak cukup, kita butuh detail. Tag <a> berkata "ini link", tapi link ke mana? Atribut href menjawabnya. Tanpa atribut, HTML akan butuh ratusan tag berbeda untuk setiap variasi kebutuhan.

Tag vs Elemen: Jangan Tertukar

Banyak pemula memakai dua kata ini bergantian, padahal maknanya beda dan developer profesional membedakannya dengan tegas:

• Tag: tanda pembukanya saja (atau penutupnya saja). Contoh: <p> adalah tag pembuka, </p> adalah tag penutup.
• Elemen: paket lengkap, yaitu tag pembuka + isi + tag penutup. Contoh: <p>Halo</p> adalah satu elemen paragraf yang utuh.

Jadi kalau kamu menulis <h1>Judul</h1>, kamu membuat satu elemen h1 yang terdiri dari dua tag. Membedakan keduanya penting karena dokumentasi dan error browser sering memakai istilah yang tepat: "elemen tidak tertutup" artinya kamu lupa tag penutupnya.

Contoh 1: elemen paling sederhana yang bisa kamu buat, sebuah paragraf:

<p>Halo, ini paragraf pertamaku.</p>

Bedah: <p> adalah tag pembuka, "Halo, ini paragraf pertamaku." adalah isi (content), </p> adalah tag penutup. Ketiganya bersama-sama membentuk satu elemen p.

Contoh 2: elemen yang lebih realistis, memakai atribut dan elemen bersarang seperti di halaman sungguhan:

<p>
  Baca panduan lengkapnya di
  <a href="https://example.com/panduan" title="Panduan lengkap">situs kami</a>.
</p>
<img src="kucing.jpg" alt="Kucing oranye sedang tidur" />

Di sini elemen p berisi teks plus sebuah elemen a di dalamnya (ini disebut nesting, elemen di dalam elemen). Elemen a punya dua atribut: href (tujuan link) dan title (teks yang muncul saat kursor diarahkan ke link). Elemen img adalah void element: ia tidak punya isi dan tidak butuh penutup, cukup atribut src dan alt.

Tag Berpasangan dan Tag Tunggal

Sebagian besar tag butuh penutup: <p>...</p>, <h1>...</h1>, <div>...</div>, <a>...</a>.

Sebagian tidak punya isi sehingga tidak butuh penutup, disebut void element: <img>, <br>, <hr>, <meta>, <input>. Di HTML5, garis miring di akhir itu opsional, jadi <br> sama sahnya dengan <br />. Menulis garis miringnya membuat kode lebih jelas dan konsisten, jadi biasakan memakainya.

Atribut: Info Tambahan untuk Tag

Atribut ditulis di dalam tag pembuka dengan pola nama="nilai". Tiga aturan main yang tidak bisa ditawar:

1. Selalu pakai tanda kutip untuk nilai. Nilai tanpa kutip kadang jalan, tapi pecah begitu nilainya mengandung spasi.
2. Nama atribut huruf kecil semua, misalnya href bukan HREF.
3. Urutan atribut bebas, tapi jadilah konsisten. Kebiasaan umum: atribut identitas dulu (id, class), lalu atribut fungsional (src, href, alt).

Atribut juga bisa dipakai banyak browser dan teknologi bantu untuk hal penting. Atribut alt pada gambar misalnya, dibaca oleh aplikasi pembaca layar untuk pengguna tunanetra. Jadi atribut bukan sekadar tempelan, ia bagian dari cara halamanmu berkomunikasi dengan dunia.

Kesalahan Umum Pemula

Salah: Lupa menutup tag, lalu heran kenapa seluruh halaman jadi miring atau jadi link.

<p>Ini paragraf <em>dengan penekanan yang lupa ditutup.
<p>Paragraf berikutnya ikut miring tanpa sengaja.</p>

Benar: Setiap tag berpasangan wajib ditutup di tempat yang tepat.

<p>Ini paragraf <em>dengan penekanan yang ditutup benar</em>.</p>
<p>Paragraf berikutnya tampil normal.</p>

Salah: Menulis atribut tanpa tanda kutip karena terlihat lebih ringkas.

<img src=kucing tidur.jpg alt=kucing>

Benar: Selalu pakai kutip. Tanpa kutip, browser mengira nilai atribut berhenti di spasi pertama, sehingga gambar gagal dimuat.

<img src="kucing tidur.jpg" alt="kucing" />

Salah: Menutup tag bersarang dengan urutan yang salah, seperti menutup kardus luar sebelum kardus dalam.

<p><strong>teks penting</p></strong>

Benar: Tag yang dibuka terakhir harus ditutup pertama (prinsip LIFO, seperti menumpuk piring).

<p><strong>teks penting</strong></p>

Catatan teknis: Browser modern punya algoritma "error recovery" yang mencoba memperbaiki tag yang salah secara diam-diam. Hasil tebakannya kadang benar, kadang tidak, dan perilakunya bisa berbeda antar browser. Jangan pernah mengandalkan mekanisme ini. Validator HTML gratis di validator.w3.org bisa memeriksa kodemu dan menunjukkan tag mana yang bermasalah.

Rangkuman

Tag adalah label pembuka dan penutup, elemen adalah paket lengkap berisi keduanya plus isinya, dan atribut adalah info tambahan di dalam tag pembuka. Ketiganya ada untuk memecahkan masalah mendasar: memberi makna eksplisit pada teks agar browser, mesin pencari, dan teknologi bantu bisa memprosesnya dengan benar. Kuasai kosakata ini karena seluruh sisa seri HTML dibangun dari ketiganya.