Elemen, Tag, dan Atribut
Tiga Komponen Utama HTML
Dalam HTML, terdapat tiga konsep fundamental yang harus dipahami: Tag, Elemen, dan Atribut.
1. Apa itu Tag?
Tag adalah penanda atau perintah dalam HTML yang diapit oleh tanda kurung siku < >. Tag memberitahu browser bagaimana sebuah konten harus ditampilkan.
Secara umum, tag berpasangan:
-
Tag Pembuka:
<nama_tag> -
Tag Penutup:
</nama_tag>(menggunakan tanda garis miring/)
Contoh:
<p>Ini adalah paragraf</p>
Self-Closing Tag / Void Elements
Beberapa tag tidak membutuhkan tag penutup karena tidak membungkus konten teks. Tag ini disebut Void Elements.
Contoh:
-
<br>(Line break / ganti baris) -
<hr>(Horizontal rule / garis mendatar) -
<img>(Menampilkan gambar) -
<input>(Elemen input form)
2. Apa itu Elemen?
Elemen adalah keseluruhan komponen dari tag pembuka, isi konten, hingga tag penutup.
Anatomi Elemen HTML:
Tag Pembuka Konten Tag Penutup
┌─────────────┐ ┌──────────┐ ┌──────────────┐
<p> Hello World </p>
└───────────────────────────────────────────┘
ELEMEN HTML
3. Apa itu Atribut?
Atribut adalah informasi tambahan yang diberikan pada tag pembuka untuk mengatur perilaku atau tampilan elemen tersebut.
Atribut ditulis dalam format nama="nilai".
Contoh:
<a href="https://google.com" target="_blank">Kunjungi Google</a>
<img src="gambar.jpg" alt="Pemandangan" width="500">
Penjelasan Atribut di Atas:
-
href: Menyimpan URL tujuan pada link (<a>). -
target="_blank": Membuka link di tab baru. -
src: Alamat/path file gambar (<img>). -
alt: Teks alternatif jika gambar gagal dimuat.
Atribut Global (Global Attributes)
Atribut global adalah atribut yang dapat digunakan pada hampir semua elemen HTML:
| Atribut | Kegunaan |
|---|---|
id |
Identifier unik untuk satu elemen tertentu |
class |
Penanda kelompok elemen (biasanya digunakan untuk CSS) |
style |
Menambahkan gaya/CSS langsung pada elemen (inline style) |
title |
Menampilkan tooltip saat kursor mengarah ke elemen |
hidden |
Sembunyikan elemen dari tampilan halaman |
Contoh penggunaan:
<h1 id="judul-utama" class="teks-merah" title="Judul Halaman">
Selamat Datang
</h1>
