Pada pembuatan website atau aplikasi web kita sangat membutuhkan atribut id dan class. Kedua atribut tersebut digunakan untuk penamaan dalam elemen HTML dengan tujuan untuk memudahkan penulis dalam pengaturan di CSS. Namun dari keduanya terdapat beberapa perbedaan. Apa saja perbedaan tersebut?

1. Atribut ID
Atribut ID bersifat unik di dalam suatu halaman. Atribut ini digunakan untuk mencerminkan style untuk elemen yang unik. Dalam pemanggilan atribut ID ditandai dengan "#" (tagar).
 
Berikut contoh penggunaan atribut ID yang dideklarasikan oleh ID "# h01" yang akan digunakan untuk menampilkan 'Tutorial Html' dalam warna biru.

<!DOCTYPE html>
<html>
	<head>
		<style>
			#h01 {
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1 id="h01">Html Tutorials</h1>
		<h2>This is a paragraph.</h2>
		<h3>This is a paragraph.</h3>	
	</body>
</html>

Yang akan menghasilkan keluaran seperti pada gambar berikut.
 
2. Atribut Class
Atribut Class digunakan untuk menambahkan style yang sama ke sekelompok elemen. Atribut ini tidak unik dalam sebuah halaman web. Artinya atribut ini bisa dipanggil berulang kali. Dalam pemanggilan atribut Class ditandai dengan "." (titik).
 
Berikut contoh penggunaan atribut Class yang dideklarasikan oleh Class ".h01" yang akan digunakan untuk menampilkan 'Tutorial Html' dan 'Ini adalah paragraf' dalam warna biru.
 
<!DOCTYPE html>
<html>
	<head>
		<style>
			.h01 {
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1 class="h01">Html Tutorials</h1>
		<h2>This is a paragraph.</h2>
		<h3 class="h01">This is a paragraph.</h3>	
	</body>
</html>

Yang akan menghasilkan keluaran seperti pada gambar berikut.
 
 
Sumber : https://www.includehelp.com/code-snippets/difference-between-id-and-class-attribute-in-html.aspx
Bingung tentang sourcecode atau pemrograman yang ingin dipelajari? TANYA DI SINI
Bingung cari modul, soal, pembahasan mata kuliah? CARI DI SINI