Langsung ke konten

Apa itu Element dan Tag?

Pelajari perbedaan element, tag, dan attribute dalam HTML. Pahami opening tag, closing tag, self-closing tag, dan nested elements.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami struktur dokumen HTML dan menyiapkan editor code, saatnya kita memahami komponen dasar penyusun HTML.

Element, Tag, dan Attribute

Tiga istilah ini sering tertukar-tukar. Padahal masing-masing punya arti berbeda. Mari kita bedah satu per satu.

Apa itu Tag?

Tag adalah tanda kurung sudut yang membungkus nama elemen. Tag berfungsi sebagai penanda awal dan akhir dari sebuah elemen.

Contoh tag pembuka: <p> Contoh tag penutup: </p>

Tag selalu ditulis dengan huruf kecil dan tidak ada spasi di antara tanda < dan >.

Apa itu Element?

Element adalah keseluruhan komponen HTML yang terdiri dari tag pembuka, konten, dan tag penutup.

<p>Ini adalah paragraf</p>

Di atas adalah satu elemen HTML. Elemen ini terdiri dari:

  • Opening tag — <p>
  • Content — “Ini adalah paragraf”
  • Closing tag — </p>

Jadi element = opening tag + content + closing tag.

Apa itu Attribute?

Attribute adalah informasi tambahan yang ditambahkan ke tag untuk memberikan pengaturan lebih lanjut.

<a href="https://google.com">Kunjungi Google</a>

Di atas, href adalah attribute yang memberi tahu tag <a> ke mana link harus mengarah. Attribute selalu ditulis di dalam opening tag.

Jenis-Jenis Tag

Opening Tag dan Closing Tag

Kebanyakan elemen HTML punya dua tag: pembuka dan penutup.

<p>Paragraf ini punya opening tag dan closing tag</p>

Closing tag selalu ditulis dengan karakter / sebelum nama tag. Karakter ini menandakan bahwa elemen sudah berakhir.

Self-Closing Tag

Beberapa elemen tidak perlu closing tag karena tidak punya konten. Elemen ini disebut self-closing tag.

<img src="foto.jpg" alt="Foto profil" />
<br />
<hr />

Contoh self-closing tag:

  • <img> — Menampilkan gambar
  • <br> — Membuat baris baru
  • <hr> — Membuat garis horizontal

Kamu bisa menulis self-closing tag dengan atau tanpa karakter / di akhir. Keduanya valid di HTML5.

Nested Elements (Element Bersarang)

Element bisa diletakkan di dalam element lain. Ini disebut nesting.

<p>Saya sedang belajar <strong>HTML</strong> untuk pemula.</p>

Di atas, tag <strong> bersarang di dalam tag <p>. Hasilnya, teks “HTML” akan tampil tebal.

Aturan nesting yang benar:

  • Tag yang dibuka paling dalam harus ditutup paling dulu
  • Jangan tumpang tindih (overlapping)

Contoh yang benar:

<p><strong>Teks tebal</strong></p>

Contoh yang salah:

<p><strong>Teks tebal</p></strong>

Attribute dalam HTML

Attribute memberikan informasi tambahan pada elemen. Setiap attribute punya nilai yang ditulis di dalam tanda kutip.

Jenis-Jenis Attribute

Attribute boolean — Tidak perlu nilai, keberadaannya sudah cukup:

<input disabled />
<button type="submit">Kirim</button>

Attribute dengan nilai — Punya nilai tertentu:

<img src="foto.jpg" alt="Foto profil" />
<a href="https://google.com">Google</a>

Multiple attributes — Satu tag bisa punya lebih dari satu attribute:

<input type="text" placeholder="Nama lengkap" required />

Best Practice Penulisan Attribute

  • Gunakan tanda kutip ganda (") untuk semua nilai attribute
  • Pisahkan attribute dengan spasi
  • Gunakan huruf kecil untuk nama attribute
  • Hindari attribute yang sudah deprecated (tidak digunakan lagi)

Contoh Lengkap

Berikut contoh yang menggabungkan semua konsep:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Belajar Element HTML</title>
  </head>
  <body>
    <h1>Daftar Belanja</h1>
    <ul>
      <li>Apel</li>
      <li>Pisang</li>
      <li>Mangga</li>
    </ul>
    <p>Kunjungi <a href="https://google.com">Google</a> untuk mencari resep.</p>
  </body>
</html>

Mari kita bedah kode di atas:

  • <html lang="id"> — Element root dengan attribute lang
  • <meta charset="UTF-8" /> — Self-closing tag dengan attribute charset
  • <ul> — Unordered list (list tanpa urutan)
  • <li> — List item (isi dari list)
  • <a href="..."> — Anchor/link dengan attribute href

Ringkasan

  • Tag adalah tanda < > yang membungkus nama elemen
  • Element adalah keseluruhan komponen: opening tag + content + closing tag
  • Attribute adalah informasi tambahan di dalam tag
  • Opening tag dan closing tag harus sejajar, tidak boleh tumpang tindih
  • Self-closing tag tidak perlu closing tag karena tidak punya konten
  • Element bisa bersarang di dalam element lain (nesting)

Langkah Selanjutnya

Sekarang kamu memahami apa itu element, tag, dan attribute. Di artikel selanjutnya, kita akan belajar menggunakannya secara praktis — mulai dari heading, paragraph, hingga line break.