Elemen dan atribut HTML
Dalam pemrograman web, khususnya dalam HTML (HyperText Markup Language), terdapat tiga komponen utama yang perlu dipahami: tag, elemen, dan atribut. Memahami ketiganya akan membantu dalam membangun struktur halaman web yang baik dan fungsional.
1. Tag HTML
Tag adalah penanda yang digunakan untuk memberitahu browser bagaimana suatu konten harus ditampilkan. Tag biasanya ditulis dalam kurung sudut (`< >`) dan umumnya berpasangan: tag pembuka dan tag penutup. Tag pembuka menandai awal elemen, sedangkan tag penutup menandai akhir elemen dengan tambahan garis miring (`/`) sebelum nama tag.
Contoh:
Ini adalah sebuah paragraf.
Pada contoh di atas, `
` adalah tag pembuka untuk paragraf, dan `
` adalah tag penutupnya.
Beberapa tag bersifat self-closing atau tidak memerlukan tag penutup, seperti `<img>` untuk menampilkan gambar dan `
` untuk pindah baris.
Contoh:
<img src="gambar.jpg" alt="Deskripsi gambar">
2. Elemen HTML
Elemen merupakan keseluruhan dari tag pembuka, isi, dan tag penutup. Elemen dapat berisi teks, elemen lain (disebut sebagai nested elements), atau bisa juga kosong (seperti elemen self-closing).
Contoh elemen dengan teks:
<h1>Judul Utama</h1>
Dalam contoh ini, `< h1 >` adalah tag pembuka, `Judul Utama` adalah isi elemen, dan `</ h1 >` adalah tag penutup.
Contoh elemen bersarang:
<div>
<p>Paragraf dalam div.</p>
</div>
Di sini, elemen `< div >` berisi elemen `< p >`, menunjukkan bahwa elemen dapat bersarang satu sama lain.
3. Atribut HTML
Atribut memberikan informasi tambahan tentang suatu elemen dan dituliskan di dalam tag pembuka. Atribut terdiri dari pasangan nama dan nilai, dengan format `nama="nilai"`.
Contoh penggunaan atribut:
<a href="https://www.contoh.com" target="_blank">Kunjungi Situs</a>
Pada contoh di atas:
- `<a>` adalah tag untuk membuat hyperlink.
- `href="https://www.contoh.com"` adalah atribut yang menentukan URL tujuan.
- `target="_blank"` adalah atribut yang menentukan bahwa link akan dibuka di tab atau jendela baru.
Beberapa atribut umum dalam HTML meliputi:
- `href`: Menentukan URL tujuan pada tag `<a>`.
- `src`: Menentukan sumber file pada tag seperti `<img>` atau `<script>`.
- `alt`: Memberikan teks alternatif pada tag `<img>`, berguna jika gambar tidak dapat ditampilkan.
- `style`: Menambahkan gaya CSS langsung pada elemen.
- `id`: Memberikan identitas unik pada elemen.
- `class`: Mengelompokkan elemen dengan kelas yang sama untuk styling atau scripting.
Contoh penggunaan atribut lainnya:
<img src="logo.png" alt="Logo Perusahaan" width="200" height="100">
Di sini, tag `<img>` memiliki atribut `src` untuk menentukan lokasi gambar, `alt` untuk deskripsi gambar, serta `width` dan `height` untuk menentukan ukuran gambar.
Dengan memahami tag, elemen, dan atribut dalam HTML, Anda dapat membangun struktur dokumen web yang terorganisir dan mudah dipahami, baik oleh browser maupun oleh pengembang lain.