Atribut HTML

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

Tutorial sebelumnya : Cara Membuat Paragraf Di HTML
Tutorial setelahnya : Css Inline HTML
Semua Tutorial HTML : Tutorial HTML 

Tinggalkan Balasan

Keranjang Belanja0
Keranjang belanja kosong ...
0