[Belajar HTML #20] (Id) HTML - Menggunakan Atribut id - Class dan ID - ID dan Tautan (Link) - Atribut id dalam JavaScript

HTML Atribut id

Menggunakan Atribut id

HTML id atribut menentukan sebuah id unik untuk elemen HTML (nilai harus unik dalam dokumen HTML).

Nilai id dapat digunakan oleh CSS dan JavaScript untuk melakukan tugas tertentu untuk elemen dengan nilai id tertentu.

Di CSS, untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti id elemen:

Contoh

Gunakan CSS untuk menata elemen dengan id "myHeader":

<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>

Hasil:

Header saya

Cobalah sendiri "

Kiat: Atribut id dapat digunakan pada elemen HTML apa pun .

Catatan: Nilai id peka huruf besar-kecil.

Catatan: Nilai id harus mengandung setidaknya satu karakter, dan tidak boleh mengandung spasi putih (spasi, tab, dll.).

---

Perbedaan Antara Class dan ID

Elemen HTML hanya dapat memiliki satu id unik yang dimiliki oleh elemen tunggal itu, sementara nama class dapat digunakan oleh banyak elemen:

Contoh

<style>
/* Gaya elemen dengan id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Gaya semua elemen dengan nama class "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- Sebuah elemen unik -->
<h1 id="myHeader">My Cities</h1>

<!-- Beberapa elemen serupa -->
<h2 class="city">London</h2>
<p>London adalah ibu kota Inggris.</p>

<h2 class="city">Paris</h2>
<p>Paris adalah ibu kota Prancis.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo adalah ibu kota Jepang</p>

Cobalah sendiri "

---

Bookmark dengan ID dan Tautan

Bookmark HTML digunakan untuk memungkinkan pembaca melompat ke bagian tertentu dari halaman Web.

Bookmark dapat bermanfaat jika halaman web Anda sangat panjang.

Untuk membuat bookmark, Anda harus terlebih dahulu membuat bookmark, dan kemudian menambahkan tautan ke sana.

Ketika tautan diklik, halaman tersebut akan bergulir ke lokasi dengan bookmark.

Contoh

Pertama, buat bookmark dengan idatribut:

<h2 id="C4">Chapter 4</h2>

Kemudian, tambahkan tautan ke bookmark ("Lompat ke Bab 4"), dari dalam halaman yang sama:

<a href="#C4">Jump to Chapter 4</a>

Atau, tambahkan tautan ke bookmark ("Lompat ke Bab 4"), dari halaman lain:

Contoh

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Cobalah sendiri "

---

Menggunakan Atribut id dalam JavaScript

JavaScript dapat mengakses elemen dengan id yang ditentukan dengan menggunakan getElementById()metode:

Contoh

Gunakan atribut id untuk memanipulasi teks dengan JavaScript:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Cobalah sendiri "

Share this post