Atribut HTML: id - Memberikan Identitas Khusus pada Elemen


Definisi dan Penggunaan

Atribut id memberikan id unik pada elemen HTML. Atribut id umumnya digunakan untuk kebutuhan styling, scripting, atau linking. Atribut id merupakan salah satu Atribut global HTML.



Sintak 

	
    <elemen id='value'>
      <!-- konten -->
    </elemen>
  • value harus bersifat unik. Dengan kata lain, sebuah value untuk atribut id hanya bisa digunakan satu kali.
  • value harus terdiri dari satu karakter atau lebih.
  • value tidak boleh mengandung white-space (spasi, tab, dll).



Practices

  • Untuk keperluan styling Atribut id sering digunakan untuk kebutuhan CSS selector. 

                
            <p id='paragraf1'>Pragraf HTML<p>
            
          
                
            #paragraf1 {
              background:blue;
              color:#fff;
              padding:20px;
              text-align:center;
            }

    Paragraf HTML


  • Untuk keperluan scripting Para pemrograman Javascript, atribut id sering digunakan untuk mengambil/mereferensi ke elemen tertentu. 

                
            <p id='paragraf1'>Pragraf HTML<p>
            <a href='#' id='link1'>Klik untuk mengganti background paragraf<a>
            
          
                
#paragraf1 {
  background:blue;
  color:#fff;
  padding:20px;
  text-align:center;
}

#link1 {
  display:inline-block;
  margin-top:20px;
  background:#f6f7f8;
  color:#000;
  padding:10px 15px;
  line-height:1;
  border:1px solid #e0e0e0;
  border-radius:5px;
}
            
          
                
const paragraf = document.getElementById("paragraf1");
const link = document.getElementById("link1");
link.onclick = (e)=>{
  e.preventDefault();
  let bg;
  if(paragraf.style.background === "red"){
    bg = "blue";
  }
  else{
    bg = "red";
  }
  paragraf.style.background = bg;
};

    Paragraf HTML

    Klik untuk mengganti background paragraf

  • Untuk keperluan linking Kita bisa membuat link untuk mengarahkan pengguna pada elemen-elemen tertentu. Contoh penggunaan untuk kebutuhkan ini misalnya adalah Membuat daftar isi postingan.
Komentar