Atribut dibahas secara singkat dalam Ringkasan HTML; kini saatnya mempelajarinya secara mendalam.
Atribut adalah faktor yang membuat HTML begitu canggih. Atribut adalah nama yang dipisahkan spasi dan pasangan nama/nilai yang muncul di tag pembuka, yang memberikan informasi tentang dan fungsi elemen.
Atribut menentukan perilaku, penautan, dan fungsi elemen. Beberapa atribut bersifat global, yang berarti atribut tersebut dapat muncul dalam tag pembuka elemen apa pun. Atribut lain berlaku untuk beberapa elemen, tetapi tidak semua, sementara atribut lain bersifat spesifik per elemen, yang hanya relevan dengan satu elemen. Di HTML, semua atribut kecuali boolean, dan sampai batas tertentu atribut terenumerasi, memerlukan nilai.
Jika nilai atribut menyertakan spasi atau karakter khusus, nilai tersebut harus dikutip. Karena alasan ini, dan agar lebih mudah dibaca, sebaiknya mengutip.
Meskipun HTML tidak peka huruf besar/kecil, beberapa nilai atributnya sensitif. Nilai yang merupakan bagian dari spesifikasi HTML tidak peka huruf besar/kecil. Nilai string yang ditentukan, seperti nama class dan ID, peka huruf besar/kecil. Jika nilai atribut peka huruf besar/kecil di HTML, nilai tersebut peka huruf besar/kecil saat digunakan sebagai bagian dari pemilih atribut di CSS dan JavaScript; jika tidak, tidak peka huruf besar/kecil.
<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">
<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">
Atribut Boolean
Jika ada atribut boolean, nilainya akan selalu benar. Atribut boolean mencakup autofocus, inert, checked, disabled,
required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple,, dan selected.
Jika satu (atau beberapa) atribut ini ada, elemen akan dinonaktifkan, wajib diisi, hanya-baca, dll. Jika tidak ada, elemen tersebut tidak ada.
Nilai Boolean dapat dihilangkan, ditetapkan ke string kosong, atau menjadi nama atribut; tetapi nilai tidak harus benar-benar ditetapkan ke string true. Semua nilai, termasuk true, false, dan 😀, meskipun tidak valid, akan di-resolve ke true.
Ketiga tag ini setara:
<input required>
<input required="">
<input required="required">
Jika nilai atribut salah, hapus atribut. Jika atribut bernilai benar, sertakan atribut namun jangan berikan nilai.
Misalnya, required="required" bukan nilai yang valid dalam HTML; tetapi karena required adalah boolean, nilai yang tidak valid akan di-resolve menjadi benar (true).
Namun, karena atribut terenumerasi yang tidak valid tidak selalu di-resolve ke nilai yang sama dengan nilai yang hilang, akan lebih mudah untuk masuk ke dalam
kebiasaan menghilangkan nilai daripada mengingat atribut mana yang bersifat boolean versus enumerasi dan berpotensi memberikan nilai yang tidak valid.
Saat beralih antara benar dan salah, tambahkan dan hapus atribut sekaligus dengan JavaScript, bukan mengalihkan nilai.
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
Perhatikan bahwa dalam bahasa XML, seperti SVG, semua atribut harus menyertakan nilai, termasuk atribut boolean.
Atribut yang dihitung
Atribut yang dihitung terkadang dikacaukan dengan atribut boolean. Atribut ini adalah atribut HTML yang memiliki serangkaian nilai valid yang telah ditentukan sebelumnya.
Seperti atribut boolean, atribut memiliki nilai default jika atribut ada tetapi nilainya tidak ada. Misalnya, jika Anda menyertakan <style contenteditable>,
nilai defaultnya adalah <style contenteditable="true">.
Namun, tidak seperti atribut boolean, menghilangkan atribut tidak berarti bahwa atribut tersebut salah; atribut yang ada dengan nilai yang hilang
belum tentu benar; dan default untuk nilai yang tidak valid tidak harus sama dengan string null. Melanjutkan contoh tersebut,
contenteditable ditetapkan secara default ke inherit jika tidak ada atau tidak valid, dan dapat secara eksplisit ditetapkan ke false.
Nilai defaultnya bergantung pada atribut. Tidak seperti nilai boolean, atribut tidak secara otomatis bernilai "true" jika ada. Jika Anda
menyertakan <style contenteditable="false">, elemen tersebut tidak dapat diedit. Jika nilainya tidak valid, seperti <style contenteditable="😀">,
atau, yang mengejutkan, <style contenteditable="contenteditable">, nilainya tidak valid dan ditetapkan secara default ke inherit.
Pada sebagian besar kasus dengan atribut yang dihitung, nilai yang tidak ada dan tidak valid adalah nilai yang sama. Misalnya, jika atribut type pada <input>
tidak ada, ada tetapi tanpa nilai, atau memiliki nilai yang tidak valid, atribut tersebut akan ditetapkan secara default ke text. Meskipun perilaku ini sudah umum, tetapi bukan merupakan aturan.
Karena itu, penting untuk mengetahui atribut mana yang boolean versus enumerasi; hilangkan nilai jika memungkinkan agar tidak salah, dan cari nilai sesuai kebutuhan.
Atribut global
Atribut global adalah atribut yang dapat ditetapkan di elemen HTML apa pun, termasuk elemen di <head>. Ada lebih dari
30 atribut global. Meskipun secara teori semuanya dapat ditambahkan ke elemen HTML apa pun, beberapa atribut global tidak berpengaruh
saat disetel pada beberapa elemen; misalnya, menyetel hidden pada <meta> sebagai konten meta tidak ditampilkan.
id
Atribut global id digunakan untuk menentukan ID unik untuk sebuah elemen. ID ini memiliki banyak tujuan, termasuk:
- Target ID fragmen link.
- Mengidentifikasi elemen untuk pembuatan skrip.
- Mengaitkan elemen formulir dengan labelnya.
- Memberikan label atau deskripsi untuk teknologi pendukung.
- Gaya penargetan dengan (kekhususan tinggi atau sebagai pemilih atribut) di CSS.
Nilai id adalah string tanpa spasi. Jika ada spasi, dokumen tidak akan rusak, tetapi Anda harus menargetkan id dengan karakter escape di HTML, CSS, dan JS. Semua karakter lainnya valid. Nilai id dapat berupa 😀 atau .class,
tetapi bukan ide yang baik. Untuk mempermudah pemrograman bagi Anda saat ini dan di masa mendatang, buat karakter pertama id menjadi huruf,
dan hanya gunakan huruf ASCII, angka, _, dan -. Sebaiknya buat konvensi penamaan id, lalu tetap ikuti,
karena nilai id peka huruf besar/kecil.
id harus unik untuk dokumen. Tata letak halaman Anda mungkin tidak akan rusak jika id digunakan lebih dari sekali, tetapi JavaScript, link, dan interaksi elemen Anda mungkin tidak berfungsi seperti yang diharapkan.
ID fragmen link
Bilah navigasi menyertakan empat tautan. Kita akan membahas elemen link nanti, tetapi untuk saat ini, link real tidak terbatas pada URL berbasis HTTP; link tersebut dapat berupa ID fragmen ke bagian halaman dalam dokumen saat ini (atau dalam dokumen lainnya).
Di situs workshop machine learning, menu navigasi di header halaman mencakup empat link:
Atribut href memberikan hyperlink yang mengaktifkan tautan yang mengarahkan pengguna ke sana. Jika URL menyertakan tanda pagar (#)
diikuti dengan string karakter, string tersebut adalah ID fragmen. Jika string tersebut cocok dengan id elemen di
halaman web, fragmen tersebut merupakan anchor, atau bookmark, ke elemen tersebut. Browser akan men-scroll ke titik tempat anchor ditentukan.
Keempat link ini mengarah ke empat bagian halaman yang diidentifikasi oleh atribut id-nya. Saat pengguna mengklik salah satu dari
empat link di menu navigasi, elemen yang ditautkan oleh ID fragmen, elemen yang berisi ID yang cocok
minus #, akan di-scroll ke tampilan.
Konten <main> workshop machine learning memiliki empat bagian dengan ID. Saat pengunjung situs mengklik salah satu link di <nav>, bagian dengan ID fragmen tersebut akan di-scroll ke tampilan. Markup ini mirip dengan:
<section id="reg">
<h2>Machine Learning Workshop Tickets</h2>
</section>
<section id="about">
<h2>What you'll learn</h2>
</section>
<section id="teachers">
<h2>Your Instructors</h2>
<h3>Hal 9000 <span>&</span> EVE</h3>
</section>
<section id="feedback">
<h2>What it's like to learn good and do other stuff good too</h2>
</section>
Dengan membandingkan ID fragmen di link <nav>, Anda akan melihat bahwa setiap ID cocok dengan id dari <section> di <main>.
Browser memberi kita link "bagian atas halaman" gratis. Menetapkan href="#top", tidak peka huruf besar/kecil, atau hanya href="#", akan men-scroll
pengguna ke bagian atas halaman.
Pemisah tanda hash di href bukan bagian dari ID fragmen. ID fragmen selalu menjadi bagian
terakhir dari URL dan tidak dikirim ke server.
Pemilih CSS
Di CSS, Anda dapat menargetkan setiap bagian menggunakan pemilih ID, seperti #feedback atau, untuk kekhususan yang kurang, pemilih atribut yang peka huruf besar/kecil, [id="feedback"].
Pembuatan Naskah
Di MLW.com, terdapat fitur tersembunyi khusus bagi pengguna mouse. Mengklik tombol lampu akan mengaktifkan dan menonaktifkan halaman.
Markup untuk gambar tombol lampu adalah:
html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" />
Atribut id dapat digunakan sebagai parameter untuk metode getElementById() dan, dengan awalan #, sebagai bagian dari
parameter untuk metode querySelector() dan querySelectorAll().
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
Satu fungsi JavaScript kami memanfaatkan kemampuan ini untuk menargetkan elemen dengan atribut id miliknya:
<script>
/* switch is a reserved word in js, so we us onoff instead */
const onoff = document.getElementById('switch');
onoff.addEventListener('click', function(){
document.body.classList.toggle('black');
});
</script>
<label>
Elemen <label> HTML memiliki atribut for yang menggunakan id dari kontrol formulir yang terkait dengannya.
Membuat label eksplisit dengan menyertakan id pada setiap kontrol formulir dan memasangkan masing-masing dengan atribut for label akan memastikan
bahwa setiap kontrol formulir memiliki label terkait.
Meskipun setiap label dapat dikaitkan dengan tepat satu kontrol formulir, kontrol formulir dapat memiliki lebih dari satu label terkait.
Jika kontrol formulir disusun bertingkat di antara tag pembuka dan penutup <label>, atribut for dan id
tidak diperlukan: ini disebut label "implisit". Label memungkinkan semua pengguna mengetahui fungsi setiap kontrol formulir.
<label>
Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.
Pengaitan antara for dan id membuat informasi tersedia bagi pengguna teknologi pendukung. Selain itu,
mengklik di mana saja pada label akan memberikan fokus ke elemen terkait, sehingga memperluas area klik kontrol. Hal ini tidak hanya bermanfaat bagi
orang yang memiliki masalah ketangkasan sehingga mouse kurang akurat; tetapi juga membantu setiap pengguna perangkat seluler yang jarinya lebih lebar daripada tombol
radio.
Dalam contoh kode ini, pertanyaan kelima palsu dari kuis palsu adalah pertanyaan pilihan ganda pilihan tunggal. Setiap kontrol formulir memiliki label eksplisit, dengan id unik untuk masing-masing formulir. Untuk memastikan kami tidak menduplikasi ID secara tidak sengaja, nilai ID adalah kombinasi nomor pertanyaan dan nilai.
Saat menyertakan tombol pilihan, karena label menjelaskan nilai tombol pilihan, kami menyertakan semua tombol bernama sama dalam <fieldset>
dengan <legend> menjadi label, atau pertanyaan, untuk seluruh kumpulan.
Penggunaan aksesibilitas lainnya
Penggunaan id dalam aksesibilitas dan kegunaan tidak terbatas pada label. Dalam pengantar teks, <section>
diubah menjadi penanda wilayah dengan mereferensikan id dari <h2> sebagai nilai aria-labelledby <section> untuk memberikan
nama yang dapat diakses:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
Ada lebih dari 50 status dan properti aria-* yang dapat digunakan untuk memastikan aksesibilitas. aria-labelledby, aria-describedby,
aria-details, dan aria-owns menggunakan daftar referensi id yang dipisahkan spasi sebagai nilainya. aria-activedescendant, yang
mengidentifikasi elemen turunan yang saat ini difokuskan, mengambil satu referensi id sebagai nilainya: satu elemen
yang memiliki fokus (hanya satu elemen yang dapat difokuskan pada satu waktu).
class
Atribut class memberikan cara tambahan untuk menargetkan elemen dengan CSS (dan JavaScript), tetapi tidak memiliki tujuan lain
di HTML (meskipun framework dan library komponen mungkin menggunakannya). Atribut class menggunakan daftar
class peka huruf besar/kecil untuk elemen yang dipisahkan spasi.
Membangun struktur semantik yang baik memungkinkan penargetan elemen berdasarkan penempatan dan fungsinya. Struktur suara memungkinkan penggunaan pemilih elemen turunan, pemilih relasional, dan pemilih atribut. Saat Anda mempelajari atribut di sepanjang bagian ini, pertimbangkan cara menata gaya elemen dengan atribut atau nilai atribut yang sama. Anda sebaiknya bukan menggunakan atribut class, hanya saja sebagian besar developer tidak menyadari bahwa mereka sering kali tidak perlu menggunakannya.
Sejauh ini, MLW belum menggunakan class apa pun. Dapatkah situs diluncurkan tanpa nama kelas tunggal? Mari kita lihat.
style
Atribut style memungkinkan penerapan gaya inline, yang merupakan gaya yang diterapkan ke elemen tunggal tempat atribut ditetapkan.
Atribut style menggunakan pasangan nilai properti CSS nilainya, dengan sintaksis nilai yang sama dengan konten blok gaya CSS: properti diikuti dengan titik dua, seperti di CSS, dan titik koma mengakhiri setiap deklarasi, berada setelah nilai.
Gaya hanya diterapkan ke elemen tempat atribut ditetapkan, dengan turunan yang mewarisi nilai properti yang diwarisi jika tidak
diganti oleh deklarasi gaya lain pada elemen bertingkat atau dalam blok <style> atau lembar gaya. Karena terdiri dari nilai yang setara dengan konten dari satu blok gaya yang diterapkan ke elemen tersebut saja, nilai tidak dapat digunakan untuk konten yang dihasilkan, untuk membuat animasi keyframe, atau untuk menerapkan at-rules lainnya.
Meskipun style merupakan atribut global, penggunaannya tidak direkomendasikan. Lebih tepatnya, definisikan gaya dalam satu atau beberapa file terpisah.
Meskipun demikian, atribut style dapat berguna selama pengembangan untuk memungkinkan penataan gaya yang cepat seperti untuk tujuan pengujian. Lalu, ambil gaya 'solusi' dan tempelkan di file CSS yang tertaut.
tabindex
Atribut tabindex dapat ditambahkan ke elemen apa pun agar dapat menerima fokus. Nilai tabindex menentukan apakah nilai
tersebut akan ditambahkan ke urutan tab, dan, secara opsional, ke dalam urutan tab non-default.
Atribut tabindex menggunakan bilangan bulat sebagai nilainya. Nilai negatif (konvensinya adalah menggunakan -1) membuat elemen yang mampu
menerima fokus, seperti melalui JavaScript, tetapi tidak menambahkan elemen ke urutan tab. Nilai tabindex dari 0 membuat
elemen dapat difokuskan dan dapat dijangkau melalui tab, menambahkannya ke urutan tab default halaman dalam urutan kode sumber. Nilai 1
atau lebih menempatkan elemen ke dalam urutan fokus yang diprioritaskan dan tidak direkomendasikan.
Di halaman ini, terdapat fungsi berbagi yang menggunakan elemen kustom <share-action> yang bertindak sebagai <button>. tabindex nol
disertakan untuk menambahkan elemen kustom ke dalam urutan tab default keyboard:
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
role dari button memberi tahu pengguna pembaca layar bahwa elemen ini harus berperilaku seperti tombol. JavaScript digunakan untuk memastikan
janji fungsi tombol tetap dipertahankan; termasuk menangani peristiwa click dan keydown serta menangani penekanan tombol Enter dan Spasi.
Kontrol formulir, link, tombol, dan elemen konten yang dapat diedit dapat menerima fokus; saat pengguna keyboard menekan tombol tab,
fokus berpindah ke elemen yang dapat difokuskan berikutnya seolah-olah telah menetapkan tabindex="0". Elemen lain tidak dapat difokuskan secara default. Menambahkan atribut tabindex
ke elemen tersebut memungkinkan mereka menerima fokus padahal seharusnya tidak.
Jika dokumen menyertakan elemen dengan tabindex dari 1 atau lebih, elemen tersebut akan disertakan dalam urutan tab terpisah. Seperti yang akan Anda lihat di codepen,
penambahan tab dimulai dalam urutan terpisah, dalam urutan nilai terendah hingga nilai tertinggi, sebelum melewatinya dalam urutan reguler dalam urutan sumber.
Mengubah urutan tab dapat menciptakan pengalaman pengguna yang sangat buruk. Hal ini menyulitkan untuk mengandalkan teknologi pendukung—seperti {i>keyboard<i} dan pembaca layar—untuk menavigasi konten Anda. Sebagai developer, hal ini juga sulit untuk dikelola dan dipelihara. Fokus itu penting; ada satu modul utuh yang membahas fokus dan urutan fokus.
role
Atribut role adalah bagian dari spesifikasi ARIA,
bukan spesifikasi HMTL HOWWG. Atribut role dapat
digunakan untuk memberikan makna semantik pada konten, yang memungkinkan pembaca layar memberi tahu pengguna situs tentang interaksi pengguna yang diharapkan dari suatu objek.
Ada beberapa widget UI yang umum, seperti combobox,
panel menu, tab daftar,
dan treegrids, yang tidak memiliki padanan HTML native.
Misalnya, saat membuat pola desain bertab, peran tab, tablist, dan
tabpanel dapat digunakan. Seseorang yang dapat melihat antarmuka pengguna secara fisik telah mempelajari cara menavigasi widget dan membuat panel yang berbeda-beda terlihat dengan mengklik tab terkait.
Menyertakan peran tab dengan <button role="tab"> saat sekumpulan tombol digunakan untuk menampilkan panel yang berbeda memungkinkan pengguna pembaca layar mengetahui
bahwa <button> yang saat ini memiliki fokus dapat menampilkan panel terkait, bukan mengimplementasikan fungsi seperti tombol standar.
Atribut role tidak mengubah perilaku browser atau mengubah interaksi perangkat keyboard atau pointer; menambahkan role="button" ke <span> tidak akan mengubahnya menjadi <button>. Inilah sebabnya mengapa penggunaan elemen HTML semantik untuk tujuan yang dimaksudkan direkomendasikan. Namun, jika menggunakan
elemen yang tepat tidak memungkinkan, atribut role memungkinkan memberi tahu pengguna pembaca layar saat elemen non-semantik telah dipasang kembali
ke dalam peran elemen semantik.
contenteditable
Elemen dengan atribut contenteditable yang ditetapkan ke true dapat diedit, difokuskan, dan ditambahkan ke urutan tab seolah-olah
tabindex="0" telah ditetapkan. Contenteditable adalah atribut terenumerasi yang mendukung nilai true dan false, dengan nilai default inherit
jika atribut tidak ada atau memiliki nilai yang tidak valid.
Ketiga tag pembuka ini setara:
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
Jika Anda menyertakan <style contenteditable="false">, elemen tidak dapat diedit (kecuali dapat diedit secara default, seperti <textarea>).
Jika nilainya tidak valid, seperti <style contenteditable="😀"> atau <style contenteditable="contenteditable">, nilai default adalah inherit.
Untuk beralih antarstatus, buat kueri nilai properti hanya baca HTMLElement.isContentEditable.
const editor = document.getElementById("myElement");
if(editor.contentEditable) {
editor.setAttribute("contenteditable", "false");
} else {
editor.setAttribute("contenteditable", "");
}
Atau, properti ini dapat ditentukan dengan menyetel editor.contentEditable ke true, false, atau inherit.
Atribut global dapat diterapkan ke semua elemen, bahkan elemen <style>. Anda dapat menggunakan atribut dan sedikit CSS untuk membuat editor CSS aktif.
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
Coba ubah color dari style menjadi sesuatu selain inherit. Lalu, coba ubah style menjadi pemilih p.
Jangan hapus properti tampilan atau blok gaya akan hilang.
Atribut khusus
Kita hanya baru sampai di permukaan atribut global HTML. Ada lebih banyak atribut yang hanya berlaku untuk satu atau serangkaian elemen yang terbatas. Bahkan dengan ratusan atribut yang telah didefinisikan, Anda mungkin membutuhkan atribut yang tidak ada dalam spesifikasi. HTML siap membantu Anda.
Anda dapat membuat atribut khusus yang diinginkan dengan menambahkan awalan data-. Anda dapat memberi nama atribut apa pun yang dimulai dengan data-
diikuti dengan rangkaian karakter huruf kecil yang tidak diawali dengan xml dan tidak berisi titik dua (:).
Meskipun HTML bersifat memaafkan dan tidak akan rusak jika Anda membuat atribut yang tidak didukung yang tidak diawali dengan data, atau meskipun Anda memulai
atribut khusus dengan xml atau menyertakan :, ada manfaat jika membuat atribut khusus valid yang dimulai dengan data-.
Dengan atribut data kustom, Anda tahu bahwa Anda tidak menggunakan nama atribut yang ada secara tidak sengaja. Atribut data kustom siap menghadapi masa depan.
Meskipun browser tidak akan menerapkan perilaku default untuk atribut berawalan data- tertentu, ada API set data bawaan
untuk melakukan iterasi melalui atribut khusus Anda. Properti kustom adalah cara terbaik untuk menyampaikan informasi khusus aplikasi melalui JavaScript. Tambahkan atribut khusus ke elemen dalam bentuk data-name dan akses atribut ini melalui DOM menggunakan dataset[name]
pada elemen yang dimaksud.
<blockquote data-machine-learning="workshop"
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
</blockquote>
Anda dapat menggunakan getAttribute() menggunakan nama atribut lengkap, atau Anda dapat memanfaatkan properti dataset yang lebih sederhana.
el.dataset[machineLearning]; // workshop
e.dataset.machineLearning; // workshop
Properti dataset menampilkan objek DOMStringMap dari setiap atribut data- elemen. Ada beberapa atribut khusus
di <blockquote>. Properti set data berarti Anda tidak perlu mengetahui atribut khusus apa saja agar dapat mengakses nama dan nilainya:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
Atribut dalam artikel ini bersifat global, artinya dapat diterapkan ke elemen HTML apa pun (meskipun tidak semua memiliki dampak terhadap
elemen tersebut). Selanjutnya, kita akan membahas dua atribut dari gambar pengantar yang belum kita tangani—target dan href—serta
beberapa atribut khusus elemen lainnya seiring pembahasan link yang lebih mendalam.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang atribut.
id harus unik dalam dokumen.
Pilih atribut khusus dengan format yang benar.
data-birthdaybirthdaydata:birthday