Kalau di artikel sebelumnya kita sudah kenalan dengan apa itu HTML, sekarang saatnya melangkah ke hal yang paling sering ditemui saat menulis kode HTML: Tag dan Elemen.
Tenang, kita bahas pelan-pelan biar gampang dipahami 👌.
Apa Itu Tag ?
Bayangkan kamu lagi menulis surat.
Kamu pasti butuh pembuka (“Halo…”) dan penutup (“Salam hangat…”).
Nah, HTML juga punya cara komunikasi yang mirip: menggunakan tag.
- Tag pembuka →
<p> - Tag penutup →
</p>
Contoh:
<p>Halo, saya lagi belajar HTML!</p>Tag ini memberi tahu browser:
“Eh, teks di dalam sini itu paragraf, ya.”
Apa Itu Elemen ?
Kalau tag itu cuma pembuka dan penutupnya, maka elemen adalah keseluruhan “paketnya”.
Mulai dari tag pembuka, isi/konten, sampai tag penutup.
Contoh elemen paragraf:
<p>Ini adalah satu elemen paragraf lengkap.</p>👉 Jadi elemen = tag pembuka + isi + tag penutup
Tag Tanpa Penutup (Self-Closing Tag)
Tidak semua tag butuh penutup, lho.
Ada beberapa yang cukup self-closing, alias menutup dirinya sendiri.
Contoh paling terkenal:
<br>
<img src="gambar.png" alt="Deskripsi gambar"><br>→ buat baris baru (enter).<img>→ untuk menampilkan gambar.
Ilustrasi Singkat
Bayangkan kamu punya kotak:
- Tag pembuka = tutup kotak bagian atas
- Isi = barang yang ada di dalam kotak
- Tag penutup = tutup kotak bagian bawah
Kalau salah satu tutupnya hilang? Barang bisa berantakan, dan browser juga bisa bingung membaca kode kita.
Yuk, Latihan Kecil 🚀
Coba ketik kode berikut di editor HTML kamu:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag dan Elemen</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah paragraf pertama saya.</p>
<br>
<img src="https://via.placeholder.com/150" alt="Contoh Gambar">
</body>
</html>Lalu buka di browser.
Kamu akan melihat judul besar, sebuah paragraf, baris kosong, dan gambar sederhana.
Kesimpulan
- Tag → penanda pembuka & penutup.
- Elemen → tag pembuka + isi + tag penutup.
- Ada juga self-closing tag yang tidak butuh penutup.
Dengan memahami ini, kamu sudah selangkah lebih dekat jadi jagoan HTML 💪.