Atribut id HTML

HTML id Properti digunakan untuk menentukan ID unik bagi elemen HTML.

Tidak boleh ada beberapa elemen dengan id yang sama di dalam satu dokumen HTML.

Penggunaan properti id

id Properti menentukan ID unik elemen HTML. id Nilai properti harus unik di dalam dokumen HTML.

id Properti digunakan untuk menunjuk deklarasi gaya khusus di dalam lembar gaya. JavaScript juga dapat digunakan untuk mengakses dan mengoperasikan elemen yang memiliki ID khusus.

语法 id adalah: tulis satu tanda titik-titik horizontal (#), diikuti dengan nama id. kemudian, definisikan properti CSS di dalam kurung kurawal {}.

contoh di bawah ini kita memiliki <h1> yang menunjuk kepada nama ID "myHeader". Ini adalah <h1> Elemen akan berdasarkan elemen #myHeader Definisi gaya untuk melakukan pengaturan gaya:

Contoh

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

Coba sendiri

Keterangan:Nama ID sensitif terhadap huruf besar dan kecil!

Keterangan:ID harus mengandung setidaknya satu karakter dan tidak boleh mengandung spasi (spasi, tab, dll).

Perbedaan antara Class dan ID

Sebuah nama kelas dapat digunakan oleh beberapa elemen HTML, sementara sebuah nama id hanya dapat digunakan oleh satu elemen HTML di halaman:

Contoh

<style>
/* Atur gaya untuk elemen dengan id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Atur gaya untuk semua elemen dengan nama kelas "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Elemen dengan id yang unik -->
<h1 id="myHeader">My Cities</h1>
<!-- Beberapa elemen dengan nama kelas yang sama -->
<h2 class="city">London</h2>
<p>London adalah ibu kota Inggris.</p>
<h2 class="city">Paris</h2>
<p>Paris adalah ibu kota Perancis.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo adalah ibu kota Jepang.</p>

Coba sendiri

Petunjuk:Silakan kunjungi Panduan CSS pelajari lebih banyak tentang CSS.

Melalui ID dan tautan untuk HTML bookmark

HTML bookmark digunakan untuk memungkinkan pembaca melompat ke bagian khusus di halaman web.

Jika halaman sangat panjang, bookmark mungkin sangat berguna.

Untuk menggunakan bookmark, Anda harus membuatnya terlebih dahulu, lalu tambahkan tautan untuknya.

Lalu, ketika mengklik tautan, halaman akan bergerak ke posisi yang diwarisi bookmark.

Contoh

Pertama, dengan id Atribut membuat bookmark:

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

Lalu, di halaman yang sama, tambahkan tautan ke bookmark ini ("Lompat ke Bab 4"):

Contoh

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

Coba sendiri

atau, di halaman lain, tambahkan tautan ke bookmark ini ("Lompat ke Bab 4"):

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

Menggunakan atribut id dalam JavaScript

JavaScript juga dapat menggunakan atribut id untuk melaksanakan tugas tertentu terhadap elemen khusus.

JavaScript dapat digunakan getElementById() Cara mengakses elemen yang memiliki id khusus:

Contoh

Menggunakan atribut id melalui JavaScript untuk mengatur teks:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Coba sendiri

Petunjuk:Silakan JavaScript HTML Dalam bab ini, atau di Panduan JavaScript dalam belajar JavaScript.

Ringkasan Bab Ini

  • id Atribut digunakan untuk menunjukan id unik elemen HTML
  • id Nilai atribut harus unik dalam dokumen HTML
  • CSS dan JavaScript dapat digunakan id Atribut digunakan untuk memilih elemen atau menata gaya elemen khusus
  • id Nilai atribut mencerminkan penggunaan huruf besar dan kecil
  • id Atribut ini juga dapat digunakan untuk membuat bookmark HTML
  • JavaScript dapat digunakan getElementById() Cara mengakses elemen yang memiliki id khusus