Class HTML


Kelas atau class dalam HTML merupakan sebuah atribut sama seperti id yang digunakan sebagai penanda suatu elemen. Class sering digunakan untuk manipulasi CSS dan Javascript. Class dipanggil dengan tanda titik atau dot di depan (.) dilanjut dengan nama class tersebut. Class dibutuhkan ketika banyak elemen akan dibuat dengan memiliki pola yang sama, pola ini akan disimpan di dalam class tertentu yang kemudian class tersebut akan didefinisikan ke dalam masing-masing elemen. Contoh penerapan class bisa dilihat di bawah ini.

<!DOCTYPE html>
<html>
<head>
<style>
    .judul-artikel{
	background-color:pink; 
	border: 2px solid black;
	text-align: center;
	padding:5px;
     }
     .artikel{	
	background-color:black;
	color: pink;
	border: 2px solid pink;
	text-align: center;
	padding:5px;
      }
</style>
</head>
<body>
    <h1 class="judul-artikel"> Judul Konten 1</h1>
    <p class="artikel"> Hello World 1</p>
    <h1 class="judul-artikel"> Judul Konten 2</h1>
    <p class="artikel"> Hello World 2</p>
</body>
</html>

Judul Konten 1

Hello World 1

Judul Konten 2

Hello World 2


Perbedaan Atribut Id dan Atribut Class


Perbedaan mendasar antara atribut id dan atribut kelas (class) adalah bila atribut id hanya boleh digunakan pada satu elemen yang dilabelinya, yang mana berarti elemen tersebut merupakan elemen unik atau satu-satunya. Maka berbeda dengan atribut kelas yang dapat digunakan kepada lebih dari satu elemen yang dilabelinya. Selain itu atribut id hanya boleh digunakan satu kali, jadi ketika ada dua elemen dengan id yang sama maka hanya elemen pertama yang akan mendapatkan efek penggunaan id tersebut. Sedangkan kelas dapat digunakan berulang kali. Kemudian id dipanggil menggunakan tanda pagar atau hash (#) di depannya. Sedangkan class menggunakan tanda titik atau dot (.).


Mendefinisikan Class pada Tag yang Berbeda


Class dapat didefinisikan ke sembarang jenis tag yang berbeda seperti contoh di bawah ini.

<h1 class="judul-artikel">Hello World h1</h1>
<h2 class="judul-artikel">Hello World h2</h2>
<h3 class="judul-artikel">Hello World h3</h3>
<h4 class="judul-artikel">Hello World h4</h4>
<h5 class="judul-artikel">Hello World h5</h5>
<h6 class="judul-artikel">Hello World h6</h6>
<p class="judul-artikel">Hello World p</p>

Hello World h1

Hello World h2

Hello World h3

Hello World h4

Hello World h5
Hello World h6

Hello World p


Elemen Dengan Lebih dari Satu Class


Class yang berbeda dapat didefinisikan lebih dari satu dalam suatu elemen.

<!DOCTYPE html>
<html>
<head>
<style>
    .judul-artikel{
	background-color:pink; 
	border: 2px solid black;
	text-align: center;
	padding:5px;
     }
     .artikel{	
	background-color:black;
	color: pink;
	border: 2px solid pink;
	text-align: center;
	padding:5px;
      }
      .desain-teks{
	text-shadow: 2px 2px black;
	color: white;
      }
</style>
</head>
<body>
    <h1 class="judul-artikel"> Judul Konten 1</h1>
    <p class="artikel"> Hello World 1</p>
</body>
</html>

Judul Konten 1