Apa perbedaan id dan class pada html?

Question

Ya tanda pada post-headernya, yang pertama berawalan dengan tanda . (titik) dan yang kedua berawalan dengan tanda # (pagar). Lalu apa hubungannya dengan keduanya ?

Table of Contents Show

Mengenal Id di HTML
Membuat Bookmark dengan Id dan Link
Menggunakan Id pada Javascript
Apa bedanya ID dan class?
Apa itu ID dalam HTML?
Apa Perbedaan class dan ID dalam deklarasi dan penggunaan di CSS?
Apa itu atribut class pada HTML?

Oke sekarang kita langsung praktek aja ya :). Silakan agan kunjungi link berikut :

Live HTML Editor

Kemudian pastekan kode berikut pada kolom sebelah kiri :

<style>
 #post-header {
  font-size: 200%;
  font-weight: 300;
  margin: 5px 0;
  padding-bottom: 12px}
  color:red;
</style>
<div class='post-header'>Percobaan</div>

Pasti akan muncul kata percobaan pada kolom sebelah kanan. Namun pertanyaannya adalah apakah struktur HTML tersebut sudah mengikuti style atau css yang kita berikan ? Jawabannya adalah "belum".

Coba agan ganti tanda # dengan tanda . (titik) pada stylenya. Lihat apakah yang terjadi, pasti huruf akan berubah menjadi besar dan berwarna merah. Hal ini dikarenakan atribut class sudah dipengaruhi oleh selector cssnya. Jadi kesimpulannya atribut class akan terbentuk oleh selektor css yang berawalan dengan tanda . (titik) bisa kita sebut juga dengan selector class.

Lalu apa yang selector CSS yang membentuk atribut ID ? Coba sekarang kita praktek lagi.

Copy dan pastekan code yang diatas tadi namun ganti atribut class menjadi id. Pasti tampilan huruf akan langsung terlihat besar. Dari sini dapat kita tarik kesimpulan bahwa atribut id dipengaruhi oleh selektor css yang berawalan dengan tanda # (pagar) atau yang sering kita kenal dengan sebutan selector id.

Untuk selector class, banyaknya penggunaan atau pemanggilan selektor tersebut dapat berulang-ulang lebih dari satu kali. Sedangkan untuk id selector hanya dapat digunakan hanya satu kali karena sifatnya yang unik.

Cukup sampai disini tulisan kali ini, mohon maaf apabila ada kekurangan atau kesalahan. Jika ada koreksi atau tambahan bisa disampaikan langsung melalui kotak komentar di bawah. Semoga dapat dipahami. Sekian dan terimakasih

Dalam pengimplementasian CSS ke dalam kode html, kita memerlukan yang namanya Selector ID atau Class. Namun, apa sih perbedaan dari ID dan Class itu sendiri?

ID

ID merupakan selector yang digunakan oleh satu tag html, ini adalah yang disarankan, karena ID itu sendiri hanya boleh digunakan untuk satu tag html.

Penulisan di css :

#header{
   backgroud-color:green;
   width:900px;
   height:40px;
}

Penggunaannya di html :

Class merupakan selector yang dapat digunakan oleh lebih dari satu tag html. Artinya beberapa tag html bisa menggunakan css dari class tersebut. Penulisan di css :

Pada artikel sebelumnya kita dapat menentukan dan mengatur style dari suatu elemen dengan mengacu pada jenis elemennya.

Namun ada masalah di sini, bagaimana jika hanya elemen tertentu yang memiliki style berbeda dari yang lain dan bagaimana juga bila style yang sama dapat diterapkan di berbagai elemen?

Nah di sinilah peran dari atribut id dan class dibutuhkan.

Untuk mengetahui fungsi dari kedua atribut ini mari simak pembahasan berikut.

Mengenal Id di HTML

Atribut id berfungsi untuk menentukan identitas unik suatu elemen. Jadi nilai yang diberikan haruslah unik, unik di sini artinya kita tidak diizinkan membuat lebih dari satu id dengan nilai yang sama.

Atribut id sering digunakan untuk menunjuk ke nama id pada lembar gaya (style sheet). Hal ini juga dapat digunakan Javascript untuk mengakses dan memanipulasi elemen dengan nama id tertentu.

Cara mendefinisikan style untuk id tertentu adalah dengan menjadikannya sebagai selector menggunakan tanda pagar atau hash (#) diikuti dengan nama atau nilai dari atribut id.

Untuk lebih jelasnya lihat contoh penerapan berikut


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Id dan Class HTML</title>
	<style type="text/css">
		#judul{
			background-color: black;
			color: white;
			padding: 5px;
		}
	</style>
</head>
<body>		
	<h1 id="judul">Tutorial Id HTML</h1>
</body>
</html>

Keluaran:

Membuat Bookmark dengan Id dan Link

Bookmark memungkinkan pembaca untuk lompat menuju bagian tertentu pada halaman website. Bookmark akan sangat berguna dan wajib hukumnya bila halaman website yang kita buat terlampau panjang.

Contoh penerapan:


<!DOCTYPE html>
<html>
<head>
	<title>Belajar Id dan Class HTML</title>
</head>
<body>
	<a href="#html">Tutorial HTML</a> ||
	<a href="#css">Tutorial CSS</a> ||
	<a href="#javascript">Tutorial Javascript</a>
	<h1 id="html">Tutorial HTML</h1>
	<p>
		Lorem ipsum dolor sit amet, duo putant constituam et, cu vis ludus tempor democritum. Vel te affert blandit. Vis te decore appetere lobortis, eos te nostrum vituperatoribus, nostro reprehendunt mediocritatem ne qui. Dicat facer et per, an nostrud perpetua cotidieque his, qui gloriatur complectitur eu. Duo at veritus cotidieque, stet impetus pertinacia at qui. Ullum minim iracundia ut nam, per id suas graece mnesarchum.

		Ut has ferri eleifend, omnis urbanitas comprehensam cu cum. Ad quo purto prodesset interesset. Tale labore no mel. Suas hinc veri ne sed, duo nibh quodsi eligendi an. Scaevola repudiare necessitatibus ex mea, vix graecis quaerendum at. Usu meis volutpat voluptatum ut, iudico equidem eos no.

		Pro modus munere ei, vero autem ornatus sit te. Verear periculis usu in, aperiam aliquam qui ut. Duo cu doming mollis, mel zril integre at. Homero mediocrem te duo, mazim atomorum ad cum, ex tibique intellegat his. At sit unum reprehendunt.

		Aliquando honestatis usu te, prompta disputationi ius cu, diceret habemus ut mel. Iudicabit molestiae consequuntur his an. No vis partem nonumes antiopam, no illud choro erroribus vel. Eos ad wisi causae deterruisset. Vim timeam principes reformidans ei, cu omnis feugait detracto per. Ea mea consul reformidans, pro et dictas dissentiet. Te idque debet deterruisset vim.

		Percipit insolens at mel, quo cu quem prima putant. In iracundia comprehensam pro. Pro ut aperiam recusabo. Et mei prima consul albucius, vide nominavi incorrupte eos eu, ut has suscipit nominati. Nam enim dicta dolores no. Mucius mnesarchum est id.
	</p>
	<h1 id="css">Tutorial CSS</h1>
	<p>
		Lorem ipsum dolor sit amet, duo putant constituam et, cu vis ludus tempor democritum. Vel te affert blandit. Vis te decore appetere lobortis, eos te nostrum vituperatoribus, nostro reprehendunt mediocritatem ne qui. Dicat facer et per, an nostrud perpetua cotidieque his, qui gloriatur complectitur eu. Duo at veritus cotidieque, stet impetus pertinacia at qui. Ullum minim iracundia ut nam, per id suas graece mnesarchum.

		Ut has ferri eleifend, omnis urbanitas comprehensam cu cum. Ad quo purto prodesset interesset. Tale labore no mel. Suas hinc veri ne sed, duo nibh quodsi eligendi an. Scaevola repudiare necessitatibus ex mea, vix graecis quaerendum at. Usu meis volutpat voluptatum ut, iudico equidem eos no.

		Pro modus munere ei, vero autem ornatus sit te. Verear periculis usu in, aperiam aliquam qui ut. Duo cu doming mollis, mel zril integre at. Homero mediocrem te duo, mazim atomorum ad cum, ex tibique intellegat his. At sit unum reprehendunt.

		Aliquando honestatis usu te, prompta disputationi ius cu, diceret habemus ut mel. Iudicabit molestiae consequuntur his an. No vis partem nonumes antiopam, no illud choro erroribus vel. Eos ad wisi causae deterruisset. Vim timeam principes reformidans ei, cu omnis feugait detracto per. Ea mea consul reformidans, pro et dictas dissentiet. Te idque debet deterruisset vim.

		Percipit insolens at mel, quo cu quem prima putant. In iracundia comprehensam pro. Pro ut aperiam recusabo. Et mei prima consul albucius, vide nominavi incorrupte eos eu, ut has suscipit nominati. Nam enim dicta dolores no. Mucius mnesarchum est id.
	</p>
	<h1 id="javascript">Tutorial Javascript</h1>
	<p>
		Lorem ipsum dolor sit amet, duo putant constituam et, cu vis ludus tempor democritum. Vel te affert blandit. Vis te decore appetere lobortis, eos te nostrum vituperatoribus, nostro reprehendunt mediocritatem ne qui. Dicat facer et per, an nostrud perpetua cotidieque his, qui gloriatur complectitur eu. Duo at veritus cotidieque, stet impetus pertinacia at qui. Ullum minim iracundia ut nam, per id suas graece mnesarchum.

		Ut has ferri eleifend, omnis urbanitas comprehensam cu cum. Ad quo purto prodesset interesset. Tale labore no mel. Suas hinc veri ne sed, duo nibh quodsi eligendi an. Scaevola repudiare necessitatibus ex mea, vix graecis quaerendum at. Usu meis volutpat voluptatum ut, iudico equidem eos no.

		Pro modus munere ei, vero autem ornatus sit te. Verear periculis usu in, aperiam aliquam qui ut. Duo cu doming mollis, mel zril integre at. Homero mediocrem te duo, mazim atomorum ad cum, ex tibique intellegat his. At sit unum reprehendunt.

		Aliquando honestatis usu te, prompta disputationi ius cu, diceret habemus ut mel. Iudicabit molestiae consequuntur his an. No vis partem nonumes antiopam, no illud choro erroribus vel. Eos ad wisi causae deterruisset. Vim timeam principes reformidans ei, cu omnis feugait detracto per. Ea mea consul reformidans, pro et dictas dissentiet. Te idque debet deterruisset vim.

		Percipit insolens at mel, quo cu quem prima putant. In iracundia comprehensam pro. Pro ut aperiam recusabo. Et mei prima consul albucius, vide nominavi incorrupte eos eu, ut has suscipit nominati. Nam enim dicta dolores no. Mucius mnesarchum est id.
	</p>
</body>
</html>

Keluaran:

Menggunakan Id pada Javascript

Selain digunakan sebagai penanda suatu elemen untuk menentukan style tertentu padanya. Atribut class juga sering digunakan sebagai penanda elemen yang nantinya elemen terkait akan dapat diakses dan dimanipulasi oleh Javascript.

Apa bedanya ID dan class?

ID dipakai jika butuh memanggil satu element khusus, misal scroll ke satu section jika tombol diklik. Nama section harus berbeda-beda sehingga pakai ID. Class biasanya dipakai untuk memberi style pada element. Jika satu kelompok (class) punya style tertentu, maka semua anggota kelompok itu akan punya style yang sama.

Apa itu ID dalam HTML?

ID merupakan selector yang digunakan oleh satu tag html, ini adalah yang disarankan, karena ID itu sendiri hanya boleh digunakan untuk satu tag html. Setiap elemen hanya dapat memiliki satu tag id.

Apa Perbedaan class dan ID dalam deklarasi dan penggunaan di CSS?

Perbedaan dari class dan id adalah class di panggil pada css atau javascript dengan menggunakan tanda titik “.”, dan id di panggil pada css atau javascript dengan tanda pagar “#”, ada kelebihan di sini untuk class, yaitu class dapat di berikan pada banyak element html dan dapat di panggil sekaligus, sedangkan id hanya ...

Apa itu atribut class pada HTML?

Atribut class berfungsi untuk menentukan nama class dari suatu elemen. Berbeda dengan id yang bersifat unik, class diperbolehkan untuk digunakan oleh lebih dari satu elemen yang ditandainya. Atribut class juga sering digunakan untuk menunjuk ke nama class pada lembar gaya (style sheet).

kode html