Atribut Id HTML


Atribut id HTML digunakan untuk menentukan id unik untuk elemen HTML dan tidak boleh memiliki lebih dari satu elemen dengan id yang sama dalam dokumen HTML.


Menggunakan Atribut Id

Atribut id menentukan id unik untuk elemen HTML. Nilai atribut id harus unik dalam dokumen HTML.

Atribut id digunakan untuk menunjuk ke deklarasi style tertentu dalam CSS. Ini juga digunakan oleh JavaScript untuk mengakses dan memanipulasi elemen dengan id tertentu.

Sintaks untuk id adalah karakter hash (#), diikuti dengan nama id. Kemudian, tentukan properti CSS di dalam kurung kurawal {}.

Dalam contoh berikut kami memiliki elemen <h1> yang mengarah ke nama id "myHeader". Elemen <h1> ini akan diberi style sesuai dengan definisi style #myHeader di bagian head.


Contoh:

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">Header Saya</h1>

</body>
</html>

Catatan: Nama id peka huruf besar kecil

Catatan: Nama id harus mengandung setidaknya satu karakter, dan tidak boleh mengandung spasi (spasi, tab, dll.).


Perbedaan Antara Class dan Id

Nama class dapat digunakan oleh beberapa elemen HTML, sedangkan nama id hanya boleh digunakan oleh satu elemen HTML di dalam sebuah halaman.

Contoh:

<style>
/* Style elemen dengan id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style semua elemen dengan nama class "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}

</style>

<!-- Elemen dengan id unik -->
<h1 id="myHeader">Kota Saya</h1>

<!-- Beberapa elemen dengan kelas yang sama -->
<h2 class="city">Jakarta</h2>
<p>Jakarta adalah ibu kota Indonesia.</p>

<h2 class="city">Riyadh</h2>
<p>Riyadh adalah ibu kota Arab Saudi.</p>

<h2 class="city">Ankara</h2>
<p>Ankara adalah ibu kota Turki.</p>

Bookmark HTML dengan Id dan Link

Bookmark HTML digunakan untuk memungkinkan pembaca melompat ke bagian tertentu dari halaman web.

Bookmark dapat berguna jika halaman yang dibuat sangat panjang.

Untuk menggunakan bookmark, Anda harus membuatnya terlebih dahulu, lalu menambahkan link ke bookmark.

Kemudian, saat link diklik, otomatis halaman akan mengarah ke lokasi dengan penunjuk.


Contoh:

Pertama, buat bookmark dengan atribut id:

<h2 id="C4">Bab 5</h2>

Kemudian, tambahkan link ke bookmark ("Lompat ke Bab 5"), dari dalam halaman yang sama: 

<a href="#C4">Lompat ke Bab 5</a>

Atau, tambahkan link ke bookmark ("Lompat ke Bab 5"), dari halaman lain:

<a href="html_demo.html#C4">Lompat ke Bab 5</a>

Menggunakan Atribut Id di JavaScript

Atribut id juga dapat digunakan oleh JavaScript untuk melakukan beberapa tugas untuk elemen spesifik tersebut.

JavaScript dapat mengakses elemen dengan id tertentu dengan metode getElementById()


Contoh:

Gunakan atribut id> untuk memanipulasi teks dengan JavaScript:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Selalu Bersyukur!";
}
</script>

Ringkasan

  • Atribut id> digunakan untuk menentukan id unik untuk elemen HTML
  • Nilai atribut id> harus unik dalam dokumen HTML
  • Atribut id> digunakan oleh CSS dan JavaScript untuk mengatur style / memilih elemen tertentu
  • Nilai atribut id> peka huruf besar kecil
  • Atribut id> juga digunakan untuk membuat bookmark HTML
  • JavaScript bisa mengakses elemen dengan id tertentu dengan metode getElementById()

Sumber referensi: w3schools

Komentar

Posting Komentar