Kalau kamu sering ngoding pakai HTML, pasti pernah lihat atribut id. Tapi, apa sih sebenarnya fungsi dari id ini? Nah, di artikel ini kita bakal kupas tuntas tentang id attribute di HTML, perbedaannya dengan class, cara bikin bookmark, sampai penggunaannya di JavaScript. Yuk, langsung gaspol!
1. Apa Itu id Attribute?
id adalah atribut unik yang bisa dipakai buat menandai satu elemen HTML. Uniknya, dalam satu halaman HTML, nggak boleh ada dua elemen yang punya id yang sama. Ini penting banget buat styling, navigasi, atau manipulasi elemen pakai JavaScript.
Contoh Penggunaan id:
<p id="intro">Halo, selamat datang di blog ini!</p>Hasilnya:
Di contoh di atas, kita kasih id dengan nama “intro” ke paragraf pertama.
2. Perbedaan Antara id dan class
Banyak yang masih bingung antara id dan class. Gampangnya, id itu spesial buat satu elemen aja, sementara class bisa dipakai buat banyak elemen sekaligus.
Contoh id:
<p id="judul">Ini Judul</p>Hasilnya:
Contoh class:
<p class="deskripsi">Ini deskripsi pertama.</p>
<p class="deskripsi">Ini deskripsi kedua.</p>Hasilnya:
Kalau class, bisa dipakai buat beberapa elemen, jadi lebih fleksibel buat styling pakai CSS.
3. HTML Bookmarks dengan ID dan Links
Kamu bisa pakai id buat bikin bookmark di halaman web, jadi user bisa langsung loncat ke bagian tertentu dalam satu halaman.
Contoh Bookmark:
<h2 id="bagian1">Bagian 1</h2>
<p>Ini adalah bagian pertama.</p>
<a href="#bagian1">Ke Bagian 1</a>
Kalau user klik link “Ke Bagian 1”, dia bakal langsung scroll ke bagian tersebut. Simpel tapi berguna banget!
4. Menggunakan id Attribute di JavaScript
Selain buat CSS dan bookmark, id juga sering dipakai di JavaScript buat manipulasi elemen.
Contoh JavaScript Pakai id:
<p id="demo">Klik tombol ini!</p>
<button onclick="ubahTeks()">Klik Aku</button>
<script>
function ubahTeks() {
document.getElementById("demo").innerHTML = "Teks sudah berubah!";
}
</script>Hasilnya:
Ketika tombol diklik, teks dalam paragraf bakal berubah. Gampang kan?
5. Kesimpulan
Nah, sekarang kamu udah paham tentang id attribute di HTML, mulai dari definisinya, perbedaannya dengan class, cara bikin bookmark, sampai penggunaannya di JavaScript.
Intinya, id itu unik dan spesifik buat satu elemen aja. Cocok banget buat styling, navigasi, dan manipulasi elemen pakai JavaScript. Jadi, jangan ragu buat pakai id di proyek HTML-mu!
Kalau ada pertanyaan atau tambahan, langsung aja komen di bawah. Happy coding!
Komentar