Atribut mendefinisikan karakteristik tambahan atau properti elemen seperti lebar dan tinggi gambar. Atribut selalu ditentukan dalam tag awal (atau tag pembuka) dan biasanya terdiri dari pasangan nama / nilai seperti name = “value”. Nilai atribut harus selalu dilampirkan dalam tanda kutip.
Beberapa atribut diperlukan untuk elemen tertentu. Misalnya, tag <img> harus mengandung atribut src dan alt. Mari kita lihat beberapa contoh penggunaan atribut di bawah ini :
<img src="images/smiley.png" width="30" height="30" alt="Smiley"> <a href="https://www.google.com/" title="Search Engine">Google</a> <abbr title="Hyper Text Markup Language">HTML</abbr> <input type="text" value="John Doe">
Dalam contoh di atas src yang berada di dalam tag <img> adalah atribut dan image menjelaskan nilainya. Demikian pula href di dalam tag <a> adalah atribut dan tautan yang ada adalah nilainya, dan sebagainya.
Ada beberapa atribut dalam HTML5 yang tidak terdiri dari pasangan nama / nilai tetapi terdiri dari hanya nama. Atribut semacam itu disebut atribut Boolean. Contoh beberapa atribut Boolean yang umum digunakan checked, disabled, readonly, required, etc.
<input type="email" required> <input type="submit" value="Submit" disabled> <input type="checkbox" checked> <input type="text" value="Read only text" readonly>
Atribut Umum Yang Dipergunakan
Ada beberapa atribut seperti id, title, class, style. Yang dapat kalian gunakan pada sebagian besar elemen HTML. Berikut penjelasan penggunaannya.
Atribut id
Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama. Perhatikan contoh berikut :
<div id='menu'>
<ul id='menu'>
<li>Beranda</li>
<li>Tutorial</li>
</ul>
</div>
Catatan: Id suatu elemen dalam sebuah file harus memiliki penamaan yang unik. Tidak ada dua elemen dalam satu file yang sama yang dapat dinamai dengan id yang sama, dan setiap elemen hanya dapat memiliki satu id.
Atribut Class
Seperti atribut id, atribut kelas juga digunakan untuk mengidentifikasi suatu elemen. Tetapi tidak seperti id, atribut class tidak harus memiliki penamaan yang unik dalam sebuah file. Ini berarti kalian bisa menerapkan class yang sama ke beberapa elemen dalam sebuah file, seperti yang ditunjukkan pada contoh berikut:
<input type="text" class="highlight"> <div class="box highlight">Some content</div> <p class="highlight">This is a paragraph.</p>
Tips: Karena class dapat diterapkan ke banyak elemen, oleh karena itu penamaan apa pun yang ditulis ke kelas tersebut akan diterapkan ke semua elemen yang memiliki class tersebut.
Atribut Title
Atribut title memungkinkan kalian untuk memberikan informasi tambahan tentang link. Ini sering muncul sebagai teks tooltip ketika mouse bergerak di atas link (hover). Cobalah contoh berikut untuk memahami bagaimana atribut ini bekerja :
<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="images/kites.jpg" title="Click to view a larger image">
<img src="images/kites-thumb.jpg" alt="kites">
</a>
Atribut Style
Atribut style memungkinkan kalian menentukan gaya CSS seperti warna, font, batas, dll. Langsung di dalam elemen. Berikut contohnya :
<p style="color: blue;">This is a paragraph.</p> <img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky"> <div style="border: 1px solid red;">Some content</div>
