wiblogger

Atribut HTML: id

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

Keterangan
  • value harus bersifat unik. Dengan kata lain, sebuah value untuk atribut id hanya bisa digunakan satu kali.
  • value harus terdiri dari satu atau lebih karakter.
  • value tidak mengandung spasi (spasi, tab, dll).


Dukungan browser

Chrome Firefox Safari IE Opera
Ya Ya Ya Ya Ya


Contoh-contoh

  • Untuk keperluan styling Atribut id sering digunakan sebagai CSS selector.

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

    Paragraf HTML

  • Untuk keperluan scripting Terkait javascript, atribut id digunakan untuk mempermudah proses pengambilan elemen yang bersangkutan.

    <p id='paragraf1'>Pragraf HTML<p>
    <a href='#' id='link1'>Alert text paragraf 1<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;
    }
    
       var paragraf = document.getElementById("paragraf1");
       var link = document.getElementById("link1");
           link.onclick = function(e){
              e.preventDefault();
              alert(paragraf.innerHTML);
           }

    Paragraf HTML

    Alert text 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.

Bagikan ke:

Tambahkan komentar untuk:

Atribut HTML: id
Berlangganan Artikel
Kami akan mengirimkan berbagai referensi blogging pilihan langsung ke alamat email anda. Pastikan juga anda melakukan konfirmasi pada email yang bersangkutan untuk mengaktifkan layanan. Panduan bagaimana cara berlangganan artikel bisa anda baca disini.
×
Jangan tampilkan lagi