Identitas dalam HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

Atribut id pada HTML digunakan untuk memberikan identitas yang unik pada sebuah elemen HTML. Fungsi utama dari atribut id adalah untuk memungkinkan penggunaan CSS dan JavaScript untuk memanipulasi elemen HTML secara spesifik.

Dengan atribut id, sebuah elemen HTML dapat diidentifikasi dengan identitas tertentu yang unik. Identitas ini kemudian dapat digunakan dalam file CSS atau JavaScript untuk merujuk elemen HTML secara spesifik. Hal ini memudahkan pengembang web dalam memanipulasi elemen HTML tanpa harus merubah atau mempengaruhi elemen HTML lain pada halaman web.

Contoh penggunaan atribut id pada elemen HTML adalah sebagai berikut:

<div id="header">
    <h1>Welcome to My Website</h1>
</div>

Dalam contoh di atas, atribut id "header" diberikan pada elemen <div>. Nama ini kemudian dapat digunakan pada file CSS atau JavaScript untuk merujuk elemen <div> secara spesifik.

Penggunaan atribut id pada elemen HTML haruslah unik di dalam halaman web. Artinya, tidak ada dua elemen HTML yang menggunakan nama id yang sama di dalam halaman web yang sama. Jika diberikan nama id yang sama pada dua atau lebih elemen HTML, maka ini dapat menyebabkan masalah dalam penggunaan CSS dan JavaScript pada halaman web.

Untuk memberikan style dengan CSS pada elemen <div> dengan id="header", kita dapat menggunakan tanda # diikuti dengan nilai id yang akan dirujuk. Contoh:

<!DOCTYPE html>
<html>
 <head>
  <style>
    #header {
      background-color: lightblue;
      color: black;
      padding: 40px;
      text-align: center;
     }
    </style>
  </head>
 <body>

  <div id="header">
    <h1>Welcome to My Website</h1>
  </div>
 </body>
</html>

Contoh penggunaan atribut id pada javascript.

<script>
  function tampilkanpesar() {
   document.getElementById("header").innerHTML = "Selamat pagi semuanya!";
  } 
</script>