Belajar HTML - Menandai Elemen Unik dengan ID

Halo teman-teman,

Setelah sebelumnya kita bahas tentang class di HTML, sekarang kita akan lanjut ke pasangan dekatnya, yaitu id. Kalau class bisa digunakan di banyak elemen sekaligus, id justru digunakan untuk menandai satu elemen secara unik.

Yuk, kita pelajari kegunaan id dan gimana cara pakainya!

Apa Itu Atribut id?

Atribut id digunakan untuk memberikan penanda unik pada satu elemen HTML. Tidak boleh ada dua elemen dalam satu halaman yang menggunakan id yang sama.

Contoh:

<p id="info">Ini paragraf dengan ID 'info'</p>

Id ini bisa digunakan dalam CSS, JavaScript, dan juga untuk navigasi dalam halaman (bookmark).

Menggunakan ID dalam CSS

Di CSS, selector untuk id menggunakan tanda pagar #.

<style>
  #info {
    color: blue;
    font-size: 18px;
  }
</style>

Semua elemen yang punya id="info" (harusnya cuma satu!) akan tampil dengan teks biru dan ukuran 18px.

Menggunakan ID untuk Navigasi (Bookmark)

Id juga bisa digunakan untuk membuat tautan langsung ke bagian tertentu dalam halaman, cocok untuk halaman yang panjang.

Contoh:

<h2 id="kontak">Kontak Kami</h2>
<a href="#kontak">Lompat ke bagian kontak</a>

Saat link diklik, halaman akan scroll langsung ke elemen yang memiliki id kontak.

Menggunakan ID di JavaScript

JavaScript bisa mencari dan mengubah elemen berdasarkan id dengan getElementById().

Contoh:

<p id="demo">Teks awal</p>
<script>
  document.getElementById("demo").innerHTML = "Teks telah diubah";
</script>

Ini berguna banget untuk membuat halaman web yang dinamis.

Aturan Penting Tentang ID

1. ID harus unik dalam satu halaman

2. ID bersifat case-sensitive (Info beda dengan info)

3. Tidak boleh ada spasi dalam nama ID

4. ID bisa digunakan di elemen HTML apa pun

Dengan memahami penggunaan id, kamu bisa mengatur elemen secara spesifik, baik untuk styling, navigasi, maupun scripting.

Kalau kamu masih bingung soal perbedaan class dan id, atau punya pertanyaan soal penggunaannya, tulis aja di komentar ya. Kita bahas bareng!

Di materi selanjutnya, kita akan belajar tentang iframe di HTML—cara menyematkan halaman lain ke dalam halaman kita. Sampai ketemu di tutorial berikutnya!

Baca juga