Atribut HTML

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> 

Jalankan Contoh

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"> 

Jalankan Contoh

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"> 

Jalankan Contoh

Url Relative #

URL relative adalah lokasi gambar yang relative terhadap struktur direktori tempat dokumen HTML berada.

 <img src="nextgen.jpg"> 

Jalankan Contoh

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">

Jalankan Contoh

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> 

Jalankan Contoh

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> 

Jalankan Contoh

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> 

Jalankan Contoh

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> 

Jalankan Contoh

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 (‘).