Atribut Id

View Categories

Atribut Id

Atribut id digunakan untuk membuat identifikasi unik untuk setiap elemen HTML pada satu dokumen HTML. Nilai atribut id untuk setiap tag HTML tidak boleh sama di dalam satu dokumen HTML.

Penggunaan Atribut Id

Atribut id harus unik untuk setiap tag HTML. Atribut id dapat digunakan untuk membuat properti CSS unik untuk satu tag. Atribut id juga dapat digunakan untuk mengakses tag menggunakan bahasa pemrograman Javascript.

Properti CSS dapat ditujukan kepada satu tag dengan id tertentu dengan format penulisan properti CSS seperti contoh di bawah :
# + nama id + { + properti CSS + }

<!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>

Jalankan Contoh

Pada contoh di atas diperlihatkan properti CSS yang unik untuk tag h1 dengan atribut id bernilai myHeader.

Perbedaan Class Dengan Id

Satu class dapat dipakai untuk beberapa tag sedangkan satu id hanya dapat dipakai untuk satu tag dalam satu dokumen HTML.

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

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Jalankan Contoh

Pada contoh di atas, class city dipakai pada semua tag h2. Tiga tag h2 dapat memakai class yang sama. Sedangkan id myHeader hanya dipakai oleh satu tag h1.

Tutorial sebelumnya : Atribut Class
Tutorial setelahnya : HTML Head
Semua Tutorial HTML : Tutorial HTML 

Tinggalkan Balasan