Ads by Yasya El Hakim
Tutorial Lengkap HTML: ID pada HTML - Bagian 20

Atribut id dapat kita gunakan untuk menentukan nama ID dari sebuah elemen HTML (Nilai dari id harus Unik dan berbeda satu sama lain).

Nilai dari id dapat kita gunakan pada CSS dan JavaScript untuk melakukan suatu fungsi pada elemen yang dipilih.

Pada CSS, kalian dapat memilih elemen dengan menuliskan karakter pagar (#) diikuti dengan nama id.

Contoh
Menggunakan CSS untuk memilih elemen dengan nama id "headerKu".
<style>
#headerKu {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>

<h1 id="headerKu">Header Ku</h1>
Hasilnya akan seperti berikut:

Header Ku


Tips:
  • Nilai dari atribut id dapat kita gunakan pada semua elemen HTML.
Catatan:
  • Nilai dari id sangatlah sensitif. Artinya, kalian harus memperhatikan besar atau kecilnya huruf.
  • Nilai dari id harus memiliki setidaknya satu karakter, dan tidak boleh memiliki spasi, tab, dll.

Perbedaan Antara Class dan ID

Elemen HTML hanya dapat memiliki satu buah nama id yang unik. Sedangkan nama class bisa kita gunakan pada beberapa elemen HTML.

Contoh

<style>
/* Tampilan CSS dengan memilih id "headerKu" */
#headerKu {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}

/* Tampilan CSS dengan memilih nama class "nama" */
.nama {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<!-- Elemen yang unik -->
<h1 id="headerKu">Nama</h1>

<!-- Beberapa elemen yang serupa -->
<h2 class="nama">Yasya El Hakim</h2>
<p>EL Creative Author.</p>

<h2 class="nama">Yasya El Hakim</h2>
<p>EL Creative Author.</p>

<h2 class="nama">Yasya El Hakim</h2>
<p>EL Creative Author.</p>
See the Pen 84. Class ID by Yasya El Hakim (@elhakimyasya) on CodePen.

Tips: Kalian bisa mempelajari CSS pada Tutorial Lengkap CSS.

Bookmark dengan Menggunakan ID dan Link

Bookmark pada HTML dapat kita gunakan untuk mempermudah pengguna agar dapat diarahkan kedalam suatu halaman pada baris tertentu.

Bookmark pada HTML sangat berguna jika teks pada Halaman Web sangat panjang.

Untuk membuat Bookmark, kalian harus membuat Bookmark terlebih dahulu, kemudian tambahkan Link kedalamnya.

Ketika Link Bookmark di klik, maka halaman akan scroll ke arah lokasi Bookmark.

Contoh

Pertama, buat sebuah Bookmark dengan atribut id:
<h2 id="B4">Bagian 4</h2>

Kemudian, tambahkan link kedalam Bookmark ("Ke Bagian 4"), pada halaman yang sama:
<a href="#B4">Ke Bagian 4</a>

Atau, tambahkan Link ke Bookmark ("Ke Bagian 4"), pada halaman lain:
<a href="demo.html#B4">Ke Bagian 4</a> 

See the Pen 85. Link Bookmark by Yasya El Hakim (@elhakimyasya) on CodePen.

Menggunakan Atribut id pada JavaScript

JavaScript dapat mengakses elemen jika kalian sudah menentukan nama id dan menggunakan metode getElementById().

Contoh

Menggunakan atribut id untuk memanipulasi teks:
<script>
function hasilTampilan() {
document.getElementById("headerKu").innerHTML = "Selamat Datang";
}
</script> 
See the Pen 86. ID JavaScript by Yasya El Hakim (@elhakimyasya) on CodePen.

Tips: Kalian dapat mempelajari JavaScript pada bagian selanjutnya.

Sebelumnya: Tutorial Lengkap HTML: Class pada HTML - Bagian 19
Selanjutnya: Tutorial Lengkap HTML: Iframe pada HTML - Bagian 21
Daftar isi: Tutorial Lengkap HTML

Sumber: https://www.w3schools.com/

0Komentar

Sebelumnya Selanjutnya