Kodealgo

id HTML

id merupakan atribut global yang mirip seperti class. Tapi, atribut ini memiliki beberapa perilaku yang berbeda.

Ketika saya pertama kali mempelajari HTML, saya kebingungan memahami perbedaan keduanya, mungkin juga termasuk Anda.

Oleh karena itu mari kita pelajari lebih lanjut, agar Anda dapat menentukan kapan menggunakan class dan kapan menggunakan id.

Mari kita mulai.

  1. Apa Itu id HTML?
  2. Cara Menggunakan Atribut id
  3. Konvensi dan Aturan Penamaan id
    1. Nama id Tidak Boleh Mengandung Spasi
    2. id Harus Unik
  4. Perbedaan class dan id

Apa Itu id HTML?

id merupakan atribut global HTML yang digunkaan untuk menentukan id unik elemen HTML.

Fungsinya sama seperti class, ini digunakan untuk memudahkan kita menyeleksi elemen menggunakan JavaScript atau CSS.

Tapi, kita tidak boleh memiliki lebih dari satu elemen dengan id yang sama.

Cara Menggunakan Atribut id

Untuk menambahkan id ke dalam elemen HTML, cukup tulis kata kunci id di dalam tag pembuka diikuti dengan sama dengan dan nama id di dalam tanda kutip, id="namaId".

Ketika menulis CSS, kita dapat menyeleksi elemen yang menggunakan id tertentu menggunakan tanda pagar (#) diikuti nama id.

Contoh:

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>Belajar HTML</title>
    <style>
      #main {
        background-color: burlywood;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <h1>Hello world</h1>
    </div>
  </body>
</html>

Hasil:

Menyeleksi Elemen HTML melalui Id

Konvensi dan Aturan Penamaan id

Ada beberapa konvensi dan aturan penamaan id yang perlu kita ikuti, berikut beberapa diantaranya:

Nama id Tidak Boleh Mengandung Spasi

Kalau class kita bisa menggunakan beberapa nama kelas dipisahkan dengan spasi, tapi di dalam atribut id kita hanya bisa menulis nilai tunggal tidak boleh mengandung spasi.

Artinya satu atribut id hanya boleh berisi satu nama, tidak boleh lebih.

Contoh baik:

<div id="main"></div>

Contoh buruk:

<div id="main article"></div>

id Harus Unik

Tidak direkomendasikan menggunakan nama id yang sama di beberapa elemen HTML.

Halaman HTML yang kita buat sebetulnya tetap berfungsi dengan baik ketika kita menggunkaan id yang sama di beberapa elemen HTML, termasuk CSS.

Tapi ini tidak direkomendasikan, lebih baik gunakan class sebagai alternatifnya.

Contoh baik:

<div id="main"></div>
<div id="footer"></div>

Contoh buruk:

<div id="main"></div>
<div id="main"></div>

Selain kedua aturan di atas, id peka huruf besar dan kecil, nama id harus mengandung setidaknya satu karakter tidak boleh diawali dengan angka, dan tidak mengandung spasi (spasi atau tab).

Perbedaan class dan id

Jika Anda baru mempelajari HTML, Anda mungkin kebingungan membedakan class dan id.

Secara fungsi sebetulnya sama saja, tapi ada beberapa perbedaan.

Lantas, apa bedanya? berikut beberapa diantaranya:

  • Satu nama id tidak boleh digunakan di lebih dari satu elemen HTML, class boleh.
  • Satu atribut id hanya boleh mengandung satu nama dan tidak boleh mengandung spasi, class boleh.
  • Saat menyeleksi elemen menggunakan CSS atau querySelector() JavaScript, id menggunakan tanda pagar (#), class menggunakan titik (.).
« Sebelumnya
classSelanjutnya »
Blok dan Inline