Tag, Elemen & Atribut

Tag, Elemen & Atribut 🏷️

Ini adalah inti dari cara kerja HTML. Semua yang ada di halaman web — teks, gambar, tombol, link — semuanya dibentuk oleh kombinasi tag, elemen, dan atribut.

Tag

Tag adalah penanda yang memberi tahu browser bagaimana memperlakukan sebuah konten. Ditulis di antara tanda < >.

Hampir semua tag HTML memiliki pasangan — tag pembuka dan tag penutup:

<p>Ini konten paragraf.</p>

• <p> — tag pembuka
• </p> — tag penutup (ada tanda /)
• Konten berada di antara keduanya

Tag Kosong (Self-Closing Tag)

Ada tag yang tidak memiliki konten dan tidak butuh tag penutup, karena fungsinya berdiri sendiri:

<br>       <!-- line break / pindah baris -->
<hr>       <!-- garis horizontal -->
<img src="foto.jpg" alt="Foto">
<input type="text">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

Di HTML5, tanda /> di akhir seperti <br /> tidak wajib, tapi tetap valid dan sering dijumpai terutama dari pengaruh XHTML.

Elemen

Elemen adalah satu kesatuan utuh — mencakup tag pembuka, isi/konten, dan tag penutup:

<h1>Selamat Datang</h1>

┌─────────────────────────────────────┐
│  <h1>   Selamat Datang   </h1>      │
│   ↑           ↑            ↑        │
│ Tag         Konten       Tag        │
│ pembuka                  penutup    │
└─────────────────────────────────────┘

Elemen juga bisa bersarang (nested) — elemen di dalam elemen lain:

<p>Teks ini <strong>sangat penting</strong> untuk dibaca.</p>

Aturan penting saat nesting: tag yang dibuka terakhir harus ditutup lebih dulu.

<!-- BENAR -->
<p><strong>Teks</strong></p>

<!-- SALAH — urutan penutup terbalik -->
<p><strong>Teks</p></strong>

Atribut

Atribut adalah informasi tambahan yang diberikan kepada sebuah elemen. Selalu ditulis di dalam tag pembuka, dengan format:

nama="nilai"

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

• href — atribut yang menentukan tujuan link
• target — atribut yang menentukan cara membuka link
• "_blank" — nilai dari atribut target (buka di tab baru)

Atribut yang Paling Sering Dipakai

id — identitas unik untuk satu elemen di seluruh halaman:

<div id="header">...</div>

class — penanda grup, bisa dipakai oleh banyak elemen:

<p class="teks-merah">Paragraf 1</p>
<p class="teks-merah">Paragraf 2</p>

src — sumber file (gambar, script):

<img src="foto.jpg">
<script src="app.js"></script>

href — tujuan link atau file CSS:

<a href="https://example.com">Link</a>
<link href="style.css" rel="stylesheet">

alt — teks alternatif jika gambar gagal dimuat:

<img src="foto.jpg" alt="Foto profil saya">

style — CSS langsung di elemen (inline style):

<p style="color: red; font-size: 18px;">Teks merah</p>

title — tooltip yang muncul saat mouse diarahkan ke elemen:

<p title="Ini adalah tooltip">Arahkan mouse ke sini</p>

Boolean attribute — atribut yang tidak butuh nilai, cukup ditulis namanya:

<input type="checkbox" checked>
<input type="text" disabled>
<video controls autoplay>

Satu Elemen, Banyak Atribut

Sebuah elemen bisa memiliki lebih dari satu atribut sekaligus, dipisah dengan spasi:

<img 
  src="foto-profil.jpg" 
  alt="Foto Profil" 
  width="200" 
  height="200" 
  class="foto-bulat" 
  id="foto-utama"
>

💡 Urutan atribut tidak mempengaruhi fungsi, tapi konvensi umum menempatkan id dan class lebih awal untuk keterbacaan.

Ringkasan Perbedaan

💡 Tips: Kesalahan paling umum pemula adalah lupa menutup tag atau salah urutan nesting. Biasakan menggunakan editor seperti VS Code yang akan memberi highlight otomatis jika ada tag yang tidak tertutup.