Tentang `<dl>` (2021)

 (benmyers.dev)
1 poin oleh GN⁺ 9 jam lalu | 2 komentar | Bagikan ke WhatsApp
  • `` adalah elemen HTML untuk merepresentasikan daftar pasangan nama–nilai secara semantik, sehingga cocok untuk pola UI seperti fasilitas, item tagihan, atau glosarium istilah teknis
  • Daftar deskripsi memiliki struktur yang menempatkan nama ** dan **nilai di dalam ``, dan satu nama juga dapat memiliki beberapa nilai
  • Saat perlu mengelompokkan dan terkait untuk styling, menurut spesifikasi hanya wrapper `` yang boleh membungkus grup tersebut
  • Jika hanya memakai bertingkat, teknologi bantu sulit mengenali pola daftar, tetapi memberi keuntungan navigasi seperti jumlah item, posisi saat ini, dan kemampuan melewati daftar
  • Data angka, kemampuan, dan aksi dengan bentuk berbeda seperti blok stat Dungeons & Dragons juga dapat dipisahkan ke dalam daftar deskripsi, yang menunjukkan sifatnya yang serbaguna

Pola yang direpresentasikan oleh ``

  • `` adalah elemen HTML yang merepresentasikan daftar pasangan nama–nilai, dan memberi makna semantik pada pola yang berulang kali muncul dalam UI web
  • Struktur berpasangan nama dan nilai seperti fasilitas penginapan, rincian tagihan sewa bulanan, atau glosarium istilah teknis merupakan kandidat yang paling umum
  • bukan elemen tunggal, melainkan membentuk grup nama–nilai melalui kombinasi tiga elemen:, , dan
  • Sebelum HTML5, `` disebut definition list, dan awalnya digunakan untuk merepresentasikan glosarium berisi istilah dan definisinya

Struktur dasar daftar deskripsi

  • , , ``

    • **** membungkus seluruh daftar deskripsi, mirip seperti atau `` yang membungkus keseluruhan daftar
    • ** adalah description term yang merepresentasikan nama, dan ** adalah description detail yang merepresentasikan nilai
    • dan sebelumnya juga dikenal masing-masing sebagai definition term dan definition detail
    • Struktur dasarnya adalah satu diikuti oleh satu

	Title
	Designing with Web Standards

  • Beberapa pasangan nama–nilai

    • Untuk menambahkan pasangan nama–nilai lain dalam daftar yang sama, tempatkan dan baru secara berurutan

	Title
	Designing with Web Standards
	Publisher
	New Riders Pub; 3rd edition (October 19, 2009)

  • Satu nama dengan beberapa nilai

    • Satu dapat memiliki beberapa **nilai**
    • Struktur satu nama dengan beberapa nilai bisa direpresentasikan secara langsung, misalnya ketika sebuah buku memiliki beberapa penulis

	Title
	Designing with Web Standards
	Author
	Jeffrey Zeldman
	Ethan Marcotte
	Publisher
	New Riders Pub; 3rd edition (October 19, 2009)

  • Wrapper untuk styling

    • Saat dan terkait perlu dikelompokkan untuk keperluan styling, Anda dapat menggunakan wrapper ``
    • Menurut spesifikasi, satu-satunya elemen wrapper yang dapat membungkus grup / adalah ``
    • Struktur yang diizinkan dan batasan lebih rinci bisa dilihat di dokumentasi `` MDN atau spesifikasi HTML

		Title
		Designing with Web Standards

		Author
		Jeffrey Zeldman
		Ethan Marcotte

Mengapa semantik itu penting

  • Grup nama–nilai memang bisa dibuat secara visual hanya dengan `` bertingkat, tetapi browser atau teknologi bantu sulit mengenalinya sebagai pola daftar
  • Pemilihan elemen semantik dapat ditentukan berdasarkan apakah pengguna memperoleh manfaat nyata ketika komputer dapat mengenali pola tersebut
  • Dengan menggunakan ``, pengguna screen reader dapat menavigasi daftar grup nama–nilai dengan lebih mudah
    • Mereka dapat mengetahui jumlah grup nama–nilai dalam daftar
    • Mereka dapat memahami posisi saat ini di dalam daftar
    • Jika tidak relevan, mereka dapat melewati seluruh daftar sebagai satu blok
  • Dalam struktur bertingkat, tiap nama dan nilai diperlakukan seperti node teks yang terpisah, sedangkan memberi makna struktural pada informasi yang sama
  • Keuntungan ini benar-benar tersedia saat menggunakan `` pada sebagian besar kombinasi browser/screen reader
  • Namun, karena dukungan untuk belum sepenuhnya merata, jika pengalaman fallback sebagai node teks terpisah belum cukup baik, Anda juga dapat memilih elemen lain seperti sampai dukungannya membaik

Contoh blok stat Dungeons & Dragons

  • Blok stat Dungeons & Dragons adalah contoh yang kaya pasangan nama–nilai, dan dalam satu blok stat kita bisa menemukan beberapa kandidat daftar deskripsi
  • Nilai dasar seperti Armor Class, Hit Points, dan Speed; atribut seperti STR dan DEX; informasi kemahiran seperti Senses, Languages, dan Challenge; serta Traits dan Actions semuanya dapat dipisahkan ke dalam daftar deskripsi
  • Daftar atribut dan daftar serangan yang tampak berbeda secara visual pun sama-sama dapat direpresentasikan dengan pola daftar deskripsi
  • Untuk membedakan beberapa daftar deskripsi atau menghubungkannya dengan judul, Anda dapat menggunakan aria-label dan aria-labelledby
  • Markup ini hanyalah salah satu cara yang memungkinkan, dan menunjukkan bahwa pola `` cukup serbaguna untuk diterapkan pada berbagai kumpulan data dengan bentuk berbeda

Bacaan terkait

2 komentar

 
GN⁺ 6 jam lalu
Komentar di Lobste.rs
  • Sayang sekali Markdown tidak punya daftar deskripsi (description list)
    • Markdown ala Pandoc mendukung daftar deskripsi dengan setidaknya dua sintaks
      Namun benar bahwa sebagian besar implementasi tidak mendukungnya. Sebaliknya, Typst sebagai sistem typesetting/bahasa markup menyediakan daftar deskripsi sebagai sintaks kelas satu seperti / term: description, jadi menurut saya ini juga cocok dipadukan dengan daftar berpoin - maupun daftar bernomor otomatis +
    • Seingat saya, beberapa implementasi seperti Hugo, Pandoc, dan GFM mendukung bentuk seperti ini 
      dt  
: dd  

dt  
: dd
    • Markdown bisa memiliki semua yang dimiliki HTML. Karena ia adalah superset dari HTML
    • https://www.djot.net/ mendukung daftar deskripsi. Yang lebih penting, Djot bukan superset dari HTML, jadi bisa dipakai juga di luar browser yang mendukung HTML besar dan kompleks
  • Secara pribadi, ini termasuk salah satu dari lima elemen terbaik sepanjang masa
    • Bersama <details>, ini jelas ada di jajaran teratas. Saya berharap ada lebih banyak elemen interaktif seperti ini
  • Satu entri juga bisa punya beberapa <dt>. Ini bisa dipakai untuk mengekspresikan hal seperti sinonim dalam daftar bergaya kamus
    Saat menatanya dengan CSS, ada baiknya membiasakan diri dengan selector sibling yang bersebelahan
    Referensi: https://developer.mozilla.org/en-US/docs/…
 
GN⁺ 9 jam lalu
Opini Hacker News

  • Ini salah: tidak punya peran implisit yang sesuai, tetapi bisa diberi peran `group`, `list`, `none`, atau `presentation` `aria-label` hanya boleh didefinisikan pada elemen yang punya peran kompatibel, baik implisit maupun eksplisit, dan meskipun `aria-label` diizinkan pada sebagian besar peran, di sini `presentation` dan `none` tidak berlaku, jadi yang tersisa hanya `group` dan `list` `group` terasa janggal dan `list` masih bisa diterima, jadi kesimpulannya **hapus `aria-label`** atau tambahkan `role="list"`. Kalau begitu, anak-anaknya juga perlu `role="listitem"` Yang terlewat di artikel adalah bahwa tidak selalu datang satu per satu, tetapi bisa beberapa kali berturut-turut. Contoh di spesifikasi bagus: https://html.spec.whatwg.org/multipage/grouping-content.html... Ini bukan pasangan nama-nilai, melainkan kelompok nama-nilai

    • Ini benar-benar baru buat saya. Penasaran, apakah Anda akan menaruh role="listitem" pada elemen yang membungkus dan ? `role="listitem"` tampaknya diizinkan pada , tetapi ketika beberapa dikelompokkan bersama, itu terasa kurang tepat, dan saya juga tidak yakin apakah itu akan merusak cara ditafsirkan sebagai term aslinya
    • Tulisan lama HTML5 Doctor masih yang paling saya suka: https://html5doctor.com/element-index/

  • Mungkin ini tidak populer di sini, tapi hidup saya jadi lebih mudah sejak berhenti berusaha memakai HTML semantik. Desainnya memang kurang bagus Setiap kali mencoba memakai , saya akhirnya menyesal. Entah karena perlu beberapa lapis wrapper, perlu garis pemisah antarbagian, perlu ikon, atau perlu judul yang membentang di beberapa pasangan kunci-nilai Ada sedikit fleksibilitas, tetapi masih jauh dari cukup untuk benar-benar menangani konsep umum yang diklaimnya. Tentu saya tetap memakai elemen padanan seperti , `` jika ada manfaat nyata yang bisa diamati, tetapi kalau tidak pas dengan model data dan semuanya tetap harus dioverride, itu bukan pilihan yang praktis Kalau 99% penggunaan harus mengakali API, rasanya tidak terlalu kontroversial untuk bilang bahwa itu mungkin kesalahan API

    • Sebagai pengguna screen reader setiap hari, saya sangat setuju Akan lebih baik untuk semua orang jika W3C berhenti dengan omong kosong kemurnian semantik yang ideologis dan mengambil pendekatan yang lebih realistis secara politik. Yang perlu dilihat bukan apakah API itu murni secara semantik, tetapi apa yang ingin dilakukan pengembang, trik apa yang akan mereka pakai meski dilarang, dan bagaimana membuat itu bisa dilakukan dengan manfaat sebesar mungkin untuk semua orang ARIA live region adalah contoh sempurna. Yang sebenarnya diinginkan pengembang adalah document.speakText. Yang benar-benar mereka punya adalah API aneh yang membacakan teks saat teks di halaman berubah. Keduanya perlu dijembatani, dan bahkan jika diimplementasikan dengan baik pun tetap sulit dan terasa seperti hack. Tapi setidaknya pendekatan live region itu HTML yang murni secara semantik, kurasa
    • Kedengarannya ini lebih seperti kesalahan CSS. Seperti display:contents yang memungkinkan wrapper dihilangkan, menurut saya juga perlu ada cara untuk mengelompokkan elemen seolah-olah mereka punya leluhur bersama :wrap(dt, dt+dd) {border: solid 1px}
    • Saya juga merasakan hal yang mirip tentang HTTP. Protokol ini sangat cocok untuk penyimpanan resource seperti S3. GET, PUT, DELETE semuanya masuk akal, dan kode status HTTP juga memang dibuat tepat untuk use case ini Tapi sebagai pengembang web, kebanyakan dari kita tidak membangun penyimpanan resource. Itu sangat generik; cukup dibuat sekali lalu dipakai jutaan aplikasi. Saat seseorang menulis kode yang berinteraksi dengan HTTP, sebagian besar waktu mereka sebenarnya sedang melakukan remote procedure call Dengan GraphQL, gRPC, atau sistem remote procedure call lain, semua ini dihindari sepenuhnya. Semuanya dikirim ke satu endpoint dengan POST, lalu ada satu lapisan abstraksi tambahan sehingga tidak perlu mengembalikan error 4XX/5XX untuk setiap situasi yang sangat spesifik bagi aplikasi Jelas para penulis RFC agak berlebihan. 402 Payment Required, 407 Proxy Authentication Required, 508 Loop Detected terlihat seperti upaya memasukkan fitur yang spesifik untuk aplikasi atau jenis deployment tertentu ke fondasi web Saya tidak mengerti kenapa kebutuhan spesifik para penulis RFC diimplementasikan di fondasi web, sedangkan kebutuhan saya harus mencari bagian yang kebetulan cocok lalu memaksakan semua elemen khusus aplikasi ke dalam 400 Bad Request atau 500 Internal Server Error. Setiap kali saya melihat aplikasi web benar-benar memanfaatkan lebih dari sekadar kode status HTTP minimum, saya cuma bisa memutar mata. Itu seharusnya ada di lapisan aplikasi. Protokol ini bukan dibuat untuk Anda, melainkan untuk aplikasi LAMP stack yang kebanyakan menyajikan aset statis

  • Pelajaran sejarah daftar. Kalau melihat manual IBM mainframe DCF/GML tahun 1985 di bawah, DL-DT-DD sudah ada sejak sebelum web Dalam dokumen yang berumur lebih dari 40 tahun itu, selain Definition lists (DL) juga ada Glossary lists (GL), Ordered lists (OL), Unordered lists (UL), dan Simple lists (SL) ibm :: 370 :: DCF :: SH35-0050-2 Document Composition Facility Generalized Markup Language Implementation Guide Rel 3 Mar85 https://archive.org/details/bitsavers_ibm370DCFSpositionFaci...

    • GML berasal dari 1969, SGML dari tahun 1970-an. Secara internal kami memakai sesuatu bernama BookMaster, yang tampak seperti pendahulu HTML Alih-alih ``, dipakai :p., dan alih-alih `

  • dipakai:li.`. Sekitar 1990~1991, saat TBL mengembangkan HTML dan HTTP, ada juga upaya bernama HyTime, aplikasi SGML yang berfokus pada hypermedia. HTML menyingkirkannya dengan cukup cepat Untuk Charles Goldfarb yang memimpin GML/SGML lihat https://en.wikipedia.org/wiki/Charles_Goldfarb, dan untuk SGML lihat https://en.wikipedia.org/wiki/Standard_Generalized_Markup_La...

    • Generalized Markup Language milik IBM berkembang menjadi SGML (Standard Generalized Markup Language), dan setahu saya SGML banyak dipakai di CERN tempat Tim Berners-Lee mengerjakan HTML. HTML banyak diturunkan dari sana Yang menarik dari HTML adalah bahwa suatu bentuk bahasa markup sudah beredar selama puluhan tahun, lalu Berners-Lee menambahkan hyperlink ke dalamnya
    • Bukankah sekarang namanya description list?

  • Situs web pertama di dunia banyak memakai `` https://info.cern.ch/hypertext/WWW/TheProject.html https://info.cern.ch/ adalah semacam landing page yang memberi konteks dan arahan tentang situs web pertama yang sesungguhnya

  • Semua toolkit GUI native sudah mati, dan sekarang orang bisa menulis esai panjang tentang satu elemen HTML. Entah ini bisa disebut kemajuan atau tidak

  • Baru sekarang saya tahu bahwa sebelum HTML5, ini disebut definition list, dan awalnya `` memang hanya dimaksudkan untuk merepresentasikan glossary yang terdiri dari term dan definisi. Ternyata selama 10 tahun saya menyebutnya dengan nama yang salah

    • b sekarang artinya “bring attention to”. Ya ampun
    • Anda tidak sendirian. Ini kedua kalinya saya melihatnya minggu ini, dan awalnya saya kira itu salah ketik
    • Baru sekarang saya tahu bahwa namanya di definition list sudah diubah
    • Saya tidak mau mengecek tahun HTML5 distandardisasi. Kemungkinan besar sudah lebih dari 10 tahun ;)

  • Artikel bagus. Kalau mau mengoreksi hal yang sangat sepele, elemen small tidak boleh dipakai untuk subjudul, dan untuk itu seharusnya memakai elemen hgroup Elemen small merepresentasikan komentar tambahan seperti cetakan kecil. Cetakan kecil biasanya berisi disclaimer, peringatan, batasan hukum, atau hak cipta. Kadang juga dipakai untuk atribusi atau memenuhi persyaratan lisensi (https://html.spec.whatwg.org/multipage/text-level-semantics....)

  • Ada catatan yang berguna tentang seberapa baik screen reader mendukung ``: https://adrianroselli.com/2025/01/updated-brief-note-on-desc...

  • Setelah melihat contoh terakhir lembar atribut DnD, saya jadi penasaran apakah menumpuk `` secara bersarang itu legal Misalnya bisa seperti Actions ...?

  • Saya suka . Setidaknya dulu, rasanya penyalahgunaan tabel lebih sering terjadi daripada penyalahgunaan , dan kerepotan markup tabel lebih parah daripada beberapa div

    • Kalau tag penutup yang tidak perlu dihilangkan, tidak seribet itu first second what ever Menurut saya ini lebih sederhana dan rapi daripada sintaks tabel Markdown mana pun
    • Benar. Tapi memaksa tabel meniru `` masih jauh lebih baik dibanding banyak bentuk penyalahgunaan tabel lainnya
    • Saya selalu menganggap `` seperti satu baris tunggal pada tabel