Kapan harus pakai id atau class di HTML?

HTML
#1

Kalau ada element kita beri atribut class="header" atu id="header" itu ada bedanya ngga? Selain pas di kode JSnya nanti pakainya getElementsByClass dan getElementById?

Saya pernah baca kalau id itu penanda gitu, tapi class juga termasuk penanda kan, bedanya apa ya?

1 Like
#3

Peraturannya:

id hanya bisa digunakan untuk maksimal satu element di satuhalaman web, dan tiap element hanya bisa memiliki satu buah id.
class bisa digunakan lebih dari satu element di satu halaman web, dan tiap element bisa memiliki lebih dari satu class.

Kalau soal syntax, id dan class memiliki kemiripan

  • Dari sisi HTML, mereka sama-sama menjadi atribut sebuah element (misal <h1 id="heading"> dan <p class="paragraph">,

  • Dari sisi CSS, selector menggunakan simbol # atau . (titik)

    • untuk id, gunakan #. Jadi #heading { color: brown; }
    • untuk class gunakan . (titik), Jadi .paragraph { color: brown; }

  • Dari sisi JavaScript, element dengan id tertentu dapat dicari menggunakan document.getElementById(). Sedangkan element dengan class tertentu dapat dicari menggunakan document.getElementsByClass().

Catatan penting: document.getElementsByClass() akan mengembalikan array kumpulan element dengan class tertentu.

1 Like
#4

Oh iya, id sebuah element juga bisa digunakan sebagai anchor.

Misalkan ada sebuah halaman website https://website.com yang berisi kumpulan artikel. Lalu ada satu judul artikel berupe element <h3> dengan atribut id bernilai judul-artikel-123. Kalau kita masukkan URL https://website.com#judul-artikel-123, halaman webnya akan otomatis ter-scroll ke lokasi di mana element tersebut berada.

1 Like