Tutorial HTML Part 16 : Mengenal ID dan Class pada html

Selamat sore semua, masih bersama saya, di hari ini kita akan menlanjutkan pembelajaran kita mengenai html, dan untuk hari ini materinya tentang mengenal ID dan Class.Pada tutorial html sebelumnya kita sudah membahas tentang Mengenal tag iframe pada html.Oh iya, bagi kalian yang belum membaca tutorial mengenai Menghubungkan HTML dengan CSS silahkan di baca dulu, karena pada tutorial itulah anda akan mudah untuk memahami tutorial yang akan kita bahas sekarang ini.

Mengenal ID dan Class pada html

Kalian sudah pernah lihat syntax #nama dan .nama pada css atau pada javascript ? Jika belum, berarti anda patut untuk membaca sampai habis artikel ini.Tanda # (pagar) itu adalah ID, tanda itu sering kita temukan pada syntax-syntax css dan pada javascript, sedangkan tanda . (titik) itu adalah Class, sering juga untuk digunakan pada syntax yang terdapat pada css dan javascript.Dari ID dan Class, mereka berdua juga mempunyai kekurangan dan kelebihan tersendiri.Untuk Class kita bisa menggunakan banyak element html dan dapat di panggil sekaligus, sedangkan ID hanya bisa menggunakan satu  penandaan saja, satu nama id hanya bisa di berikan kepada satu element html saja.

Agar supaya anda bisa memahaminya, saya akan memberikan contohnya.

Misalkan saya akan membuat kotak, kotak ini nantinya yang akan membedakan id dan class nantinya, langsung buka saja text editor anda dan ketik script di bawah ini.

 
<!-- Ini adalah contoh penggunaan Class -->
    <span class="kotak">Ini adalah kotak 1 Class</span>
    <span class="kotak">Ini adalah kotak 2 Class</span>
    <span class="kotak">Ini adalah kotak 3 Class</span>

    <!-- Ini adalah contoh penggunaan ID -->
    <span id="kotak">Ini adalah kotak ID</span>

 
 .kotak{
        margin: 50px;
        padding: 40px;
        width: 200px;
        background-color: aqua;
     }

     #kotak{
        margin: 30px;
        padding: 40px;
        width: 500px;
        background-color: brown;
     }

Tutorial HTML : Mengenal ID dan Class pada html

Coba kalian perhatikan pada gambar di atas, dari gambar di ataslah kita akan mengetahui id dan class, seperti yang saya bilang sebelumnya class bisa menggunakan banyak element html, sedangkan id hanya bisa menggunakan satu element html.

Gimana sudah pahamkan? bagi yang belum paham silahkan di baca-baca lagi, atau kalau bingung bisa langsung memberikan komentar pada kolom komentar.

Sekian dari saya, Terima Kasih.