Dalam HTML, kita mengenal elemen (element) dan atribut (attribute). Keduanya adalah bagian inti dari dokumen HTML, dan saling melengkapi.
Apa Itu Elemen HTML?
Elemen HTML adalah bagian paling dasar dari sebuah halaman web. Elemen biasanya terdiri dari:
- Tag pembuka
- Konten
- Tag penutup
Contoh elemen lengkap:
<p>Ini adalah paragraf.</p>
Elemen bisa diartikan sebagai blok bangunan dari halaman web. Segala sesuatu—judul, paragraf, gambar, link, tabel—semuanya dibentuk dari elemen-elemen ini.
Jenis-Jenis Elemen HTML
Elemen HTML dibagi menjadi dua jenis:
1. Non-replaced Elements (atau Normal Elements)
- Elemen yang punya tag pembuka dan penutup.
- Di antara kedua tag tersebut ada konten.
Contoh:
<h1>Judul Halaman</h1>
<p>Ini isi paragrafnya</p>
2. Void Elements (atau Replaced Elements)
- Elemen yang tidak memiliki tag penutup.
- Biasanya digunakan untuk konten yang berdiri sendiri seperti gambar, garis horizontal, atau break baris.
Contoh:
<img src="gambar.jpg" alt="Deskripsi gambar" />
<br />
<hr />
<input type="text" />
Void elements tidak boleh memiliki konten di antara tag karena memang tidak punya tag penutup.
Struktur Umum Elemen
Struktur dasar sebuah elemen:
<tagname atribut="nilai">konten</tagname>
Contoh:
<a href="https://google.com">Kunjungi Google</a>
Atribut HTML
Atribut HTML adalah informasi tambahan yang disisipkan dalam tag pembuka elemen. Atribut membantu mengatur:
- Perilaku (misalnya
href
,type
,value
) - Identitas (misalnya
id
,class
,name
) - Gaya atau posisi (misalnya
style
,width
,height
) - Aksesibilitas (misalnya
alt
,aria-label
)
Contoh:
<img src="profil.jpg" alt="Foto Profil" width="200" />
Penjelasan:
src
→ lokasi file gambaralt
→ teks alternatif jika gambar gagal ditampilkanwidth
→ lebar gambar
Aturan Penulisan Atribut
- Ditulis di dalam tag pembuka
- Nilainya ditulis di dalam tanda kutip ganda
- Bisa menambahkan lebih dari satu atribut dalam satu tag
Contoh:
<input type="email" name="email" placeholder="Masukkan email Anda" />
Beberapa Atribut Umum yang Sering Digunakan
Atribut | Keterangan |
---|---|
href | Untuk membuat link |
src | Sumber file (gambar, audio, video) |
alt | Deskripsi alternatif untuk gambar |
id | Identitas unik elemen |
class | Kategori elemen, biasanya untuk CSS/JS |
style | Styling langsung ke elemen |
title | Tooltip yang muncul saat hover |
target | Mengatur cara membuka link (_blank , _self ) |
type | Jenis input (di elemen <input> ) |
Kesimpulan
- Elemen HTML adalah blok pembentuk halaman.
- Terdiri dari tag pembuka, konten, dan tag penutup (kecuali untuk void elements).
- Atribut digunakan untuk memberikan informasi tambahan atau mengatur perilaku elemen.
- Pemahaman elemen & atribut adalah pondasi utama sebelum masuk ke styling dan scripting.
Belajar elemen dan atribut HTML itu ibarat belajar mengenal bagian-bagian tubuh sebelum kamu belajar gerakannya. 😄