tutorial html

Mengenal Atribut Id dan Class Pada HTML

Mengenal Atribut Id dan Class Pada HTML – Atribut id dan class akan sering kita gunakan dalam proses membuat sebuah halaman web menggunakan html.

Jika kamu belum mengetahui apa itu atribut, silahkan baca sejenak artikel yang pernah dipublish sebelumnya di ngodeinweb yakni perbedaan tag dan atribut.

Dalam html terdapat berbagai macam atribut antara lain atribut href (hypertext references), atribut src (source), atribut target dan salah satu yang akan sering kita gunakan adalah atribut id dan class.

Attribut id dan class sendiri adalah atribut yang digunakan sebagai penanda sebuah baris kode atau blok kode dalam html. Ibarat manusia, atribut id dan class ini adalah sebuah identitas yang melekat.

Namun berbeda dengan identitas manusia yang tidak boleh sama, value dari atribut id dan class ini boleh sama antara satu atau lebih baris kode.

Mari perhatikan contoh berikut.

Misalnya saya ingin membuat beberapa text yang masing-masing text nantinya memiliki warna yang berbeda. Kita buat file html baru dengan nama index.html. Nama file ini opsional, kamu bisa mengubah nama file tersebut sesuai keinginanmu.

Buatlah tiga buah tag heading dan coba buka file index.html menggunakan web browser.

id class

 

Terlihat bahwa text tersebut masih memiliki warna yang sama yaitu hitam. Sekarang kita akan memberikan warna merah dengan cara berikan sebuah style ( style=”color : red;” ) kepada masing – masing text tersebut.

 

Sekarang refresh atau muat ulang browser kamu.

id class

Terlihat mudah bukan, lalu bagaimana jika ada banyak text yang harus diberi warna? Bisa saja kita menggunakan cara tersebut lalu memberikan warna untuk setiap tag, namun cara tersebut tidak efisien karena kita harus memberikan style untuk masing – masing tag.

Solusinya kita dapat memanfaatkan atribut id dan class sebagai penanda.

 

Dengan sedikit bantuan CSS kita dapat memberikan warna merah untuk setiap text. Berikut perubahan kode programnya.

Dalam kode tersebut saya manambahkan class dengan value text ( class=”ubah” ) pada text sebagai penanda. Kemudian dengan sedikit bantuan kode CSS saya memanggil class ubah dan saya beri warna merah.  Untuk sekarang kamu boleh mengabaikan kode CSS tersebut.

Berikut hasilnya:

id class

 

Lalu mengapa text baris ke-tiga tidak berwarna merah melainkan berwarna hitam?

Jika kita perhatikan lagi kode html tersebut, terlihat bahwa saya memberikan class hanya pada text baris pertama dan kedua sedangkan text baris ketiga tidak memiliki class. Itulah sebabnya text baris ke tiga tidak berubah warna.

Ini juga berarti bahwa efek yang kita berikan untuk sebuah id atau class hanya berpengaruh pada id atau class tersebut dan tidak mempengaruhi element yang lain.

Lalu bagaimana jika kita ingin merubah agar semua text berwarna merah tanpa harus menulis class untuk masing – masing text seperti kode sebelumnya? Dalam kasus ini kita dapat memanfaatkan atribut id. Berikut perubahan kode htmlnya.

Mengenal Atribut Id dan Class Pada HTML

Dalam kode html tersebut saya membuat sebuah tag div dengan atribut id ( id=”ubah” ) yang di dalamnya terdapat beberapa text. Kemudian saya panggil id tersebut dan memberikan warna merah menggunakan CSS. Hasilnya sama bukan?

Perbedaannya dengan kode sebelumnya adalah hanya pada atribut yang digunakan yaitu id dan class. Atribut id bisanya digunakan untuk penanda secara global dan biasanya hanya terdapat beberapa atribut id dalam sebuah halaman html.

 

Baca Juga : Tag Heading dan Tag Paragraf

 

Atribut id tidak hanya digunakan sebagai penanda, namun juga dapat digunakan untuk berpindah kebagian lain dalam halaman html yang sama.

Berikut kode lengkap pembahasan kita kali ini:

 

Sekian untuk pembahasan mengenai atribut id dan class. Penggunaan keduanya tidak sebatas seperti yang saya contohkan, kamu dapat berkreasi sendiri agar dapat lebih memahami serta mengenal atribut id dan class pada HTML

Lanjut ke pembelajaran selanjutnya yaitu HTML List Element.

 

Leave a Reply

Your email address will not be published. Required fields are marked *