HTML Id

Atribut id di HTML

Atribut id digunakan untuk memberikan identitas unik pada elemen HTML. Setiap elemen yang memiliki atribut id harus memiliki nilai yang berbeda, dan atribut ini digunakan untuk mengidentifikasi elemen tersebut dalam CSS, JavaScript, atau URL.

Menambahkan Atribut id ke Elemen

Dengan menambahkan atribut id, kita dapat memberikan identitas yang unik pada elemen-elemen di halaman web.

<div id="header">
  <p>Ini adalah elemen dengan id "header".</p>
</div>

Menggunakan id untuk CSS

Atribut id sering digunakan dalam CSS untuk memberikan gaya pada elemen tertentu. Untuk memilih elemen dengan id, kita menggunakan tanda pagar (#).

<style>
  #header {
    background-color: lightblue;
    padding: 20px;
  }
</style>
 
<div id="header">
  <p>Elemen dengan id "header" yang memiliki gaya CSS.</p>
</div>

Menggunakan id untuk JavaScript

Atribut id juga digunakan untuk mengakses elemen dalam JavaScript. Kita bisa menggunakan document.getElementById() untuk mendapatkan elemen dengan id tertentu.

<button id="changeColor" onclick="ubahWarna()">Klik Saya</button>
 
<script>
  function ubahWarna() {
    document.getElementById('changeColor').style.backgroundColor = 'red';
  }
</script>

Menambahkan id untuk Navigasi

Atribut id juga digunakan untuk membuat navigasi langsung ke bagian tertentu dari halaman web menggunakan URL.

<a href="#section1">Ke Bagian 1</a>
<div id="section1">
  <h2>Bagian 1</h2>
  <p>Ini adalah bagian pertama dari halaman.</p>
</div>

Tips

• Gunakan atribut id untuk memberikan identitas unik pada elemen.
• Setiap nilai id harus unik dalam satu halaman.
• Gunakan id untuk navigasi atau menyelaraskan elemen dengan URL.
• Hindari penggunaan spasi dalam nilai id.