Atribut adalah informasi atau properti tambahan suatu tag atau elemen HTML. Tag bisa mempunyai satu atau beberapa atribut sekaligus. Beberapa tag tidak mempunyai atribut. Berikut beberapa aturan tentang atribut :
- Hampir semua tag pada HTML bisa mempunyai atribut.
- Atribut memberikan informasi tambahan sebagai petunjuk bagi web browser untuk menampilkan tag tersebut.
- Atribut selalu berada dalam tag pembuka pada setiap tag pada HTML.
- Atribut selalu ditulis dalam bentuk pasangan nama atribut / nilai atribut dengan format nama atribut=nilai atribut.
Di bawah ini akan dibahas beberapa atribut penting dalam tag. Atribut tag pada HTML sangat banyak dan beragam dan tidak semua dapat dijelaskan pada tutorial ini. Referensi lengkap atribut setiap tag dapat dilihat pada link di bawah ini.
Referensi Lengkap Atribut Elemen HTML
Atribut href
Atribut href dipakai pada link (tag a). Atribut href berisi URL halaman website yang dibuka pada saat link diklik.
<a href="https://nextgen.co.id">Visit Nextgen</a> Atribut src
Atribut src dipakai pada image (tag img). Atribut src berisi lokasi gambar atau URL gambar yang ditampilkan pada image.
<img src="https://nextgen.co.id/nextgen.jpg"> Ada dua cara untuk menentukan lokasi gambar pada atribut src.
Url Absolute
URL absolute adalah lokasi gambar dengan format URL yang utuh. URL yang utuh lengkap dengan nama domain (alamat server) dan folder.
<img src="https://nextgen.co.id/nextgen.jpg"> Url Relative
URL relative adalah lokasi gambar yang relative terhadap struktur direktori tempat dokumen HTML berada.
<img src="nextgen.jpg"> Atribut width dan height
Atribut width dan height dipakai pada tag img. Atribut width dan height berisi ukuran gambar pada saat ditampilkan. Ukuran ini diberikan dalam bentuk panjang dan lebar memakai satuan pixel.
<img src="nextgen.jpg" width="500" height="600">Atribut sytle
Atribut style dapat dipakai pada hampir semua tag HTML. Atribut style berisi CSS style untuk suatu tag. CSS style akan dibahas lebih detil pada tutorial selanjutnya. CSS style berisi properti untuk mengatur tampilan tag, seperti warna (color), jenis huruf (font), ukuran (size) dan lain sebagainya.
<p style="color:red;">This is a red paragraph.</p> Atribut title
Atribut title juga dapat dipakai pada hampir semua tag. Atribut title digunakan untuk menampilkan text tooltip apabila tag tersebut disorot oleh mouse pointer.
<p title="I'm a tooltip">This is a paragraph.</p> Cara Penulisan Atribut
Nama atribut bersifat tidak case sensitive, artinya baik ditulis memakai huruf besar ataupun huruf kecil akan menghasilkan output yang sama.
<p title="I'm a tooltip">This is a paragraph.</p>
<p TITLE="I'm a tooltip">This is a paragraph.</p> Contoh di atas akan menghasilkan dua paragraf yang sama.
Sangat disarankan selalu menuliskan nama atribut dengan memakai huruf kecil. Ketentuan ini sudah sangat lazim dalam penulisan dokumen HTML.
Sangat disarankan untuk selalu memakai quote dalam penulisan nilai atau isi atribut.
<p title="This is title">Attribute with quote.</p>
<p title=Title>Attribute without quote (not recommended).</p> Perhatikan contoh di atas, selalu disarankan untuk memakai quote untuk nilai atau isi atribut.
Nilai atau isi atribut disarankan untuk ditulis dengan memakai double quote (“) tapi untuk kasus tertentu diperbolehkan untuk ditulis dengan memakai single quote (‘).