เกี่ยวกับ `<dl>` (2021)

 (benmyers.dev)
1 คะแนน โดย GN⁺ 9 시간 전 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • `` เป็นองค์ประกอบ HTML ที่ใช้สื่อความหมายของรายการคู่ชื่อ–ค่า จึงเหมาะกับแพตเทิร์น UI เช่น สิ่งอำนวยความสะดวก รายการค่าใช้จ่าย หรืออภิธานศัพท์ทางเทคนิค
  • รายการคำอธิบายมีโครงสร้างโดยวาง ชื่อ ** และ **ค่า ไว้ภายใน `` และหนึ่งชื่อสามารถมีหลายค่าได้
  • เมื่อต้องจัดกลุ่ม และ ที่เกี่ยวข้องกันเพื่อการจัดสไตล์ ตามสเปกแล้วมีเพียง ตัวครอบ `` เท่านั้นที่สามารถครอบกลุ่มได้
  • หากใช้เพียง ซ้อนกัน เทคโนโลยีช่วยการเข้าถึงอาจจดจำแพตเทิร์นรายการได้ยาก แต่ มีข้อดีด้านการนำทาง เช่น จำนวนรายการ ตำแหน่งปัจจุบัน และการข้ามทั้งรายการ
  • ข้อมูลตัวเลข ความสามารถ และการกระทำที่มีรูปแบบต่างกันอย่างในสเตตัสบล็อกของ Dungeons & Dragons ก็สามารถแยกเป็นรายการคำอธิบายได้ จึงแสดงให้เห็นถึงความอเนกประสงค์ของมัน

แพตเทิร์นที่ `` สื่อความหมาย

  • `` เป็นองค์ประกอบ HTML ที่ใช้แทนรายการคู่ชื่อ–ค่า และมอบความหมายให้กับแพตเทิร์นที่ปรากฏซ้ำ ๆ ในเว็บ UI
  • โครงสร้างที่ชื่อและค่าจับคู่กัน เช่น สิ่งอำนวยความสะดวกของที่พัก รายการเรียกเก็บแต่ละส่วนของค่าเช่า หรืออภิธานศัพท์ทางเทคนิค เป็นตัวอย่างที่เหมาะสม
  • ไม่ใช่องค์ประกอบเดี่ยว แต่เป็นการประกอบกันของสามองค์ประกอบคือ, , เพื่อสร้างกลุ่มชื่อ–ค่า
  • ก่อนยุค HTML5 นั้น `` ถูกเรียกว่า definition list และเดิมมีไว้เพื่อแสดงอภิธานศัพท์ที่ประกอบด้วยคำศัพท์และคำจำกัดความ

โครงสร้างพื้นฐานของรายการคำอธิบาย

  • , , ``

    • **** ครอบรายการคำอธิบายทั้งหมด คล้ายกับบทบาทที่ หรือ `` ใช้ครอบทั้งรายการ
    • ** คือ description term ใช้แทนชื่อ ส่วน ** คือ description detail ใช้แทนค่า
    • ก่อนหน้านี้ และ ก็เป็นที่รู้จักในชื่อ definition term และ definition detail ตามลำดับ
    • โครงสร้างพื้นฐานคือมี หนึ่งตัวตามด้วย หนึ่งตัว

	Title
	Designing with Web Standards

  • หลายคู่ชื่อ–ค่า

    • หากต้องการเพิ่มคู่ชื่อ–ค่าอื่นในรายการเดียวกัน ให้เรียง และ ชุดใหม่ต่อกัน

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

  • หนึ่งชื่อมีหลายค่า

    • หนึ่งตัวสามารถมี **ค่า** ได้หลายตัว
    • จึงสามารถสื่อโครงสร้างที่ชื่อหนึ่งมีหลายค่าได้โดยตรง เช่น กรณีที่หนังสือมีผู้เขียนหลายคน

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

  • ตัวครอบเพื่อการจัดสไตล์

    • เมื่อต้องจัดกลุ่ม และ ที่เกี่ยวข้องกันเพื่อการจัดสไตล์ สามารถใช้ ตัวครอบ `` ได้
    • ตามสเปก องค์ประกอบตัวครอบที่สามารถครอบกลุ่ม / ได้มีเพียง `` เท่านั้น
    • รายละเอียดเพิ่มเติมเกี่ยวกับโครงสร้างที่อนุญาตและข้อจำกัด ดูได้ที่ เอกสาร `` ของ MDN หรือ HTML สเปก

		Title
		Designing with Web Standards

		Author
		Jeffrey Zeldman
		Ethan Marcotte

เหตุใดความหมายเชิงโครงสร้างจึงสำคัญ

  • กลุ่มชื่อ–ค่าสามารถสร้างให้มองเห็นได้ด้วยการซ้อน `` เพียงอย่างเดียว แต่เบราว์เซอร์หรือเทคโนโลยีช่วยการเข้าถึงอาจจดจำว่าเป็น แพตเทิร์นรายการ ได้ยาก
  • การเลือกใช้องค์ประกอบเชิงความหมายสามารถตัดสินได้จากเกณฑ์ว่า เมื่อคอมพิวเตอร์จดจำแพตเทิร์นนั้นได้แล้ว จะเกิดประโยชน์ต่อผู้ใช้อย่างเป็นรูปธรรมหรือไม่
  • เมื่อใช้ `` ผู้ใช้โปรแกรมอ่านหน้าจอจะนำทางรายการกลุ่มชื่อ–ค่าได้ง่ายขึ้น
    • สามารถทราบ จำนวนกลุ่มชื่อ–ค่า ภายในรายการได้
    • รู้ได้ว่าขณะนี้อยู่ตำแหน่งใดในรายการ
    • หากไม่สนใจ ก็สามารถข้ามทั้งรายการเสมือนเป็นบล็อกเดียวได้
  • ในโครงสร้าง แบบซ้อนกัน ชื่อและค่าแต่ละส่วนจะถูกจัดการเหมือนโหนดข้อความอิสระ แต่ มอบ ความหมายเชิงโครงสร้าง ให้กับข้อมูลชุดเดียวกัน
  • ข้อดีเหล่านี้มีให้ใช้งานจริงเมื่อใช้ `` ใน ชุดเบราว์เซอร์/โปรแกรมอ่านหน้าจอส่วนใหญ่
  • อย่างไรก็ตาม เนื่องจากการรองรับ ยังไม่ทั่วถึงนัก หากประสบการณ์ fallback แบบที่ข้อมูลถูกจัดการเป็นโหนดข้อความอิสระยังไม่ดีพอ ก็อาจเลือกใช้องค์ประกอบอื่นอย่าง ไปก่อนจนกว่าการรองรับจะดีขึ้น

ตัวอย่างสเตตัสบล็อกของ Dungeons & Dragons

  • สเตตัสบล็อกของ Dungeons & Dragons เป็นตัวอย่างที่มีคู่ชื่อ–ค่าจำนวนมาก และภายในสเตตัสบล็อกเดียวสามารถพบส่วนที่เหมาะจะใช้รายการคำอธิบายได้หลายส่วน
  • ค่าพื้นฐานอย่าง Armor Class, Hit Points, Speed, ค่าความสามารถอย่าง STR·DEX, ข้อมูลความชำนาญอย่าง Senses·Languages·Challenge ตลอดจน Traits และ Actions สามารถแยกเป็นรายการคำอธิบายได้
  • แม้แต่รายการค่าความสามารถและรายการการโจมตีที่หน้าตาแตกต่างกันก็ยังสามารถแทนด้วย แพตเทิร์นรายการคำอธิบาย ได้ทั้งหมด
  • เมื่อต้องแยกรายการคำอธิบายหลายชุดหรือเชื่อมกับชื่อเรื่อง สามารถใช้ aria-label และ aria-labelledby ได้
  • มาร์กอัปนี้เป็นเพียงหนึ่งในหลายวิธีที่เป็นไปได้ และแสดงให้เห็นว่าแพตเทิร์น `` มี ความอเนกประสงค์ มากพอจะใช้กับชุดข้อมูลที่มีรูปแบบแตกต่างกันได้

บทความที่เกี่ยวข้อง

2 ความคิดเห็น

 
GN⁺ 6 시간 전
ความเห็นจาก Lobste.rs
  • น่าเสียดายที่ Markdown ไม่มี รายการคำอธิบาย (description list)
    • Markdown แบบ Pandoc รองรับรายการคำอธิบายด้วยไวยากรณ์อย่างน้อยสองแบบ
      แต่ก็จริงที่ตัวการติดตั้งส่วนใหญ่ไม่รองรับ ในทางกลับกัน Typst ซึ่งเป็นระบบจัดพิมพ์/ภาษามาร์กอัป มีไวยากรณ์รายการคำอธิบายแบบชั้นหนึ่งอย่าง / term: description จึงเข้ากันได้ดีกับรายการหัวข้อย่อย - หรือรายการลำดับเลขอัตโนมัติ +
    • จำได้ว่าบาง implementation เช่น Hugo, Pandoc และ GFM รองรับรูปแบบนี้ 
      dt  
: dd  

dt  
: dd
    • Markdown สามารถมีทุกอย่างที่ HTML มีได้ เพราะมันเป็น superset ของ HTML
    • https://www.djot.net/ รองรับรายการคำอธิบาย และที่สำคัญกว่านั้นคือ Djot ไม่ได้เป็น superset ของ HTML จึงสามารถใช้นอกเบราว์เซอร์ที่ต้องรองรับ HTML แบบเทอะทะได้
  • สำหรับผม นี่เป็นองค์ประกอบที่ติดหนึ่งในห้าอันดับแรกตลอดกาล
    • เมื่ออยู่คู่กับ <details> ก็ยิ่งติดอันดับบน ๆ อย่างชัดเจน อยากให้มี องค์ประกอบเชิงโต้ตอบ แบบนี้มากกว่านี้
  • ในหนึ่งรายการสามารถมี <dt> ได้หลายตัว ใช้แสดงสิ่งอย่างเช่น คำพ้องความหมาย ในรายการแบบพจนานุกรมได้
    เวลา styling ด้วย CSS ก็ควรทำความคุ้นเคยกับ ตัวเลือกพี่น้องที่อยู่ติดกัน
    อ้างอิง: https://developer.mozilla.org/en-US/docs/…
 
GN⁺ 9 시간 전
ความคิดเห็นจาก Hacker News

  • อันนี้ผิด: ไม่มี implicit role ที่สอดคล้องกัน แต่สามารถกำหนด role เป็น `group`, `list`, `none`, `presentation` ได้ `aria-label` กำหนดได้เฉพาะกับ element ที่มี role ที่เข้ากันได้ ไม่ว่าจะเป็น implicit หรือ explicit และแม้ `aria-label` จะอนุญาตกับ role ส่วนใหญ่ แต่กรณีนี้ตัด `presentation` กับ `none` ออกไป เลยเหลือแค่ `group` กับ `list` `group` ฟังดูแปลก ส่วน `list` พอรับได้ ดังนั้นข้อสรุปคือ **เอา aria-label ออก** หรือเพิ่ม `role="list"` เข้าไป แล้วในกรณีนั้น ลูกก็ต้องมี `role="listitem"` ด้วย สิ่งที่บทความมองข้ามคือ ไม่ได้มาแค่ตัวเดียว แต่อาจมีหลายตัวต่อเนื่องกันได้ ตัวอย่างในสเปกดีมาก: https://html.spec.whatwg.org/multipage/grouping-content.html... นี่ไม่ใช่คู่ชื่อ-ค่า แต่เป็น กลุ่มชื่อ-ค่า

    • อันนี้ไม่เคยรู้เลย สงสัยว่า คุณจะใส่ role="listitem" ไว้ที่ element ที่ครอบ กับ ไหม? ดูเหมือน `role="listitem"` จะอนุญาตบน ได้ แต่ถ้ามีหลาย ถูกจัดเป็นกลุ่มเดียวกัน มันก็ดูไม่ค่อยตรงนัก และก็ไม่แน่ใจว่าจะทำให้การตีความ ในฐานะ term แบบเดิมพังไปด้วยหรือเปล่า
    • บทความเก่าของ HTML5 Doctor ยังเป็นอันที่ชอบที่สุดอยู่ดี: https://html5doctor.com/element-index/

  • คงไม่ค่อยเป็นที่นิยมแถวนี้ แต่ชีวิตผมง่ายขึ้นมากตั้งแต่เลิกพยายามใช้ semantic HTML เพราะการออกแบบมันไม่ค่อยดีจริง ๆ ทุกครั้งที่พยายามใช้ สุดท้ายก็มักจะเสียดายทีหลัง เพราะต้องการ wrapper หลายชั้น หรือต้องมีเส้นคั่นระหว่าง section หรือต้องมีไอคอน หรือต้องมีหัวข้อที่ครอบหลายคู่คีย์-ค่า มันพอมีความยืดหยุ่นอยู่บ้าง แต่ยังห่างไกลจากการรองรับแนวคิดทั่วไปที่มันอ้างว่าครอบคลุม แน่นอนว่ายังใช้ element คู่ที่มีประโยชน์สังเกตได้ชัดอย่าง, `` อยู่ แต่ถ้ามันไม่ตรงกับ data model เป๊ะ ๆ และสุดท้ายต้อง override ทุกอย่าง มันก็ไม่ใช่ตัวเลือกที่ใช้งานได้จริง ถ้า 99% ของการใช้งานคือการเลี่ยง API แบบนี้ ก็คงไม่ใช่เรื่องถกเถียงอะไรนักที่จะบอกว่า ปัญหาอยู่ที่ API

    • ในฐานะคนที่ใช้ screen reader ทุกวัน เห็นด้วยมาก ถ้า W3C เลิกพูดเพ้อเรื่องความบริสุทธิ์เชิงอุดมการณ์ของ semantic แล้วหันมามองโลกความจริงมากขึ้น มันจะดีกับทุกคน แทนที่จะสนใจว่า API บริสุทธิ์เชิงความหมายแค่ไหน ควรมองว่านักพัฒนาต้องการทำอะไร ถึงห้ามยังไงพวกเขาก็จะใช้ลูกเล่นอะไร และจะทำให้สิ่งนั้นเกิดขึ้นในทางที่เป็นประโยชน์กับทุกคนที่สุดได้อย่างไร ARIA live region เป็นตัวอย่างที่สมบูรณ์แบบ สิ่งที่นักพัฒนาต้องการจริง ๆ คือ document.speakText แต่สิ่งที่มีจริงคือ API ประหลาดที่อ่านข้อความบนหน้าเมื่อข้อความนั้นเปลี่ยนไป มันมีช่องว่างระหว่างสองอย่างนี้ที่ต้องเชื่อม และถึงจะทำดีแค่ไหนก็ยังยากและออกแนวแฮ็กอยู่ดี แต่อย่างน้อยวิธี live region ก็คงถือว่าเป็น HTML ที่บริสุทธิ์เชิง semantic ล่ะนะ
    • ฟังดูเหมือนเป็น ความผิดของ CSS มากกว่า แบบที่ display:contents ช่วยลบ wrapper ได้ ก็น่าจะมีวิธีจัดกลุ่ม element ให้เหมือนมี common ancestor ได้ด้วย :wrap(dt, dt+dd) {border: solid 1px}
    • ผมก็รู้สึกคล้ายกันกับ HTTP โปรโตคอลนี้เหมาะมากกับ resource store อย่าง S3 ทั้ง GET, PUT, DELETE ล้วนสมเหตุสมผล และ HTTP status code ก็ถูกออกแบบมาให้เหมาะกับกรณีนี้พอดี แต่ในฐานะ web developer คนส่วนใหญ่ไม่ได้สร้าง resource store ของแบบนั้นมันทั่วไปมาก สร้างครั้งเดียวแล้วมีแอปนับล้านใช้ได้ เวลามีใครเขียนโค้ดที่โต้ตอบกับ HTTP ส่วนใหญ่แล้วพวกเขากำลังทำ remote procedure call กันอยู่ ถ้าใช้ GraphQL, gRPC หรือระบบ remote procedure call อื่น ๆ ก็เลี่ยงปัญหานี้ไปได้ทั้งก้อน ส่งทุกอย่างไปที่ single endpoint ด้วย POST แล้วเพิ่ม abstraction อีกชั้นหนึ่ง ทำให้ไม่ต้องคืนข้อผิดพลาด 4XX/5XX สำหรับสถานการณ์ยิบย่อยที่เฉพาะกับแอปมาก ๆ ชัดเจนว่าคนเขียน RFC ไปไกลเกินหน่อย 402 Payment Required, 407 Proxy Authentication Required, 508 Loop Detected ดูเหมือนความพยายามยัดความต้องการเฉพาะของบางแอปหรือบางรูปแบบ deployment ลงไปในรากฐานของเว็บ ผมไม่เข้าใจว่าทำไมความต้องการเฉพาะของคนเขียน RFC ถึงได้ถูกทำไว้ในพื้นฐานของเว็บ แต่ความต้องการของผมต้องไปหาจุดที่พอทับซ้อนกันได้ แล้วก็ยัดองค์ประกอบเฉพาะแอปทั้งหมดลงใน 400 Bad Request หรือ 500 Internal Server Error ทุกครั้งที่เห็นเว็บแอปใช้ HTTP status code มากกว่าขั้นต่ำจริง ๆ ก็อดกลอกตาไม่ได้ ของพวกนั้นควรอยู่ที่ application layer โปรโตคอลนี้ไม่ได้ถูกสร้างมาเพื่อคุณ แต่มาเพื่อ แอป LAMP stack ที่ส่วนใหญ่ให้บริการ static asset

  • นี่คือบทเรียนประวัติศาสตร์ของ list ดูจากคู่มือ IBM mainframe DCF/GML ปี 1985 ด้านล่าง DL-DT-DD มีอยู่ก่อนเว็บแล้ว ในเอกสารอายุกว่า 40 ปีนั้น นอกจาก Definition lists (DL) ก็ยังมี Glossary lists (GL), Ordered lists (OL), Unordered lists (UL), 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 ย้อนกลับไปถึงปี 1969 และ SGML ก็ย้อนไปถึงยุค 1970 ภายในเขาใช้สิ่งที่เรียกว่า BookMaster ซึ่งก็ดูเหมือนบรรพบุรุษของ HTML เหมือนกัน แทนที่จะเป็น `` จะใช้ :p. และแทน `

  • จะใช้:li.` อะไรทำนองนั้น ช่วงปี 1990~1991 ตอนที่ TBL กำลังพัฒนา HTML และ HTTP ก็ยังมีความพยายามชื่อ HyTime ซึ่งเป็น SGML application ที่เน้น hypermedia ด้วย แต่ HTML ก็เบียดมันออกไปค่อนข้างเร็ว ดู Charles Goldfarb ผู้ผลักดัน GML/SGML ได้ที่ https://en.wikipedia.org/wiki/Charles_Goldfarb และ SGML ที่ https://en.wikipedia.org/wiki/Standard_Generalized_Markup_La...

    • ผมเข้าใจว่า IBM Generalized Markup Language พัฒนาต่อมาเป็น SGML (Standard Generalized Markup Language) และที่ CERN ซึ่ง Tim Berners-Lee กำลังทำ HTML อยู่นั้นก็มีการใช้ SGML กันมาก HTML สืบทอดมาจากตรงนั้นอย่างชัดเจน สิ่งที่น่าสนใจใน HTML คือ markup language รูปแบบหนึ่งลอยอยู่มาหลายสิบปี แล้ว Berners-Lee ก็เพิ่ม hyperlink เข้าไป
    • ตอนนี้ไม่ใช่ description list เหรอ?

  • เว็บไซต์แรกของโลกใช้ `` เยอะมาก https://info.cern.ch/hypertext/WWW/TheProject.html https://info.cern.ch/ เป็นหน้า landing page ประมาณหนึ่งที่ให้บริบทและทางไปยังเว็บไซต์แรกจริง

  • native GUI toolkit ตายกันหมดแล้ว และตอนนี้ผู้คนสามารถเขียนเรียงความยาว ๆ เกี่ยวกับ HTML element ตัวเดียว ได้ ไม่แน่ใจว่านี่เรียกว่าความก้าวหน้าหรือเปล่า

  • เพิ่งรู้ว่าก่อน HTML5 เขาเรียกอันนี้ว่า definition list และเดิมที `` มีไว้เพื่อแสดง glossary ที่ประกอบด้วย term กับ definition เท่านั้น ผมเรียกชื่อมันผิดมาตั้ง 10 ปี

    • แล้วตอนนี้ b แปลว่า “bring attention to” งั้นเหรอ เอาจริงดิ
    • คุณไม่ได้เป็นคนเดียว ผมเพิ่งเห็นเรื่องนี้เป็นครั้งที่สองในสัปดาห์นี้ และตอนแรกนึกว่าเป็นการพิมพ์ผิด
    • เพิ่งรู้ว่า definition list ถูกเปลี่ยนชื่อแล้ว
    • ไม่อยากเช็กปีที่ HTML5 ถูกทำให้เป็นมาตรฐานเลย มีโอกาสสูงว่าจะเกิน 10 ปีแล้ว ;)

  • บทความดีมาก ขอจับผิดเล็กน้อยว่า element small ไม่ควรใช้กับ subtitle และควรใช้ element hgroup สำหรับจุดประสงค์นั้น element small ใช้แทนคอมเมนต์ประกอบ เช่น ตัวหนังสือเล็ก ๆ โดยปกติตัวหนังสือเล็กจะมี disclaimer, caveat, ข้อจำกัดทางกฎหมาย, ลิขสิทธิ์ บางครั้งก็ใช้เพื่อให้เป็นไปตามข้อกำหนดเรื่องการอ้างอิงแหล่งที่มาหรือใบอนุญาต (https://html.spec.whatwg.org/multipage/text-level-semantics....)

  • มีบันทึกที่มีประโยชน์เกี่ยวกับว่า screen reader รองรับ `` ดีแค่ไหน: https://adrianroselli.com/2025/01/updated-brief-note-on-desc...

  • พอเห็นตัวอย่างสุดท้ายของแผ่นค่าสถานะ DnD ก็เลยสงสัยว่าการ ซ้อน `` นั้นถูกต้องตามกฎหมายไหม เช่นทำแบบ Actions ... ได้ไหม?

  • ผมชอบ อย่างน้อยในอดีตดูเหมือน table จะถูกใช้ผิดเป็น บ่อยกว่า และความอึดอัดของ markup แบบ table ก็หนักกว่าการใช้ div หลายตัวอีก

    • ถ้าละ closing tag ที่ไม่จำเป็น มันก็ไม่ได้อึดอัดขนาดนั้น first second what ever ผมว่ามันง่ายและสะอาดกว่า ไวยากรณ์ตารางของ Markdown ไหน ๆ ด้วยซ้ำ
    • จริง แต่การบังคับให้ table ทำตัวเลียนแบบ `` ก็ยังถือว่าเป็นการใช้ table ผิดที่ดีกว่าหลายกรณีมาก
    • ผมมอง `` ว่าเหมือนหนึ่งแถวของ table มาตลอด