Atribut yang terdapat dalam HTML (HyperText Markup Language) menyediakan informasi tambahan mengenai elemen HTML itu sendiri. Biasanya terletak di tag pembuka setiap elemen. Banyak atribut terdiri dari nama dan nilai; nama mencerminkan sebuah properti dari elemen yang dijelaskan, dan nilai adalah sebuah nilai dari properti tersebut.
Contohnya, atribut bahasa (lang
) menjelaskan bahasa yang digunakan di dalam elemen; sebuah nilai seperti EN-US akan menunjukkan bahwsa bahasa yang digunakan di dalam elemen adalah bahasa Inggris Amerika Serikat (United State).
<!DOCTYPE html> <html lang="en-US"> <body> <h1>Atribut</h1> <p>Contoh Atribut.</p> </body> </html>
Ada beberapa atribut terdiri dari hanya nama saja tanda menggunakan nilai, seperti required
atau checked
. Ini yang dinamakan atribut Boolean. Ini menunjukkan bahwa nama tersebut dapat memiliki dua kondisi: true atau false. Untuk atribut di HTML adanya salah satu atribut Boolean di dalam sebuah tag
menunjukkan bahwa nilai itu adalah true. Untuk lebih jelasnya, lihat contoh di bawah:
<form action="demo.php"> <input type="checkbox" name="kendaraan" value="Sepeda"> Saya memiliki sebuah sepeda<br> <input type="checkbox" name="kendaraan" value="Mobil" checked> Saya memiliki sebuah Mobil<br> <input type="submit" value="Submit"> </form>
1. Atribut Inti
Saya akan coba menjelaskan beberapa atribut inti yang anda dapat gunakan pada mayoritas elemen HTML, saya hanya menjelaskan 4 atribut inti saja, yaitu:
- Atribut id
- Atribut title
- Atribut class
- Atribut style
Atribut id
Anda dapat menggunakan atribut id ini untuk menunjukkan secara unik setiap elemen dalam suatu halaman. Anda mungkin ingin mengidentifikasi secara unik sebuah elemen sehingga anda dapat menautkan ke bagian khusus di dalam dokumen atau untuk menentukan bahwa style CSS atau bagian dari JavaScript seharusnya diterapkan pada konten hanya satu elemen dalam dokumen. Sintak yang digunakan untuk atribut id
sebagai berikut. Kita beri saja nilai ‘buku’ untuk atributnya: id=”buku”
Nah, kalau Anda ingin menggunakan atribut id
untuk membedakan antara dua elemen paragraf, seperti ini:
<!DOCTYPE html> <html lang="en-US"> <body> <p id="beli">Paragraf ini menjelaskan aturan di departemen pembelian.</p> <p id="jual">Paragraf ini menjelaskan aturan di departemen penjualan.</p> </body> </html>
Berikut ini beberapa aturan khusus untuk nilai dari atribut id:
- Harus dimulai dengan huruf (A-Z atau a-z) dan kemudian dapat diikuti oleh sejumlah huruf, angka (0-9), tanda hubung, garis bawah, titik dua, dan titik. (Anda tidak diperbolehkan mulai nilai dengan angka, tanda hubung, garis bawah, titik dua, atau titik.)
- Harus tetap unik dalam dokumen tersebut; tidak ada dua atribut
id
yang mungkin memiliki nilai sama dalam satu halaman HTML. Kasus ini harus ditangani dengan atribut class.
Atribut class
Anda dapat menggunakan atribut class untuk menentukan bahwa sebuah elemen memiliki class elemen. Contohnya, anda mungkin memiliki dokumen yang berisi banyak paragraf, dan beberapa paragraf tersebut mungkin berisi ringkasan poin penting, dalam hal ini anda dapat menambahkan atribut class yang nilainya adalah ringkasan yang relevan elemen <p>
untuk membedakan paragraph tersebut dari sisa dalam dokumen.
<!DOCTYPE html> <html lang="en-US"> <body> <p class="ringkasan">Ringkasan simpan di sini</p> </body> </html>
Ini biasanya digunakan dengan CSS, jadi anda nanti akan coba membahas posting tentang penggunaan atribut class
di lain waktu, lebih memperkenalkan CSS. Untuk sintak atribut class sebagai berikut:
class="classIni"
Nilai dari atribut ini mungkin juga dipisahkan dengan spasi dari penamaan class
, contohnya:
class="classIni1 classIni2 classIni3"
Atribut title
Atribut title memberikan title yang disarankan untuk elemen. Sintaks untuk atribut title sebagai berikut:
title=" Tentang AFAHRURROJI.net "
Perilaku dari atribut ini bergantung pada elemen yang membawanya; meskipun, ini sering ditampilkan sebagai tooltip atau saat elemen memuat. Tidak setiap elemen dapat membawa atribut judul sebenarnya perlu satu, jadi ketika Anda bertemu sebuah elemen yang sangat manfaat dari penggunaan atribut ini, Anda akan melihat perilaku itu bila digunakan dengan elemen. Lihat contoh di bawah:
<!DOCTYPE html> <html lang="en-US"> <body> <p title="Tentang AFAHRURROJI.net"> AFAHRURROJI.net adalah sebuah situs informasi tentang internet. Juga menyediakan tutorial dan refernsi yang mencakup banyak aspek web design, blogging, online marketing dan masih banyak lagi. </p> </body> </html>
Atribut style
Atribut style memungkinkan Anda untuk menerapkan aturan CSS dalam elemen. Lihat contoh di bawah bagaimana atribut ini digunakan.
<!DOCTYPE html> <html lang="en-US"> <body> <p style="font-family:arial; color:#FF0000;">Style di dalam teks.</p> </body> </html>
Sebaiknya, penerapan atribut CSS di atas digunakan dengan style sheet yang terpisah. Anda bisa bayangkan saja setiap paragraf menggunakan atribut style yang berbeda. Lain waktu khusus CSS akan dikupas tuntas lebih mendalam.
2. Internationalisasi
Anda ingin membuat dokumen HTLM dalam bahasa berbeda, ada mekanisme yang dibangun ke dalam tool yang mendorong web memungkinkan hal tersebut. Proses itu dinamakan internasionalisasi.
Dua atribut umum internasionalisasi membantu pengguna menulis halaman dengan berbagai bahasa dan rangkaian karakter:
- Atribut dir
- Atribut lang
Anda melihat setiap harinya, tetapi perlu dicatat bahwa bahkan dalam browser saat ini, dukungan untuk atribut ini masih tidak merata. Oleh karena itu jika memungkinkan Anda harus menentukan set karakter yang membuat teks ke arah yang Anda butuhkan.
Situs web dokumen W3C membantu Anda menjelaskan masalah internasionalisasi secara lebih rinci yang anda dapat temukan di www.w3.org/TR/i18n-html-tech-char/.
Atribut dir
Atribut dir memungkinkan Anda untuk menunjukkan ke browser ke arah di mana teks harus mengikuti: kiri ke kanan atau kanan ke kiri. Bila Anda ingin menunjukkan pemusatan dari seluruh dokumen (atau sebagian besar dokumen), menggunakannya dengan elemen <html> daripada elemen <body> untuk dua alasan:
- Penggunaannya pada elemen <html> memiliki dukungan yang lebih baik di browser, dan dapat diterapkan pada elemen header maupun yang di dalam tubuh.
- Anda juga dapat menggunakan atribut dir pada elemen di dalam tubuh dokumen jika Anda ingin mengubah arah sebagian kecil dari dokumen.
Nilai atribut dir
Nilai | Arti |
ltr | Kiri ke kanan (nilai standar) |
rtl | Kanan ke kiri (ini digunakan untuk bahasa seperti bahasa Ibrani atau bahasa Arab yang dibaca dari kanan ke kiri) |
Atribut lang
Atribut lang memungkinkan Anda untuk menunjukkan bahasa utama yang digunakan dalam dokumen. Atribut lang dirancang untuk menawarkan tampilan bahasa khusus untuk pengguna; meskipun, atribut ini memiliki sedikit efek pada browser utama. Manfaat menggunakan atribut lang adalah:
- Untuk mesin pencari. Ini dapat memberitahu pengguna bahasa dokumen tersebut ditulis di dalamnya
- Untuk pembaca layar. Ini mungkin perlu untuk mengucapkan bahasa yang berbeda dengan cara yang berbeda
- Untuk aplikasi. Ini dapat mengingatkan pengguna ketika salah satu mereka tidak mendukung bahasa itu atau itu adalah bahasa yang berbeda dari bahasa standarnya
Ketika digunakan dengan elemen <html>
, atribut berlaku untuk seluruh dokumen; meskipun, Anda dapat menggunakannya pada elemen lainnya, dalam hal ini hanya berlaku untuk isi dari elemen.
Nilai-nilai atribut lang merupakan ISO-639-1 standar kode bahasa dua karakter. Jika Anda ingin menentukan dialek bahasa, Anda dapat mengikuti kode bahasa dengan minus dan nama subcode. Anda bisa lihat contoh di bawah:
Nilai atribut lang
Nilai | Arti |
ar | Bahasa Arab |
en | Bahasa Inggris |
en-us | Bahasa Inggris (Amerika serikat) |
id | Bahasa Indonesia |
Kunjungi saja link http://www.w3.org/WAI/ER/IG/ert/iso639.htm untuk mendapatkan daftar lebih lengkap atribut lang yang dipakai.
Baca juga:
Leave a Reply