Atribut HTML
- Semua elemen HTML dapat memiliki atribut
- Atribut menyediakan informasi tambahan tentang elemennya.
- Atribut selalu dispesifikasikan pada tag awal.
- Atribut biasanya memiliki struktur yang terdiri dari nama/nilai berkorespondensi seperti nama="nilai"
Atribut href
link HTML didefnisikan sebagai tag <a>. Alamat link tersebut dispesifikasikan di dalam atribut href.contoh :
<a href="http://www.purwana.net">Ini adalah link</a>
info lebih lanjut tentang link dan tag <a> dapat dipelajari nanti pada tutorial ini.
Atribut src
gambar HTML didefinisikan sebagai tag <img>nama file dari sumber gambar dispesifikasikan pada atribut src
contoh:
<img src="gambar_si_cantik.jpg"/>
Atribut width dan height
Gambar pada HTML memiliki kumpulan berbagai jenis atribut, dimana diantaranya menspesifikasikan lebar dan tinggi dari sebuah gambar:contoh
<img src="gambar_si_cantik.jpg" width="500" height="600"/>
Ukuran gambar pada contoh diatas dispesifikasikan dalam piksel: width="500" berarti memiliki lebar 500 piksel.
Pelajari lebih lanjut tentang gambar di bab Gambar HTML.
Atribut alt
Atribut alt menspesifikasikan sebuah teks alternatif untuk digunakan, saat gambar tidak dapat ditampilkan.nilai dari atribut ini dapat dibaca oleh screen reader. Dengan cara ini, seseorang "mendengar" halaman web, contoh : seorang tunanetra, dapat mendengar elemen tersebut.
contoh:
<img src="gambar_si_cantik.jpg" alt="si cantik berkaos pink"/>
Atribut alt akan sangat berguna jika gambar tidak ada.
contoh :
Apa yang akan terjadi pada kode berikut bila file gambar tidak ada?
<img src="gambar_salah_ketik.jpg" alt="si cantik berkaos pink"/>
Atribut style
Atribut style digunakan untuk menspesifikasikan styling dari sebuah elemen, seperti warna, font, ukuran, dan lain - lian.cobtoh:
<p style="color:red">Saya seorang paragraf</a>
pelajari lebih lanjut tentang styling kemudian di bagian Tutorial CSS.
Atribut lang
Bahasa pada sebuah dokumen dapat dideklarasikan pada tag <html>.Bahasa didekralarasikan dengan atribut lang.
Mendeklarasikan bahasa sangat penting untuk aksesibilitas aplikasi(screen reader) dan mesin pencari:
<!DOCTYPE html>
<html lang="id-ID">
<body>
...
</body>
</html>
Kata pertama pada id-ID menunjukkan bahasa (id). Jika terdapat dialek, gunakan kata kedua (ID)
Atribut title
Disini, atribut judul ditambahkan pada elemen <p>. Nilai dari atribut title akan ditampilkan sebagai tooltip saat tetikus diarahkan ke paragraf:contoh :
<p title="Saya adalah tooltip">
Ini adalah paragraf
</p>
Saran : Gunakan Lowercase pada Atribut
Standar HTML5 tidak membutuhkan nama atribut dengan lowercase
Atribut title dapat dituli dengan uppercase maupun lowercase seperti title atau TITLE.
W3C merekomendasikan lowercase di HTML, dan lowercase dibutuhkan untuk jenis dokumen yang ketat seperti XHTML.
Saran : Kutip Nilai Atribut
Standar HTML5 tidak membutuhkan tanda kutip pada nilai atribut
sebagai contoh pada atribut href dapat ditulis sbb:
<a href=http://www.purwana.net>
W3C merekomendasikan tanda kutip pada HTML, dan menuntut penggunaan tanda kutip untuk jenis dokumen yang ketat seperti XHTML. Terkadang tanda kutip diperlukan seperti contoh berikut, atribut judul tidak ditampilkan dengan baik, karena mengandung karakter spasi.
<p title=Tentang kami>
Kutip Satu atau Dua?
Penggunaan kutip dua adalah yang paling sering digunakan di HTML, namun kutip satu juga dapat digunakan. Pada situasi tertentu, ketika nilai atribut terdapat tanda kutip dua di dalamnya, kita perlu menggunakan tanda kutip satu:
<p title='Yayan "Mad Dog" Ruhian'>
atau bisa sebaliknya:
<p title="Yayan 'Mad Dog' Ruhian">
Rangkuman:
- Semua elemen HTML dapat memiliki atribut
- atribut title menyediakan tambahan fitur informasi "tool-tip"
- atribut href menyediakan informasi alamat untuk link
- atribut width dan height menyediakan informasi ukuran untuk gambar
- atribut alt menyediakan teks alternatif untuk screen reader
- disini kita akan selalu menggunakan lowercase pada nama attribut
- disini kita akan selalu menggunakan tanda kutip pada nilai atribut
Berikut ini beberapa atribut yang sering digunakan di HTML
| Atribut | Deskripsi |
|---|---|
| alt | Teks alternatif saat gambar tidak bisa ditampilkan |
| disabled | Menspesifikasikan input element yang disabled |
| href | Menspesifikasikan URL (alamat web) untuk link |
| id | Menspesifikasikan id untuk elemen yang unik |
| src | Menspesifikasikan URL (alamat web) untuk image/gambar |
| style | Menspesifikasikan style inline CSS untuk sebuah element |
| title | Menspesifikasikan informasi ekstra tentang elemen (ditampilkan sebagai tool tip) |
