21 Jan 2017

Belajar HTML : Attributes

Belajar HTML attribute

Attribute pada HTML memberikan informasi tambahan tentang Element HTML.

HTML Attributes

  • Semua Element pada HTML dapat memiliki beberapa attribute
  • Attribute memberikan informasi tambahan tentang Element
  • Attribute selalu terletak di dalam tag pembuka
  • Attribute biasanya terdapat name/value secara berpasangan, seperti:  name="value"

Attribute Lang

Pilihan Bahasa dari sebuah dokumen HTML dapat di deklarasikan di dalam <html> tag.
Pilihan Bahasa dideklarasikan dengan attribute lang.
Mendeklarasikan sebuah pilihan bahasa merupakan hal penting untuk aksesibilitas aplikasi seperti: Screen Readers dan Search Engines. Seperti contoh berikut :

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

Dua huruf bertama digunakan untuk menentukan bahasa dari dokumen (en). Jika ada yang dialect, maka gunakanlah dua huruf tambahan (US).

Attribute title

Berikut ini merupakan sebuah attribut title yang ditambahkan ke element <p>. value dari sebuah attribut title akan di tampilkan sebagai tooltip ketika kursor mengarah ke paragraf tersebut.

<p title="Saya adalah tooltip">
Ini adalah paragraf.
</p>

Attribute href

Link pada HTML ditampilkan dengan menggunakan <a>. Alamat dari link tersebut di tentukan menggunakan attribut href:

<a href="https://gagalgaptech.blogspot.com/">Ini adalah sebuah link</a> 

Kamu akan mempelajari tentang links dan tag <a> secara lebih lanjut di tutorial berikutnya.

Size Attributes

Sebuah gambar pada HTML dapat ditampilkan menggunakan tag <img>.
Nama file dari gambar tersebut (src), dan ukuran dari gambar tersebut (width and height). Semuanya telah disediakan HTML dalam bentuk attributes:

 <img src="https://gagalgaptech.blogspot.co.id/favicon.ico" width="104" height="142"> 

Ukuran gambar di tentukan dalam pixels: width="104" berarti 104 memiliki lebar sebesar 104 screen pixels.
Kamu akan mempelajari tentang tag <img> secara mendalam di tutorial berikutnya.

Attribute alt

Attribute alt digunakan untuk menentukan teks alternatif yang digunakan, ketika gambar tidak dapat ditampilkan.
value dari attribute alt dapat dibaca oleh screen readers dan Search Engine.

 <img src="https://gagalgaptech.blogspot.co.id/favicon.ico" alt="gagalgaptech.blogspot.com" width="104" height="142"> 

Direkomendasikan: Menggunakan Lowercase Attributes

Pada standart dari HTML5 tidak mengharuskan memberi penamaan attribute menggunakan huruf kecil.
Attribute title dapat ditulis menggunakan huruf besar maupun huruf kecil seperti Title atau TITLE.
W3C merekomendasikan untuk menggunakan huruf kecil pada sebuah HTML, dan untuk dokumen yang sangat ketat dengan validasi seperti XHTML akan mengharuskan kamu untuk menggunakan huruf kecil.
Banyak Programmer dan Develeloper selalu menggunakan huruf kecil dalam penamaan attributes.

Disarankan: Menggunakan Tanda Petik pada Attribute Values

Pada standard HTML5 tidak mengharuskan kamu menggunakan tanda petik dalam penulisan value attribut.
Berikut ini merupakan contoh dari Attribute href:

 <a href=https://gagalgaptech.blogspot.co.id>

W3C merekomendasikan untuk menggunakan tanda petik dalam penulisan value attribute, dan untuk dokumen yang sangat ketat akan validasi seperti XHTML akan mengharuskan kamu menuliskan value dari attribute menggunakan tanda petik.
Kadang - kadang memang harus mengguanakn tanda petik dalam penulisan value attribute. Berikut ini contoh dari attribut title yang tidak ditapmpilkan dengan benar oleh browser karena terdapat spasi di dalamnya :

 <p title=Gagal Gaptech>

Menggunakan tanda petik merupakan hal yang umum. Menghilangkan tanda petik dapat menghasilkan error.
Banyak Programmer dan Developer yang selalu menggunakan tanda petik dalam penulisan value untuk attribute.

Petik Tunggal atau Petik Ganda?

Tanda petik ganda disekitar value merupakan hal yang sering dijumpai di banyak dokumen HTML, tapi Tanda petik tunggal juga dapat digunakan.
Pada situasi tertentu, ketika value dari attribut terdapat tanda petik tunggal, maka kamu perlu menggunakan petik tunggal:

<p title='John "ShotGun" Nelson'>

atau sebaliknya:


<p title="John 'ShotGun' Nelson">

Rangkuman

  • Semua Element HTML dapat memiliki beberapa attribute.
  • Attribute title ditampilkan sebagai tooltip yang memiliki informasi tambahan.
  • Attribute href digunakan untuk menambahkan alamat untuk link.
  • Attribute width dan height digunakan untuk memberikan ukuran dari gambar.
  • atribute alt digunakan untuk menambahkan teks agar mudah dibaca oleh Search Engine.
  • Banyak orang - orang yang selalu menggunakan lowercase pada penamaan atribute
  • Banyak orang - orang yang yang selalu menggunakan tanda petik dalam pemberikan value atribute dengan tanda petik ganda.