Daftar HTML

(blog.frankmtaylor.com)

1 poin oleh GN⁺ 1 jam lalu | 1 komentar | Bagikan ke WhatsApp

Daftar HTML harus dipilih berdasarkan makna dan cara interaksinya, bukan tampilan visual, dan terbagi menjadi daftar kontrol, berurutan, deskripsi, menu, dan tidak berurutan
Untuk pilihan tetap, yang tepat adalah <select>/<option>, sedangkan untuk input berbasis saran gunakan <datalist>; pahami perbedaan perilaku multiple, optgroup, size, dan value
<ol> digunakan untuk prosedur, peristiwa, dan rangkaian yang maknanya berubah jika urutannya diubah, dan reversed hanya membalik penomoran tanpa mengubah urutan item yang sebenarnya
<dl> di HTML5 berkembang dari daftar definisi menjadi daftar deskripsi, dan cocok untuk pasangan kunci-nilai seperti istilah-nilai, metadata, dan debugging JSON
<menu> digunakan untuk daftar perintah seperti tombol alat; makna dan konten yang diizinkannya berbeda dari nav, sedangkan daftar umum lainnya ditangani oleh <ul>

Daftar kontrol: `<select>`/`<option>` dan `<datalist>`

Di dalam form, kita juga bisa menyusun daftar yang berinteraksi dengan pengguna
Pilihan tetap adalah <select> dan <option>
- Jika pengguna harus hanya bisa memilih item yang ada di dalam daftar, gunakan <select> dan <option>
- Contoh daftar bahasa menempatkan <option> seperti Select a Language, English, French, Spanish, Portuguese di dalam <select name="languages">
- <select> bawaan hanya memungkinkan tepat satu pilihan
- Untuk memungkinkan memilih beberapa item, tambahkan atribut multiple
  - Saat multiple digunakan, tampilan daftar berubah dan semua opsi ditampilkan; pengguna dapat memilih beberapa item dengan Shift atau Cmd + klik
  - Jika benar-benar memakai select dan option, semantik bawaan browser akan menanganinya sehingga tidak perlu menambahkan aria-multiselectable secara manual ke elemen daftar dengan role="listbox"
Kelompokkan opsi terkait dengan <optgroup>
- Jika ingin mengelompokkan bahasa berdasarkan rumpun bahasa, kelompokkan daftar opsi dengan <optgroup>
- Contohnya membuat <optgroup> berlabel Germanic, Romance, Celtic, lalu menempatkan English, French, Spanish, Portuguese, Irish, Welsh di setiap grup
- Jika ingin membuat subkelompok tertentu tidak bisa dipilih, tambahkan atribut disabled ke <optgroup> tersebut
- Dalam contoh, grup Celtic diberi disabled sehingga kelompok yang berisi Irish, Welsh dinonaktifkan
Tingkatkan dengan fitur HTML bawaan
- Jika perlu pemisah visual antargrup, Anda dapat menggunakan <hr> yang diizinkan di dalam <select>
- Atribut size mengontrol jumlah item yang ditampilkan sekaligus, sehingga berguna untuk daftar yang panjang
- Jika size dan optgroup dipakai bersama, label grup juga memakan ruang tampilan
- Contohnya, <select name="languages" size="4" multiple> berisi grup Germanic, Romance, Celtic, Afroasiatic, pemisah <hr /> di antaranya, dan juga mencakup Hebrew, Arabic

Daftar saran: `<datalist>`

Jika pengguna tidak harus memilih hanya dari daftar, tetapi daftar itu hanya menyarankan pilihan, gunakan <datalist>
<datalist> dihubungkan dalam dua tahap
- Buat <datalist> dan beri id
- Masukkan nilai id itu ke atribut list pada <input> yang sesuai
Contoh saran bahasa menempatkan opsi English, French, Spanish, Portuguese, Irish, Welsh, Hebrew, Arabic di dalam <datalist id="languages">, lalu menghubungkannya ke field input dengan <input name="language" list="languages">
Perilaku <option value>
- Nilai default <option> adalah teks yang dibungkusnya, dan jika ada atribut value, nilai itu akan menimpa default sementara teks berfungsi seperti label
- Di <select>, ini biasanya bukan masalah besar karena pengguna hanya melihat teks, tetapi di <datalist> pengguna dapat melihat label, lalu setelah memilih justru value yang masuk ke kotak input sehingga bisa membingungkan
- Dalam contoh, jika memilih <option value="cy">Welsh</option>, pengguna melihat Welsh tetapi input berisi cy
- Saat memakai <datalist>, pahami bahwa nilai yang disisipkan adalah value, bukan label
Digabungkan dengan berbagai tipe input
- <datalist> tidak hanya dipakai untuk opsi teks, tetapi juga bisa dipakai bersama tipe input lainnya
- Contoh pemilihan minggu menghubungkan <datalist id="preferred-weeks"> ke <input type="week" name="week" id="camp-week" min="2026-W2" max="2026-W51" list="preferred-weeks" />
- Minggu yang disarankan adalah 2026-W22, 2026-W23, 2026-W24, 2026-W25
Digabungkan dengan <input type="range">
- <datalist> tidak terbatas pada nilai string dan juga bekerja dengan angka, jadi bisa digabungkan dengan input range untuk membuat titik berlabel di atas rentang
- Contoh input persentase tip menghubungkan <datalist id="recommended-tips"> ke <input type="range" name="tips" id="tips" min="0" max="50" step="1" list="recommended-tips" /> dan menaruh label 10%, 18%, 30%, 45%
- Pada browser keluarga Chrome, @supports (x: attr(x type(percentage))) digunakan untuk membaca nilai label dari attr(), lalu mendeklarasikan nilainya sebagai persentase dengan type(), kemudian menempatkan opsi dengan position: absolute
- Pendekatan untuk Firefox menggunakan @supports not (x: attr(x type(percentage))), dan nilainya ditampilkan dengan ::before
- Pendekatan ini tidak menjamin semua browser bekerja dengan cara yang sama atau tampil identik di layar

Daftar berurutan: `<ol>`

Untuk kumpulan item yang harus dibaca dalam urutan tertentu, gunakan <ol>
Patokannya bukan apakah angka harus terlihat di samping item, melainkan apakah makna daftar berubah jika urutan item diubah
Koleksi yang cocok untuk <ol> meliputi algoritme, rangkaian peristiwa, item pada kontinum yang meningkat atau menurun, resep, dan daftar alfabetis
Contoh resep banana bread mengekspresikan urutan memanaskan oven dan mengoles loyang, mencampur bahan, menuang adonan, memanggang 60 menit atau sampai tusuk gigi keluar bersih, lalu mendinginkannya di rak kawat sebagai <ol>
Daftar bahan yang disusun alfabetis juga mengikuti kontinum alfabet, jadi termasuk <ol>, dengan urutan baking soda, bananas, brown sugar, butter, eggs, flour, salt
Nesting daftar berurutan dan tidak berurutan
- Daftar berurutan yang terstruktur dengan baik bisa dibaca untuk memahami urutan kejadian tanpa perlu melihat render browser
- Contoh resep menggunakan <ol> untuk langkah tingkat atas; di dalam langkah tersebut, item yang urutannya tidak penting memakai <ul>, dan sublangkah yang urutannya penting kembali memakai <ol>
- Strukturnya mempertahankan urutan tingkat atas Prepare, Mix, Pour, Bake, Cool, sementara item paralel di dalam Prepare dan Bake dinyatakan dengan <ul>, dan prosedur di dalam Mix dan Cool dinyatakan dengan <ol>
reversed
- Atribut reversed mengubah urutan penomoran dari menaik menjadi menurun
- Atribut ini tidak mengubah urutan item daftar yang sebenarnya
- Ini bisa digunakan untuk daftar bahan dan jumlah dari most to least, misalnya menampilkan dari yang paling banyak ke yang paling sedikit
- Contohnya, <ol reversed> berisi eggs (2), flour (2 cups), bananas (2) (mashed), brown sugar (¾ cup), butter (½ cup), baking soda (1 teaspoon), salt (¼ teaspoon)
Membalik urutan item sebenarnya dengan JavaScript
- Jika ingin benar-benar membalik daftar, gunakan JavaScript untuk menyusun ulang anak li dalam urutan terbalik lalu men-toggle atribut reversed
- Fungsi contoh membuat array dari hasil list.querySelectorAll('li'), lalu .reverse(), setelah itu mengosongkannya dengan list.innerHTML = '' dan menambahkannya kembali dengan list.append(...children)
- Di akhir, fungsi memanggil list.toggleAttribute('reversed')
- Event contoh menjalankan pembalikan saat klik ganda dengan orderedList.addEventListener('dblclick', (evt) => { reverseList(orderedList) })
start
- Atribut start dipakai untuk menjaga kesinambungan nomor saat satu daftar besar dipecah menjadi beberapa daftar berurutan
- Dalam contoh resep banana bread, Prepare dibiarkan sebagai ul, sementara Mix memakai <ol start=2>, Pour memakai <ol start=5>, dan Cool memakai <ol start=7> agar nomor langkah tetap berlanjut di masing-masing daftar
- Meski di tengah ada bagian seperti 6: Bake yang dinyatakan sebagai daftar tidak berurutan, alur penomoran keseluruhan tetap dipertahankan dengan memulai ol untuk Cool dari start=7

Daftar deskripsi: `<dl>`, `<dt>`, `<dd>`

Daftar deskripsi (description list) adalah jenis daftar yang mencegah kita memaksakan semua isi ke dalam ol atau ul
Daftar definisi di HTML 4
- Di HTML 4, ini disebut daftar definisi (definition list), bukan description list, dan ditujukan untuk penggunaan sempit berupa pemberian definisi
- Strukturnya terdiri dari <dt> sebagai istilah yang didefinisikan dan <dd> sebagai isi definisinya; agar secara semantik tepat, istilah yang didefinisikan dibungkus dengan <dfn>
- Contohnya menghubungkan throw, yeet ke definisi yang sama, serta memberi definisi terpisah untuk no cap, bet
```
  <dl>
    <dt><dfn>throw</dfn></dt>
    <dt><dfn>yeet</dfn></dt>
    <dd>Verb. To discard at a high velocity</dd>
    <dt><dfn>no cap</dfn></dt>
    <dd>Interjection. Expresses authenticity and truthfulness, sometimes surprise.</dd>
    <dt><dfn>bet</dfn></dt>
    <dd>Interjection. Expresses agreement and affirmation.</dd>
  </dl>
```
Makna yang diperluas di HTML5
- Di HTML5, ini menjadi daftar deskripsi yang tidak lagi terbatas pada definisi, dan bisa dipakai ketika ada “sekumpulan istilah dan nilai”
- Di HTML5, pembungkus nonsemantik <div> diizinkan untuk mengelompokkan <dt> dan <dd> yang saling terkait
- Contoh engine browser mengelompokkan Chrome, Opera, Brave, Edge ke Blink-based browsers, dan Firefox, Tor, Librewolf ke Gecko-based browsers
```
  <dl>
    <div class="dl-item">
      <dt>Chrome</dt>
      <dt>Opera</dt>
      <dt>Brave</dt>
      <dt>Edge</dt>
      <dd>Blink-based browsers</dd>
    </div>
    <div class="dl-item">
      <dt>Firefox</dt>
      <dt>Tor</dt>
      <dt>Librewolf</dt>
      <dd>Gecko-based browsers</dd>
    </div>
  </dl>
```
Metadata dan debugging JSON
- Jika isinya berupa rangkaian fakta dan label, penggunaan daftar deskripsi untuk menampilkan metadata sangat tepat
- Profil pengguna juga bisa dimasukkan ke dalam <dl>; contohnya mengekspresikan First Frank, Last Taylor, Age 44, Job Writer, Handle Paceaux sebagai pasangan <dt> dan <dd>
- Daftar deskripsi juga bisa dipakai untuk debugging JSON di aplikasi halaman tunggal
- Contoh DebugJson mengiterasi setiap key, value pada objek dengan Object.entries(obj), lalu merender kunci sebagai <dt><var>...</var></dt> dan nilai sebagai <dd><code>...</code></dd>
- Jika nilainya adalah objek dan bukan array, DebugJson.createDl(value) dipanggil lagi untuk membuat <dl> bersarang; selain itu, value.toString() dimasukkan ke dalam <code>
```
  const debugJson = new DebugJson({foo: 'bar', arr: ['a', 'b'], car: 1}, '.container')
  debugJson.render();
```
- Daftar deskripsi sangat luas kecocokannya untuk kebutuhan pasangan kunci-nilai

Menu: `<menu>`

Elemen menu merepresentasikan daftar perintah dan lebih dekat ke web interaktif daripada sekadar render konten
menu cocok untuk daftar tombol yang berfungsi sebagai “alat”, seperti kontrol modifikasi teks pada rich text editor
Contoh rich text editor menempatkan tombol Strong, Emphasize, Strike sebagai li di dalam menu

  <menu>
    <li><button onclick="strong()">Strong</button></li>
    <li><button onclick="emphasize()">Emphasize</button></li>
    <li><button onclick="strike()">Strike</button></li>
  </menu>

Dalam spesifikasi HTML, ini termasuk penggunaan toolbar, dan di halaman interaktif, tempat yang memiliki tombol alat sangat mungkin cocok memakai menu
Contoh kontrol video juga masuk ke dalam menu, dengan button yang memiliki commandfor="vid-123" serta command="--play", --mute, --fullscreen

  <div class="player player--video">
    <video source="whatever.mp4" id="vid-123"></video>
    <menu>
      <li><button commandfor="vid-123" command="--play">Play</button></li>
      <li><button commandfor="vid-123" command="--mute">Mute</button></li>
      <li><button commandfor="vid-123" command="--fullscreen">Fullscreen</button></li>
    </menu>
  </div>

Dengan memakai menu, tidak perlu menambahkan aria-role="menu" ke daftar tidak berurutan
Jangan menganggap li hanya masuk ke dua container
- Jika Anda tidak ingin item daftar di navigasi terlihat seperti daftar biasa, perlakuan yang sama juga perlu diterapkan pada menu li
- Di bagian atas stylesheet, sertakan bukan hanya nav li tetapi juga menu li untuk mereset list-style-type, text-indent, dan margin
```
  nav li,
  menu li {
      list-style-type: none;
      text-indent: 0;
      margin: 0;
  }
```
<nav> dan <menu> itu berbeda
- nav bukan sekadar menu yang berisi tautan; makna dan konten yang diizinkan berbeda
- nav adalah elemen sectioning yang bermakna memberi pengguna “berbagai item tentang pergi ke suatu tempat”
- nav dapat memuat paragraf dan heading seperti <p>, <h1-6>, serta daftar seperti <ul>, <ol>, <menu>
- menu adalah elemen daftar yang bermakna memberi pengguna “daftar hal yang bisa dilakukan”, dan hanya mengizinkan item daftar <li>
- menu dan nav bukan pilihan yang saling eksklusif; menu bisa berada di dalam nav, tetapi nav tidak bisa berada di dalam menu

Daftar tidak berurutan: `<ul>`

ul adalah daftar serbaguna yang menampung kebutuhan daftar lain yang tidak diselesaikan oleh jenis daftar lain dan nav
Dalam HTML lama, perbedaan antara daftar berurutan dan tidak berurutan lebih dekat ke perbedaan visual seperti angka versus bullet
Sekarang, karena mempertimbangkan aksesibilitas, screen reader, dan optimisasi mesin pencari, fokusnya harus pada apakah urutan punya makna, bukan pada tampilan visual
Daftar anggota band tidak memiliki urutan yang penting, sehingga cocok memakai ul

  <h3>Beatles</h3>
  <ul>
    <li>John Lennon</li>
    <li>Paul McCartney</li>
    <li>Ringo Star</li>
    <li>George Harrison</li>
  </ul>

Daftar nama band juga bisa dinyatakan sebagai daftar tidak berurutan

  <ul>
    <li>Beatles</li>
    <li>Rolling Stones</li>
    <li>Van Halen</li>
    <li>Foo Fighters</li>
  </ul>

1 komentar

GN⁺ 1 jam lalu

Opini Hacker News

Bahkan hanya dengan mencoba contohnya saja, sepertinya datalist tidak bekerja dengan baik di Mobile Safari
Jika ada masalah kompatibilitas di pasar sebesar ini, bisa dibilang hampir tidak ada skenario yang benar-benar layak untuk memakainya
- Ini seperti informasi tamparan realitas yang tidak diinginkan tapi memang perlu
  
  Lebih dari 10 tahun lalu aku pernah mengerjakan proyek yang memakai widget saran input yang cukup agresif di UI, dan saat itu kami memakai plugin jQuery
  Itu adalah bagian paling rumit di frontend, dan pada dasarnya menjadi alasan utama kami memakai jQuery di proyek tersebut
  
  Saat membaca artikel ini, aku sempat berpikir akan sangat mudah mengimplementasikan ulang frontend itu dalam versi JS minimal yang ringan, tetapi kenyataannya tidak sesederhana itu kecuali aku bisa mengirimkan lingkunganku persis sama ke perangkat pengguna
  Meski begitu, fitur-fitur yang kini masuk ke dalam spesifikasi HTML cukup mengesankan
  Sejak membaca XHTML saat SMA, aku hampir tidak pernah mengikuti perubahan spesifikasinya, jadi sesekali rasanya perlu melihat apa saja yang berubah
  Hanya saja, kompatibilitas browser tetap sama merepotkannya dulu maupun sekarang
- Contoh datalist jelas bekerja di iPhone-ku
  Ia terintegrasi ke area saran autocomplete di atas keyboard native iOS
  Hanya saja tidak ada cara untuk menelusuri semua sarannya, dan sepertinya memang bukan itu cara penggunaan datalist yang dimaksud
  
  Namun atribut disabled pada group jelas tidak berfungsi
- Di Firefox untuk Android juga tidak berfungsi
- Dulu sekali, saat bekerja di pekerjaan pertamaku, datalist di Firefox tidak berfungsi, dan karena itu Firefox dikeluarkan dari daftar browser yang didukung
  
  Ini memang sudah lama jadi fitur bermasalah kalau ingin mendukung browser selain Chrome
- Tidak bekerja dengan baik jika dipakai bersama GBoard di iOS
Contoh yang menambahkan atribut disabled pada optgroup agar sebagian opsi tidak bisa dipilih tampaknya rusak di Mobile Safari
Dalam praktiknya, itu tidak benar-benar dinonaktifkan, dan item yang seharusnya nonaktif tetap bisa dipilih
- Seharusnya ini berfungsi di Safari versi terbaru, jadi mungkin bukan benar-benar rusak melainkan berada dalam keadaan yang aneh
  
  https://caniuse.com/mdn-html_elements_optgroup_disabled
  
  Kemungkinan ini adalah bug Safari
- Inilah alasan sulit memakai HTML native untuk hal-hal yang lebih dari dasar
  Bahkan jika kamu sudah cukup banyak membaca dan cukup yakin untuk menulis artikel seperti ini, di komentar tetap akan muncul perilaku aneh, batasan, dan ketidakdukungan tergantung kombinasi browser dan perangkat
  
  Tumpukan div mungkin pilihan yang terlalu jauh ke sisi sebaliknya, tetapi setidaknya perilaku aneh dan batasannya cukup konsisten serta terlihat jelas
  Karena itu lebih konsisten dengan apa yang kutulis sendiri atau yang dihasilkan framework
Artikel yang menarik dan komprehensif

Sayangnya sekarang ada banyak developer yang langsung belajar React tanpa belajar HTML, dan dengan adanya LLM, besar kemungkinan mereka bahkan tidak akan belajar HTML sama sekali

Akibatnya, bahkan untuk hal-hal yang cukup dengan HTML sederhana pun mereka akan lebih dulu mencari komponen React
- Menurutku itu tidak apa-apa
  
  Saat pertama kali harus memakai XML, kami harus mempelajari spesifikasi XML dan menghasilkan output-nya sendiri
  Itu masa ketika library serialisasi nyaris tidak ada
  Setelah itu aku melihat generasi junior memakai XML, lalu kemudian JSON, sebagai format pertukaran tanpa benar-benar mempelajarinya secara mendalam, dan tidak terjadi masalah besar
  
  AJAX juga berubah dari teknologi baru yang sedang panas menjadi istilah yang orang bahkan tidak tahu kepanjangannya, dan sekarang kebanyakan orang bahkan tidak lagi mengenali istilah itu sendiri
  AJAX bukan mati, melainkan menjadi terlalu umum sampai tidak perlu lagi istilah khusus untuk menyebutnya
- Masalahku adalah aku mempelajari HTML dengan sangat mendalam 20 tahun lalu, lalu setelah itu hanya mengetahui sedikit demi sedikit secara kebetulan bagaimana ia berubah dan membaik
  CSS bahkan lebih parah lagi
- Jujur saja, HTML itu merepotkan
  
  Misalnya, pendekatan ala HTML untuk menata sebagian kontrol adalah memakai pseudo-class, tetapi kadang selektornya berbeda antar-browser
  Jadi kita tetap harus mengetes per browser karena tidak tahu apakah itu benar-benar bekerja dengan semestinya
  
  React bukan hanya lebih mudah, tapi juga lebih dapat dipercaya
  Jika dibuat dengan React dan div, kita bisa berharap hasilnya akan berfungsi sama di semua browser
Isinya bagus, tapi jangan terlalu berharap pada datalist
Dalam praktiknya, titik integrasinya terlalu sedikit untuk benar-benar berguna, jadi tidak cocok untuk penggunaan di luar prototipe kecil
- Aku pernah memakai datalist untuk saran autocomplete dan hasilnya bekerja sangat baik
- Sepertinya dulu aku pernah mencoba membuat combo box dengan datalist, tetapi tidak berhasil
Aku penasaran apakah linter HTML benar-benar membantu membedakan hal-hal seperti ini
Aku juga ingin tahu apakah ada linter yang bisa memaksakan pilihan tag semantik semacam ini
- Aku kurang paham dengan gagasan memaksakan tag semantik
  HTML pada dasarnya dibuat agar penulis bisa memakainya secara kreatif, jadi menurutku tidak masuk akal memaksakan tag tertentu dibanding tag lain
  Aksesibilitas memang penting, tetapi batasannya saja sudah cukup banyak
- Yang paling mendekati yang kutahu adalah https://github.com/kristoff-it/superhtml#diagnostics
  
  SuperHTML memvalidasi bukan hanya sintaks, tetapi juga nesting elemen dan nilai atribut
  Tidak ada language server lain yang mengimplementasikan seluruh spesifikasi HTML ke dalam kode validasi
Baru tahu hari ini
Aku penasaran kenapa lebih banyak framework tidak memanfaatkannya
- Dari sudut pandang pengalaman pengguna, itu sama saja dengan daftar biasa
  Kalau itu membantu memahami kodenya, silakan dipakai, tetapi dalam accessibility tree browser dan hampir semua aspek lainnya, itu tetap hanya daftar tak berurutan biasa
  
  Untuk menyampaikan bahwa itu adalah daftar tindakan, kamu harus menambahkan atribut ARIA
  Artikel itu menyebut role=menu, tetapi itu saja tidak cukup, setiap item juga perlu peran menuitem
  WAI Authoring Practices Guide menjelaskan peran dan ekspektasi interaksinya, tetapi jangan menyalin contoh kodenya mentah-mentah, dan khususnya jangan memakai peran ini untuk menu navigasi
  
  https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
- Orang pintar tidak belajar HTML yang sulit, mereka cukup menyelesaikannya dengan beberapa div
- HTML modern punya banyak fitur menarik
  
  Aku suka bertanya kepada orang-orang menurut mereka suatu elemen melakukan apa
  Aku sendiri juga awalnya tidak bisa menebak sama sekali
Setelah beberapa tahun menjadi frontend lead, ternyata masih banyak informasi berguna yang belum kuketahui
Sepertinya kami pasti akan mulai mencobanya di perusahaan juga
Andai saja para desainer menyukai tampilan default datalist
- Menurut pengalamanku, kurangnya kustomisasi gaya adalah hambatan terbesar untuk memakai fitur HTML native
Tulisan blognya bagus sekali, tapi aku tidak bisa menemukan cara untuk melihat semua daftar tulisannya sekaligus

https://blog.frankmtaylor.com/archive tidak ada

https://blog.frankmtaylor.com/archives juga bukan

https://blog.frankmtaylor.com/posts tidak ada

https://blog.frankmtaylor.com/all juga tidak ada

https://blog.frankmtaylor.com/blog juga bukan

Karena ada juga orang yang punya lebih dari 10 ribu bookmark, akan sangat membantu jika ada satu halaman daftar yang hanya menampilkan semua tulisan yang pernah dibuat sampai sekarang tanpa penjelasan atau isi lengkap artikelnya
- Maksudmu sitemap bukan?
  Sebagian besar blog punya sitemap.xml yang mencantumkan semua tulisannya
  
  Dan aku juga penasaran kenapa kamu ingin menelusuri semua 235 artikelnya

Daftar HTML

Daftar kontrol: `<select>`/`<option>` dan `<datalist>`

Pilihan tetap adalah `<select>` dan `<option>`

Kelompokkan opsi terkait dengan `<optgroup>`

Tingkatkan dengan fitur HTML bawaan

Daftar saran: `<datalist>`

Perilaku `<option value>`

Digabungkan dengan berbagai tipe input

Digabungkan dengan `<input type="range">`

Daftar berurutan: `<ol>`

Nesting daftar berurutan dan tidak berurutan

`reversed`

Membalik urutan item sebenarnya dengan JavaScript

`start`

Daftar deskripsi: `<dl>`, `<dt>`, `<dd>`

Daftar definisi di HTML 4

Makna yang diperluas di HTML5

Metadata dan debugging JSON

Menu: `<menu>`

Jangan menganggap `li` hanya masuk ke dua container

`<nav>` dan `<menu>` itu berbeda

Daftar tidak berurutan: `<ul>`

1 komentar

Opini Hacker News

Daftar HTML

Daftar kontrol: <select>/<option> dan <datalist>

Pilihan tetap adalah <select> dan <option>

Kelompokkan opsi terkait dengan <optgroup>

Tingkatkan dengan fitur HTML bawaan

Daftar saran: <datalist>

Perilaku <option value>

Digabungkan dengan berbagai tipe input

Digabungkan dengan <input type="range">

Daftar berurutan: <ol>

Nesting daftar berurutan dan tidak berurutan

reversed

Membalik urutan item sebenarnya dengan JavaScript

start

Daftar deskripsi: <dl>, <dt>, <dd>

Daftar definisi di HTML 4

Makna yang diperluas di HTML5

Metadata dan debugging JSON

Menu: <menu>

Jangan menganggap li hanya masuk ke dua container

<nav> dan <menu> itu berbeda

Daftar tidak berurutan: <ul>

Bacaan terkait

1 komentar

Opini Hacker News

Daftar kontrol: `<select>`/`<option>` dan `<datalist>`

Pilihan tetap adalah `<select>` dan `<option>`

Kelompokkan opsi terkait dengan `<optgroup>`

Daftar saran: `<datalist>`

Perilaku `<option value>`

Digabungkan dengan `<input type="range">`

Daftar berurutan: `<ol>`

`reversed`

`start`

Daftar deskripsi: `<dl>`, `<dt>`, `<dd>`

Menu: `<menu>`

Jangan menganggap `li` hanya masuk ke dua container

`<nav>` dan `<menu>` itu berbeda

Daftar tidak berurutan: `<ul>`