Atribut

Atribut telah dibahas secara singkat di Gambaran HTML; sekarang saatnya untuk mempelajarinya lebih lanjut.

Atribut adalah hal 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 untuk elemen.

Atribut menentukan perilaku, penautan, dan fungsi elemen. Beberapa atribut bersifat global, artinya atribut tersebut dapat muncul dalam tag pembuka elemen mana pun. Atribut lainnya berlaku untuk beberapa elemen, tetapi tidak semua, sedangkan atribut lainnya bersifat khusus elemen, hanya relevan untuk satu elemen. Di HTML, semua atribut kecuali boolean, dan sampai batas tertentu atribut yang dihitung, memerlukan nilai.

Jika nilai atribut menyertakan spasi atau karakter khusus, nilai tersebut harus diapit tanda petik. Oleh karena itu, dan untuk meningkatkan keterbacaan, kutipan selalu direkomendasikan.

Meskipun HTML tidak peka huruf besar/kecil, beberapa nilai atribut peka huruf besar/kecil. 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, nilai tersebut 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 akan selalu bernilai benar. Atribut Boolean mencakup autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple,, dan selected. Jika salah satu (atau beberapa) atribut ini ada, elemen akan dinonaktifkan, diwajibkan, hanya baca, dll. Jika tidak ada, elemen tidak akan dinonaktifkan.

Nilai boolean dapat dihilangkan, ditetapkan ke string kosong, atau menjadi nama atribut; tetapi nilai tersebut tidak harus benar-benar ditetapkan ke string true. Semua nilai, termasuk true, false, dan 😀, meskipun tidak valid, akan di-resolve menjadi true.

Ketiga tag ini setara:

<input required>
<input required="">
<input required="required">

Jika nilai atribut bernilai salah, hapus atribut tersebut. Jika atribut bernilai benar, sertakan atribut, tetapi jangan berikan nilai. Misalnya, required="required" bukan nilai yang valid di HTML; tetapi karena required adalah boolean, nilai yang tidak valid akan di-resolve menjadi true. Namun, karena atribut enumerasi yang tidak valid tidak selalu me-resolve ke nilai yang sama dengan nilai yang tidak ada, lebih mudah untuk membiasakan diri menghilangkan nilai daripada mengingat atribut mana yang merupakan boolean versus enumerasi dan berpotensi memberikan nilai yang tidak valid.

Saat beralih antara benar dan salah, tambahkan dan hapus atribut secara bersamaan dengan JavaScript, bukan beralih 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 dan terbatas. Seperti atribut boolean, atribut ini 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 atribut tersebut salah; atribut yang ada dengan nilai yang tidak ada tidak selalu benar; dan default untuk nilai yang tidak valid tidak selalu sama dengan string null. Melanjutkan contoh, contenteditable ditetapkan secara default ke inherit jika tidak ada atau tidak valid, dan dapat ditetapkan secara eksplisit ke false.

Nilai default bergantung pada atribut. Tidak seperti nilai boolean, atribut tidak otomatis "true" jika ada. Jika Anda menyertakan <style contenteditable="false">, elemen tidak dapat diedit. Jika nilai tidak valid, seperti <style contenteditable="😀">, atau, yang mengejutkan, <style contenteditable="contenteditable">, nilai tersebut tidak valid dan ditetapkan secara default ke inherit.

Dalam sebagian besar kasus dengan atribut yang dihitung, nilai yang tidak ada dan tidak valid 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 umum, perilaku ini bukanlah aturan. Oleh karena itu, penting untuk mengetahui atribut mana yang merupakan boolean dan mana yang dihitung; hapus nilai jika memungkinkan agar Anda tidak salah, dan cari nilai sesuai kebutuhan.

Atribut global

Atribut global adalah atribut yang dapat ditetapkan pada elemen HTML apa pun, termasuk elemen dalam <head>. Ada lebih dari 30 atribut global. Meskipun secara teori, semua atribut ini dapat ditambahkan ke elemen HTML, beberapa atribut global tidak akan memengaruhi saat ditetapkan pada beberapa elemen; misalnya, menetapkan hidden pada <meta> karena konten meta tidak ditampilkan.

id

Atribut global id digunakan untuk menentukan ID unik untuk 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. - Menargetkan gaya dengan (spesifikasi tinggi atau sebagai pemilih atribut) di CSS.

Nilai id adalah string tanpa spasi. Jika berisi spasi, dokumen tidak akan terputus, tetapi Anda harus menargetkan id dengan karakter escape di HTML, CSS, dan JS. Semua karakter lainnya valid. Nilai id dapat berupa 😀 atau .class, tetapi sebaiknya tidak digunakan. Untuk mempermudah pemrograman bagi Anda saat ini dan di masa mendatang, buat karakter pertama id menjadi huruf, dan hanya gunakan huruf, angka, _, dan - ASCII. Sebaiknya buat konvensi penamaan id, lalu ikuti konvensi tersebut, 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

Menu navigasi menyertakan empat link. Kita akan membahas elemen link nanti, tetapi untuk saat ini, ketahui bahwa link tidak terbatas pada URL berbasis HTTP; link dapat berupa ID fragmen ke bagian halaman dalam dokumen saat ini (atau dalam dokumen lain).

Di situs workshop machine learning, menu navigasi di header halaman menyertakan empat link:

Atribut href menyediakan hyperlink yang diaktifkan untuk mengarahkan pengguna. Jika URL menyertakan tanda hash (#) diikuti dengan string karakter, string tersebut adalah ID fragmen. Jika string tersebut cocok dengan id elemen di halaman web, fragmen tersebut adalah 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 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. Markupnya 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>&amp;</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 "atas halaman" gratis. Menetapkan href="#top", yang 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 merupakan bagian terakhir URL dan tidak dikirim ke server.

Pemilih CSS

Di CSS, Anda dapat menargetkan setiap bagian menggunakan pemilih ID, seperti #feedback atau, untuk spesialisasi yang kurang, pemilih atribut, [id="feedback"], yang peka huruf besar/kecil.

Pembuatan Naskah

Di MLW.com, ada easter egg khusus untuk 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 menggunakan kemampuan ini untuk menargetkan elemen berdasarkan atribut id-nya:

<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 mengambil id kontrol formulir yang terkait sebagai nilainya. Membuat label eksplisit dengan menyertakan id di setiap kontrol formulir dan menyambungkan setiap kontrol dengan atribut for label 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 memberi tahu semua pengguna tujuan 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 membantu orang dengan masalah ketangkasan yang membuat penggunaan mouse menjadi kurang akurat; tetapi juga membantu setiap pengguna perangkat seluler dengan jari yang lebih lebar daripada tombol radio.

Dalam contoh kode ini, pertanyaan kelima palsu dari kuis palsu adalah pertanyaan pilihan ganda dengan satu pilihan. Setiap kontrol formulir memiliki label eksplisit, dengan id unik untuk setiap kontrol. Untuk memastikan kita tidak tidak sengaja menduplikasi ID, nilai ID adalah kombinasi dari nomor pertanyaan dan nilai.

Saat menyertakan tombol pilihan, karena label mendeskripsikan nilai tombol pilihan, kita mencakup semua tombol dengan nama yang sama dalam <fieldset> dengan <legend> sebagai label, atau pertanyaan, untuk seluruh kumpulan.

Penggunaan aksesibilitas lainnya

Penggunaan id dalam aksesibilitas dan kegunaan tidak terbatas pada label. Dalam pengantar teks, <section> dikonversi 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 nilai referensi id tunggal: referensi elemen tunggal yang memiliki fokus (hanya satu elemen yang dapat difokuskan dalam 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 dapat menggunakannya). Atribut class menggunakan daftar class peka huruf besar/kecil yang dipisahkan spasi sebagai nilainya untuk elemen.

Membuat 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 seluruh bagian ini, pertimbangkan cara menata gaya elemen dengan atribut atau nilai atribut yang sama. Bukan berarti Anda tidak boleh menggunakan atribut class, tetapi sebagian besar developer tidak menyadari bahwa mereka sering kali tidak perlu melakukannya.

Sejauh ini, MLW belum menggunakan class apa pun. Dapatkah situs diluncurkan tanpa nama class tunggal? Kita lihat nanti.

style

Atribut style memungkinkan penerapan gaya inline, yaitu gaya yang diterapkan ke satu elemen tempat atribut ditetapkan. Atribut style menggunakan pasangan nilai properti CSS sebagai 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, yang muncul setelah nilai.

Gaya hanya diterapkan ke elemen tempat atribut ditetapkan, dengan turunan mewarisi nilai properti yang diwarisi jika tidak diganti oleh deklarasi gaya lain pada elemen bertingkat atau dalam blok <style> atau sheet gaya. Karena nilai ini terdiri dari konten yang setara dari satu blok gaya yang diterapkan hanya ke elemen tersebut, nilai ini tidak dapat digunakan untuk konten yang dihasilkan, untuk membuat animasi keyframe, atau untuk menerapkan at-rule lainnya.

Meskipun style memang merupakan atribut global, penggunaannya tidak direkomendasikan. Sebagai gantinya, tentukan gaya dalam satu atau beberapa file terpisah. Meskipun demikian, atribut style dapat berguna selama pengembangan untuk mengaktifkan gaya cepat seperti untuk tujuan pengujian. Kemudian, ambil gaya 'solusi' dan tempelkan di file CSS tertaut.

tabindex

Atribut tabindex dapat ditambahkan ke elemen apa pun agar dapat menerima fokus. Nilai tabindex menentukan apakah nilai tersebut ditambahkan ke urutan tab, dan, secara opsional, ke urutan tab non-default.

Atribut tabindex menggunakan bilangan bulat sebagai nilainya. Nilai negatif (konvensi adalah menggunakan -1) membuat elemen mampu menerima fokus, seperti melalui JavaScript, tetapi tidak menambahkan elemen ke urutan tab. Nilai tabindex 0 membuat elemen dapat difokuskan dan dapat dijangkau melalui tab, yang menambahkannya ke urutan tab default halaman dalam urutan kode sumber. Nilai 1 atau lebih akan menempatkan elemen ke dalam urutan fokus yang diprioritaskan dan tidak direkomendasikan.

Di halaman ini, terdapat fungsi berbagi 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 promise fungsi tombol 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 akan berpindah ke elemen berikutnya yang dapat difokuskan seolah-olah telah menetapkan tabindex="0". Elemen lainnya tidak dapat difokuskan secara default. Menambahkan atribut tabindex ke elemen tersebut memungkinkan elemen tersebut menerima fokus jika tidak.

Jika dokumen menyertakan elemen dengan tabindex 1 atau lebih, elemen tersebut akan disertakan dalam urutan tab terpisah. Seperti yang akan Anda perhatikan di codepen, tab dimulai dalam urutan terpisah, dalam urutan nilai terendah hingga nilai tertinggi, sebelum melalui urutan reguler dalam urutan sumber.

Mengubah urutan tab dapat menciptakan pengalaman pengguna yang sangat buruk. Hal ini menyulitkan pengguna untuk mengandalkan teknologi pendukung—baik keyboard maupun pembaca layar—untuk menavigasi konten Anda. Sebagai developer, Anda juga akan kesulitan mengelola dan memeliharanya. Fokus itu penting; ada satu modul yang membahas fokus dan urutan fokus.

role

Atribut role adalah bagian dari spesifikasi ARIA, bukan spesifikasi HTML WHATWG. Atribut role dapat digunakan untuk memberikan makna semantik pada konten, sehingga pembaca layar dapat memberi tahu pengguna situs tentang interaksi pengguna yang diharapkan dari suatu objek.

Ada beberapa widget UI umum, seperti combobox, menubar, tablist, dan treegrid, yang tidak memiliki HTML native yang setara. Misalnya, saat membuat pola desain dengan tab, peran tab, tablist, dan tabpanel dapat digunakan. Seseorang yang secara fisik dapat melihat antarmuka pengguna telah belajar dari pengalaman cara menavigasi widget dan membuat panel yang berbeda terlihat dengan mengklik tab terkait. Menyertakan peran tab dengan <button role="tab"> saat sekelompok tombol digunakan untuk menampilkan panel yang berbeda memungkinkan pengguna pembaca layar mengetahui bahwa <button> yang saat ini memiliki fokus dapat mengalihkan panel terkait ke tampilan, bukan menerapkan fungsi seperti tombol biasa.

Atribut role tidak mengubah perilaku browser atau mengubah interaksi perangkat keyboard atau pointer—menambahkan role="button" ke <span> tidak akan mengubahnya menjadi <button>. Oleh karena itu, sebaiknya gunakan elemen HTML semantik untuk tujuan yang dimaksudkan. Namun, jika penggunaan elemen yang tepat tidak memungkinkan, atribut role memungkinkan pengguna pembaca layar diberi tahu saat elemen non-semantik telah dimodifikasi menjadi peran elemen semantik.

contenteditable

Elemen dengan atribut contenteditable yang ditetapkan ke true dapat diedit, dapat difokuskan, dan ditambahkan ke urutan tab seolah-olah tabindex="0" ditetapkan. Contenteditable adalah atribut yang dihitung 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 jika dapat diedit secara default, seperti <textarea>). Jika nilainya tidak valid, seperti <style contenteditable="😀"> atau <style contenteditable="contenteditable">, nilai defaultnya 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 menetapkan 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 langsung.

<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 style menjadi selain inherit. Kemudian, coba ubah style menjadi pemilih p. Jangan hapus properti tampilan atau blok gaya akan hilang.

Atribut khusus

Kita baru saja menyentuh permukaan atribut global HTML. Ada lebih banyak atribut yang hanya berlaku untuk satu atau sekumpulan elemen terbatas. Meskipun ada ratusan atribut yang ditentukan, Anda mungkin memerlukan atribut yang tidak ada dalam spesifikasi. HTML dapat membantu Anda.

Anda dapat membuat atribut kustom yang diinginkan dengan menambahkan awalan data-. Anda dapat memberi nama atribut apa pun yang diawali dengan data-, diikuti dengan rangkaian karakter huruf kecil yang tidak diawali dengan xml dan tidak berisi titik dua (:).

Meskipun HTML tidak terlalu ketat dan tidak akan rusak jika Anda membuat atribut yang tidak didukung yang tidak dimulai dengan data, atau meskipun Anda memulai atribut kustom dengan xml atau menyertakan :, ada manfaat untuk membuat atribut kustom yang valid yang dimulai dengan data-. Dengan atribut data kustom, Anda tahu bahwa Anda tidak secara tidak sengaja menggunakan nama atribut yang ada. Atribut data kustom bersifat andal untuk masa mendatang.

Meskipun browser tidak akan menerapkan perilaku default untuk atribut berawalan data- tertentu, ada API set data bawaan untuk melakukan iterasi pada atribut kustom Anda. Properti kustom adalah cara yang sangat baik untuk menyampaikan informasi khusus aplikasi melalui JavaScript. Tambahkan atribut khusus ke elemen dalam bentuk data-name dan akses 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 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 kustom di <blockquote>. Properti set data berarti Anda tidak perlu mengetahui atribut kustom tersebut untuk mengakses nama dan nilainya:

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

Atribut dalam artikel ini bersifat global, yang berarti dapat diterapkan ke elemen HTML apa pun (meskipun tidak semuanya berdampak pada elemen tersebut). Selanjutnya, kita akan melihat dua atribut dari gambar pengantar yang belum kita bahas—target dan href—dan beberapa atribut khusus elemen lainnya saat kita mempelajari link lebih dalam.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang atribut.