Atribut id HTML digunakan untuk menentukan id unik untuk elemen HTML. kita tidak boleh memiliki lebih dari satu elemen dengan id yang sama dalam dokumen HTML.
Section Artikel
Atribut ID
Atribut id menentukan id unik untuk elemen HTML. Nilai atribut id harus unik dalam dokumen HTML.
Atribut id digunakan untuk mendeklarasi style tertentu dalam style sheet. Atribut id ini juga digunakan oleh JavaScript untuk mengakses dan memanipulasi elemen dengan id tertentu.
Sintaks untuk id adalah: meulis karakter hash (#), diikuti dengan nama id. Kemudian, tentukan properti CSS di dalam kurung kurawal {}.
Contoh berikut ini memiliki elemen <h1> yang mengarah ke nama id “myHeader”. Elemen <h1> ini akan diberi style sesuai dengan definisi style #myHeader di bagian head:
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>Catatan: Nama id case sensitive(peka huruf)!
Catatan: Nama id harus mengandung setidaknya satu karakter dan tidak boleh mengandung spasi (spasi, tab, dll.).
Perbedaan Antara Class dan ID
Nama kelas dapat digunakan oleh beberapa elemen HTML, sedangkan nama id hanya boleh digunakan oleh satu elemen HTML dalam satu halaman:
Contoh :
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h2> Perbedaan Class dan ID</h2>
<p>nama kelas bisa digunakan untuk beberapa elemen HTML, sedangkan nama ID hanya bisa digunakan untuk satu elemen HTML saja:</p>
<!-- 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>
</body>
</html>
Bookmark HTML dengan ID dan Link
Bookmark HTML digunakan untuk memungkinkan kita melompat ke bagian tertentu dari halaman web. Bookmark dapat berguna jika halaman web sangat panjang. Untuk menggunakan bookmark, kita harus membuatnya terlebih dahulu, lalu menambahkan link ke bookmark. Kemudian, saat link dikliknya, halaman akan bergulir ke tempat yang di klik.
Contoh :
Pertama, buatlah bookmark dengan atribute id :
<h2 id="C4">Chapter 4</h2>
Kemudian, tambahkan link ke bookmark(“Loncat Chapter 4”) dalam halaman yang sama :
Contoh
<a href="#C4">Loncat Chapter 4</a>
Atau bisa menambahkan bookmark (“Loncat Chapter 4”) dari halaman yang berbeda :
<a href="html_demo.html#C4">Loncat Chapter 4</a>
Conoth Lengkap :
<!DOCTYPE html> <html> <body> <p><a href="#C4">Jump to Chapter 4</a></p> <p><a href="#C10">Jump to Chapter 10</a></p> <p><a href="#C15">Loncat Chapter 15</a></p> <p><a href="#C7">Loncat Chapter 7</a></p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2 id="C4">Chapter 4</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2 id="C10">Chapter 10</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 16</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 17</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 18</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 19</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 20</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 21</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 22</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 23</h2> <p>This chapter explains ba bla bla</p> </body> </html>
Menggunakan Atribut Id di JavaScript
Atribut id juga dapat digunakan oleh JavaScript untuk melakukan beberapa tugas untuk elemen tertentu itu.
JavaScript dapat mengakses elemen dengan id tertentu dengan metode getElementById ():
Contoh
Gunakan atribut id untuk memanipulasi teks dengan JavaScript:
<!DOCTYPE html>
<html>
<body>
<h2>Penggunaan id pada Javascript</h2>
<p>JavaScript bisa mengakses elemen dengan id tertentu menggunakan metode getElementById ():</p>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">rubah text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Semoga harimu baik!";
}
</script>
</body>
</html>
Rangkuman
- Atribut id digunakan untuk menentukan id unik untuk elemen HTML
- Nilai atribut id harus unik dalam dokumen HTML
- Atribut id digunakan oleh CSS dan JavaScript untuk mengatur gaya / memilih elemen tertentu
- Nilai atribut id case sensitive (peka huruf)
- Atribut id juga bisa digunakan untuk membuat bookmark HTML
- JavaScript bisa mengakses elemen dengan id tertentu menggunakan metode
getElementById ()
