HTML : Mengenal Class & Id pada HTML

Class dan ID, sesuai dengan yang dijelaskan pada tutorial seebelumnya di belajar HTML : Menghubungkan HTML Dengan CSS dijelaskan bahwa class dan id sangat penting. leh sebab itu pada tutorial kali ini akan dijelaskan apa itu Class dan ID pada HTML, dan apa perbedaan antara class dan id pada HTML.

Class dan ID bisa dibilang sebagai penanda pada HTML, maksud penanda disini adalah element - element HTML dapat diberi tanda dengan class dan id . Untuk apa diberi tanda? agar dapat di manipulasi menggunakan css dan javascript. Bayangan sederhananya jika sobat memiliki 5 buah kotak, semua kotak yang sobat miliki warna biru, kemudian sobat ingin merubah kotak ke 3 saja tanpa mengganti yang lain. Disinilah kita menggunakan Class dan ID, untuk memberikan tanda atau nama pada kotak sobat agar bisa diubah dan kotak yang lain tidak akan berubah.

MENGENAL CLASS DAN ID PADA HTML
Perbedaan dari class dan id adalah class dipanggil pada CSS atau Javascript dengan menggunakan tanda titik ".", dan id dipanggil pada CSS atau Javascript dengan tanda pagar "#", ada kelebihan disini untuk class, yaitu class dapat diberikan pada banyak element HTML dan dapat dipanggil sekaligus, sedangkan ID hanya dapat bekerja pada satu penandaan saja, maksudnya satu nama id hanya bisa diberikan pada satu element saja, perhatikan contoh berikut untuk memberikan pemahaman kepada sobat.

Berikan nama index.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML : Mengenal Class & Id pada HTML</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Mengenal Class dan Id pada HTML<br/></h1>
    
    <div class="kotak">kotak 1</div>
    <div class="kotak">kotak 2</div>
    <div class="kotak">kotak 3</div>
    
    <div id="kotak">Kotak 4</div>
</body>
</html>

Buat file dengan nama style.css

h1{
    color: red;
    font-family: sans-serif;
    text-align: center;
}

.kotak{
    padding: 50px;
    width: 100px;
    color: #fff;
    margin: 10px;
    background: pink;
}

#kotak{
    width: 400px;
    color: #fff;
    background: green;
    padding: 50px;
}

Hasil script saat di run

Perhatikan contoh diatas, kotak 1, kotak 2 kita beri tanda dengan class yang kita beri nama "kotak", dan kotak 4 kita beri tanda id yang beri nama kotak juga. maka perbedaanya disini akan tampak, bahwa class bisa dipanggil banyak sekaligus, ini dibuktikan kotak 1 dan dua 2 diberi tanda class yang sama yaitu kotak, dan kotak 3 kita ber tanda dengan id kotak. Perlu diingat class dipanggil dengan tanda titik "." dan id dipanggil dengan tanda pagar "#" . Sekian penjelasan terakhir Belajar HTML semoga bermanfaat sebagai bahan belajar kawan semua. Sekian dan Terima Kasih

REFERENSI : www.malasngoding.com