Atribut id HTML

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

Tidak boleh ada beberapa elemen yang memiliki 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 yang spesifik di dalam tabel gaya. JavaScript juga dapat digunakan untuk mengakses dan mengoperasikan elemen yang memiliki ID spesifik.

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

下面的例子中我们有一个 contoh di bawah ini kami memiliki 元素，它指向 id 名称 "myHeader"。这个 contoh di bawah ini kami memiliki Elemen akan berdasarkan elemen <h1> di bagian head, yang menunjuk kepada nama ID "myHeader". Ini #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 kecil!

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

Perbedaan Class dan ID

Sama kelas dapat digunakan oleh beberapa elemen HTML, sedangkan 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 kami di Panduan CSS belajar lebih banyak tentang CSS.

Penanda HTML melalui ID dan tautan

Penanda HTML digunakan untuk memungkinkan pembaca melompat ke bagian tertentu di halaman web.

Jika halaman sangat panjang, penanda mungkin sangat berguna.

Untuk menggunakan penanda, Anda harus membuatnya dahulu, kemudian tambahkan tautan untuknya.

Sebagai contoh, apabila Anda mengklik tautan, halaman akan bergerak ke posisi yang memiliki penanda.

Contoh

Pertama, dengan}} id Atribut menciptakan penanda:

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

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

Contoh

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

Coba sendiri

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

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

Menggunakan atribut id di JavaScript

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

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

Contoh

Menggunakan atribut id untuk menangani teks melalui JavaScript:

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

Coba sendiri

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

Ringkasan Bab Ini

  • id Atribut digunakan untuk menentukan id unik bagi elemen HTML
  • id Nilai atribut harus unik dalam dokumen HTML
  • CSS dan JavaScript dapat digunakan id Atribut digunakan untuk memilih elemen atau menetapkan gaya untuk elemen khusus
  • id Nilai atribut mencerminkan perbedaan huruf besar dan kecil
  • id Atribut ini juga dapat digunakan untuk membuat penanda HTML
  • JavaScript dapat digunakan getElementById() Cara mengakses elemen yang memiliki id khusus