บล็อกโพสต์ที่มีองค์ประกอบ HTML ครบทุกตัว

 (patrickweaver.net)
5 คะแนน โดย GN⁺ 2023-08-14 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Patrick Weaver ซึ่งกำลังศึกษาเรื่องการเข้าถึงเว็บ ได้นำ แท็ก HTML มากกว่า 100 แท็ก ไปใช้จริงบนหน้าเว็บส่วนตัวที่สร้างด้วย Eleventy เพื่อทดลอง HTML เชิงความหมาย
  • เป้าหมายแรกคือไม่ให้การเขียนบทความในอนาคตติดขัดเพราะ CSS ขององค์ประกอบที่ไม่คุ้นเคย แต่การทำบทความเดียวนี้ให้เสร็จใช้เวลา หนึ่งปีครึ่ง
  • อ้างอิงจากรายการองค์ประกอบ HTML ของ MDN Web Docs แล้วทบทวนองค์ประกอบเชิงโครงสร้างอย่าง , , , , และ
  • องค์ประกอบที่ไม่ค่อยคุ้นเคยอย่าง , , , , และ เผยให้เห็น กรณีใช้งานเฉพาะ เช่น ทิศทางข้อความ การกำกับเสียงอ่าน เอาต์พุตของโปรแกรม การตัดบรรทัด ปฏิสัมพันธ์ และ Web Components
  • ระหว่างความหมายของ HTML กับการใช้งานจริงยังมี ร่องรอยของความเข้ากันได้ย้อนหลัง หลงเหลืออยู่ เช่น การรองรับของเบราว์เซอร์ การสร้างเว็บแบบสแตติก การเล่นวิดีโอใน Safari และพฤติกรรมของแท็กที่ deprecated แล้ว

จุดเริ่มต้นและเป้าหมายของการทดลอง

  • หลังจากเรียนรู้เรื่องการเข้าถึงเว็บมากขึ้น ก็เริ่มสำรวจ องค์ประกอบ HTML ที่ไม่ค่อยถูกใช้ และนำมาปรับใช้กับเว็บไซต์ส่วนตัว
  • เว็บไซต์สร้างด้วย Eleventy โดยห่อเนื้อหาบล็อกโพสต์ด้วย และเพิ่ม ใน layout template
  • ได้ปรับสไตล์ และ สำหรับ caption รูปภาพไว้แล้ว และสนใจการทำ footnote หรือ sidenote ที่เกี่ยวกับ Recurse ด้วย
  • ตัดสินใจลองใช้องค์ประกอบทั้งหมดในบทความเดียว โดยอ้างอิงจาก รายการองค์ประกอบ HTML ของ MDN Web Docs
    • เป้าหมายคือเพื่อไม่ให้ในอนาคตเวลาจะเขียนบทความแล้วต้องชะงักเพราะต้องอัปเดต CSS สำหรับองค์ประกอบที่ไม่เคยใช้มาก่อน
    • แต่ในความเป็นจริง การแก้สไตล์และ template เพื่อบทความเดียวนี้ใช้เวลา หนึ่งปีครึ่ง
  • แม้จะมีองค์ประกอบบางตัวอย่าง `` ที่ใส่โดยตรงในเนื้อหาบทความได้ยาก แต่เมื่อดูบน patrickweaver.net ก็จัดให้ทุกองค์ประกอบถูกใช้ที่ใดที่หนึ่งบนหน้าเว็บ

โครงสร้างเอกสารและองค์ประกอบ metadata

  • `` ไม่ต้องแก้ไขเพิ่มเติม แต่ทำให้เห็นว่ามักจำ แอตทริบิวต์ lang อย่าง lang="en" ไม่ได้เสมอไป
  • ก่อนเขียนบทความนี้ยังไม่คุ้นกับ `` และหลังจากนั้นจึงเพิ่มเข้าไปใน layout template พร้อมกับลิงก์แบบ relative
    • มีปัญหาบางอย่างกับการพัฒนาในเครื่องและลิงก์ relative แต่แก้ได้ง่าย
    • , , , และ `` เป็นองค์ประกอบที่คุ้นเคยอยู่แล้วและมีอยู่บนเว็บไซต์เดิม
  • ระหว่างอ่านเอกสารของ `` ได้เจอแอตทริบิวต์อย่าง onbeforeprint และ onblur
    • onbeforeprint เกี่ยวข้องกับฟังก์ชันที่เคยจัดการด้วยวิธีอ้อมกว่านี้
    • onblur ดูเหมือนจะใช้หลัก ๆ กับป๊อปอัปที่น่ารำคาญ

ส่วนเนื้อหาและลำดับชั้นหัวข้อ

  • เคยคิดว่า `` ใช้เฉพาะกับที่อยู่ไปรษณีย์ แต่พบว่าสามารถใช้กับอีเมลและลิงก์ได้ด้วย
  • template ของบล็อกโพสต์ใช้ `` อยู่แล้ว และหลังอ่านเอกสารก็พิจารณาว่าจะใช้กับทุกหน้าของเว็บไซต์ได้หรือไม่
  • ใช้ `` ในส่วน footnote
    • `` ใช้แสดงส่วนที่เกี่ยวข้องกับเนื้อหาหลักของเอกสารแบบอ้อม ๆ
    • เผื่อความเป็นไปได้ที่จะจัดสไตล์เป็น sidenote ในอนาคต
  • เดิมทีดีไซน์ของเว็บไซต์ไม่มี `` แต่เพิ่มเข้ามาในบทความนี้
  • เดิมใช้ `` เฉพาะด้านบนของหน้า แต่พบว่าสามารถใช้หลายตัวได้ จึงนำไปใช้กับส่วน header ของบล็อกโพสต์แต่ละบทความด้วย
  • จัดระเบียบลำดับชั้นหัวข้อไปพร้อมกัน
    • เดิมใช้ชื่อเว็บไซต์เป็น ชื่อ section เป็น และชื่อบทความเป็น ``
    • หลังอ่านเอกสารและคำแนะนำของ W3C จึงปรับให้เป้าหมายของ `` เปลี่ยนไปตามหน้า และจัดการสไตล์ด้วย class
    • มองว่าวิธีนี้สอดคล้องกับการแยกความรับผิดชอบระหว่าง HTML กับ CSS มากกว่า
  • หลังเริ่มทดลองต้นปี 2022 ก่อนเผยแพร่ในฤดูร้อนปี 2023 และ ถูกเพิ่มในเอกสาร MDN
    • ใช้รวมชื่อ section กับหัวข้อรอง
    • `` เป็นองค์ประกอบเชิงความหมายสำหรับช่องป้อนการค้นหา ไม่ใช่ผลการค้นหา
    • เนื่องจากเป็นเว็บที่สร้างแบบสแตติก ไม่มีการสร้างผลการค้นหาบนเซิร์ฟเวอร์ ตัวอย่างจึงต้องใช้ JavaScript
    • ณ ปี 2023 ไม่พบ `` ในการค้นหาส่วนหัวของ MDN หรือบน google.com
  • เป็นหนึ่งในความสงสัยแรก ๆ ที่ทำให้เริ่มสำรวจเรื่องนี้ และหลังอ่านรายการของ MDN ก็เพิ่ม ในเมนูด้านบน
  • ใส่ `` ในบทความด้วย แต่เมื่อเขียนโดยผสม Markdown กับ HTML การรักษาโครงสร้างซ้อนกันให้มองเห็นชัดทำได้ยาก จึงยังไม่แน่ใจว่าจะใช้บ่อยในที่อื่นหรือไม่

ข้อสังเกตจากองค์ประกอบเนื้อหาข้อความ

  • เคยใช้ `` กับการ embed ทวีต แต่ในบทความนี้เพิ่มสไตล์สำหรับข้อความอ้างอิงแบบแยกเดี่ยว
    • ก่อนอ่านเอกสารละเอียด ไม่รู้จักแอตทริบิวต์ cite ของ และองค์ประกอบ
  • , และ เป็นองค์ประกอบที่เพิ่งรู้จักทีหลัง และรู้สึกแปลกที่ ไม่ค่อยเป็นที่รู้จักเมื่อเทียบกับ และ
    • และ มี margin เริ่มต้น แต่ มี margin อยู่ที่
  • `` มีชื่อเสียงไม่ดีในเว็บสมัยใหม่เพราะถูกใช้มากเกินไป แต่ในเว็บไซต์นี้ตอนแรกใช้ค่อนข้างน้อย
    • เมื่อมีองค์ประกอบที่ต้องการจัดสไตล์ร่วมกัน จำนวนเพิ่มขึ้นเป็นราว 20 ตัว
    • แสดงให้เห็นว่าในเว็บไซต์ที่ไม่มี “section” ทั่วไปมากนัก `` จำนวนมากอาจไม่จำเป็น
  • และ เป็นองค์ประกอบแรก ๆ ที่เพิ่มเข้ามาตอนย้ายบทความจาก Medium เพื่อแสดง caption รูปภาพแบบมีความหมายเชิง semantics
    • ตามเอกสาร `` ใช้ได้ไม่ใช่แค่กับรูปภาพ แต่รวมถึงภาพประกอบ แผนภาพ และ code snippet ด้วย
    • มองว่ามี code block ปัจจุบันหลายจุดที่น่าจะใช้ `` ได้
  • หลังเห็นเอกสารที่นิยาม `` ว่าเป็นการแบ่งเชิงความหมาย ไม่ใช่เส้นแนวนอนทางสายตา จึงกลับมาดูสไตล์อีกครั้ง
    • ใส่อีโมจิใน hr:after แต่ต้องตรวจสอบว่า screen reader ทำงานอย่างไร
  • เป็นองค์ประกอบที่เพิ่งพบครั้งแรก และแปลกใจที่ยังอยู่มาถึง HTML5 ทั้งที่เบราว์เซอร์ปฏิบัติกับมันแทบเหมือน
  • เอกสารของ `` มีแนวทางน้อยกว่าที่คาด และทิ้งคำถามไว้ว่า ข้อความที่ไม่ใช่บทความยาว ๆ นั้น “เป็นย่อหน้าจริงหรือไม่”
  • เคยคิดว่า `` ใช้สำหรับ code block เท่านั้น แต่พบว่าสามารถใช้แสดง ช่องว่างที่มีความหมาย ได้ด้วย

องค์ประกอบความหมายของข้อความแบบ inline

  • เคยใช้ [link](#) เหมือน placeholder แต่จริง ๆ แล้วมันเป็นลิงก์ที่ เลื่อนไปด้านบนสุดของหน้า
  • เอกสาร MDN อธิบายว่า `` “มีไว้เพื่อความสะดวกของผู้เขียน” จึงดูเป็นแท็กที่มีโอกาสถูกใช้น้อยที่สุด
  • ความแตกต่างระหว่าง กับ ไม่ตรงกับความเข้าใจเดิมที่คิดว่าใน HTML5 มาแทน
    • ในฐานะกฎใช้งานจริง สรุปว่าจะใช้ กับระดับคำเป็นหลัก และใช้ กับประโยคหรือวลี
    • นี่เป็นหลักจำง่ายที่ทำให้ความแตกต่างจริงเรียบง่ายขึ้น
  • `` เป็นองค์ประกอบสำหรับจัดการข้อความที่อาจมีทิศทางต่างจากข้อความรอบข้าง
    • ตัวอย่างเป็นชื่อ แต่คิดว่านำไปใช้กับข้อความ Unicode จากผู้ใช้แบบ arbitrary input ได้ด้วย
    • ในอนาคตตั้งใจจะห่อแท็กที่อาจมีข้อมูลป้อนเข้าแบบ arbitrary ด้วย ``
  • `` อาจใช้น้อยเพราะไม่ค่อยทำงานกับภาษา RTL แต่การรู้วิธีจัดการข้อความ RTL ปริมาณเล็กน้อยก็มีประโยชน์
  • เคยมีช่วงที่ถูกใช้ผิดเหมือน `` ในอดีต แต่คิดว่าเมื่อ CSS ทรงพลังขึ้น โอกาสเป็นเช่นนั้นน่าจะลดลง
    • เนื่องจากตัวอย่างในเอกสารเป็นบทกวี จึงสงสัยว่าขอบเขตระหว่างย่อหน้ากับบรรทัดอิสระถูกพิจารณาอย่างไร
    • ในบางกรณี `` อาจเหมาะกว่า
  • และ แสดงความหมายที่ในหลายภาษาถูกสื่อด้วยเครื่องหมายวรรคตอนที่มองเห็นอยู่แล้ว ซ้ำอีกครั้งในฐานะองค์ประกอบความหมายของ HTML
    • สไตล์เริ่มต้นของ เป็นตัวเอียง และ เพิ่มเครื่องหมายคำพูดที่ไม่มีอยู่ในข้อความ
  • ถูกใช้จำนวนมากตลอดบทความ และสงสัยว่า Google Docs รองรับ Markdown โดยใช้ หรือไม่ แต่เมื่อดู HTML ของเอกสารพบว่า Google Docs ปัจจุบัน render เป็น ``
  • `` มีตัวอย่างใน MDN ที่ใส่ product ID เป็น value กับชื่อสินค้า ทำให้นึกกรณีใช้งานจริงได้ยาก
    • ถ้าเป็น ID ที่ควรให้ผู้ใช้เห็น ก็ควรแสดงออกมา และถ้าเป็น ID ที่ผู้ใช้ไม่ควรเห็น ก็ไม่ชัดว่าข้อมูลนี้มีไว้เพื่อใคร
    • ตรวจสอบแล้วว่า `` ไม่ปรากฏใน W3C HTML5 specification
  • `` เป็นองค์ประกอบที่ห่อ “คำศัพท์” ภายในนิยาม ไม่ใช่ตัวนิยามเอง จึงมองว่าชื่อแปลก
    • สรุปว่าดูเหมือนจะอยู่เฉพาะในข้อเสนอ HTML 2.0 ที่ไม่ได้ถูกนำมาใช้อย่างเป็นทางการ
  • และ ก็ทำให้ต้องคิดเรื่องเกณฑ์การใช้งานเช่นเดียวกับ และ
    • ในฐานะกฎใช้งานจริง สรุปว่าจะใช้ กับคำเป็นหลัก และใช้ กับประโยคหรือวลี
    • ตัวอย่างในเอกสารมักใช้ `` เพื่อดึงความสนใจไปยังข้อความที่อาจสับสนได้
  • `` ใช้ระบุคีย์บนคีย์บอร์ด แต่สงสัยว่าขอบเขตครอบคลุมการกระทำอย่าง “Right click” ด้วยหรือไม่
  • `` ดูเหมือนร่องรอยของเว็บที่เขียนร่วมกันสองทาง คล้ายผู้ใช้ขีดไฮไลต์ในหนังสือ
  • , และ `` ใช้ใน typography เอเชียตะวันออกเพื่อให้ข้อมูลเสียงอ่าน คำแปล หรือการถอดเสียง
    • `` ใช้ซ่อนวงเล็บที่มีอยู่ใน source
  • `` เป็นองค์ประกอบขีดฆ่าที่แสดงข้อความซึ่งเคยถูกต้อง แต่ปัจจุบันไม่ถูกต้องหรือไม่เกี่ยวข้องแล้ว
    • เคยถูก deprecated ใน HTML 4.01 แล้วถูกนิยามความหมายใหม่ใน HTML5
    • screen reader บางตัวไม่แจ้งการขีดฆ่า ซึ่งอาจทำให้สับสน จึงเพิ่ม CSS ที่ MDN แนะนำเข้าเว็บไซต์
  • ใช้แสดงเอาต์พุตของโปรแกรม และอัปเดตบทความ Raspberry Pi ที่เคยใช้ ให้เป็น ``
  • `` ใช้ render ข้อความขนาดเล็ก แต่คิดว่าส่วนใหญ่คงยังใช้ CSS ต่อไป
  • ระหว่างอ่านเอกสารของ เริ่มสงสัยเป็นครั้งแรกว่าทำไมจึงอนุญาตสไตล์ที่ขัดกันอย่าง หรือ ``
  • และ อาจเคยทำด้วย CSS มาก่อน แต่ในบทความนี้นำไปใช้กับ footnote และตัวอย่างสมการ
  • `` ดูมีประโยชน์สำหรับ HTML เชิงความหมาย จึงนำไปใช้กับวันที่ของบล็อกโพสต์
    • สังเกตว่าแม้ในผลการค้นหาของ Google ก็ดูเหมือนจะไม่ใช้ ``
  • `` เป็นองค์ประกอบที่ MDN แนะนำอย่างหนักแน่นว่า “ส่วนใหญ่แล้วคุณคงไม่อยากใช้จริง ๆ” และการแสดงคำสะกดผิดดูเป็นกรณีใช้งานหลักที่แนะนำ
  • แสดงสตริงตัวแปรทางคณิตศาสตร์หรือการเขียนโปรแกรมอย่างมีความหมาย และใช้ร่วมกับ ในตัวอย่างทฤษฎีบทพีทาโกรัส
  • `` แก้ปัญหาการตัดบรรทัดของคำยาว โดยเฉพาะ URL ที่จุดเฉพาะ
    • การใส่ break point ใน URL ยาวทำให้ตัดบรรทัดได้อ่านง่ายขึ้นตามความกว้างหน้าจอ
    • แม้ใส่อักขระ hyphen ใน URL เบราว์เซอร์สมัยใหม่ก็สร้าง break point ที่ชัดเจน
    • URL ที่ไม่มีการตัดบรรทัดถูกห่อด้วย `` ที่เลื่อนได้แยกต่างหากเพื่อไม่ให้ layout พัง

รูปภาพ มัลติมีเดีย และ embed

  • และ เป็นองค์ประกอบที่ไม่คุ้นเคย ทั้งที่เคยทำเว็บไซต์ประเภท image map มาก่อน
    • เครื่องมือ debug ขอบเขต `` ใช้งานยาก ซึ่งสะท้อนว่าปัจจุบันไม่ค่อยถูกใช้
    • ระหว่าง tab focus จะเห็นขอบเขตของ `` ได้ทีละอันเท่านั้น และการจัดสไตล์ไม่ทำงาน
    • มองว่า คล้าย ที่มีรูปทรง
  • `` เป็นแท็กมัลติมีเดียตัวแทนของ HTML5 จึงเคยใช้มาแล้ว แต่แปลกใจที่ในยุค 2020s เห็นบ่อยน้อยกว่าที่คาด
    • เครื่องเล่น Bandcamp มี UI เป็นชุด , และ แบบ custom แต่ใช้ ที่ซ่อนอยู่
  • ใน `` ได้สำรวจแอตทริบิวต์ srcset ใหม่
    • ทำ demo ที่ให้รูปภาพต่างกัน 3 รูปตามความกว้างหน้าจอ
    • cache ของเบราว์เซอร์และ scaled display มีผลต่อพฤติกรรม ดังนั้นหากต้องการเห็นผล อาจต้องใช้ private window และจอ non-scaled หรือ non-retina
  • และ ใช้แพร่หลายน้อยกว่า `` และวิดีโอออนไลน์ดูเหมือนถูกรวมศูนย์อยู่ที่ YouTube เป็นหลัก
    • ส่วนเสียงมีลักษณะกระจายศูนย์มากกว่า เช่น podcast ที่ให้ไฟล์แยก
  • `` มีข้อจำกัดบางอย่าง
    • เมื่อทำเป็น self-closing tag จะไม่ render
    • Safari ณ เวลาที่เขียนอาจไม่รองรับวิดีโอเพราะ development server ไม่รองรับ “Range” request header
    • สงสัยว่าเวอร์ชันที่โฮสต์บน GitHub Pages จะเล่นใน Safari ได้หรือไม่
    • ปัญหา `` เกิดจากการตั้งค่าไฟล์ .vtt ใน build ของ Eleventy ไม่ถูกต้อง
  • และ น่าแปลกที่ยังไม่ถูก deprecated ทั้งที่การใช้งานจำนวนมากถูกแทนที่ด้วยแท็กเฉพาะอย่าง และ
  • ยังมีชื่อแบบยุค 90s ว่า “inline frame” เหลืออยู่ และ ถูก deprecated ใน HTML5
    • ตรวจสอบด้วยว่า render ด้วย display: inline
  • และ เป็นองค์ประกอบที่ตั้งใจให้ใช้เปลี่ยนเวอร์ชันรูปภาพในสถานการณ์ต่างกัน
    • ทำตัวอย่างที่แสดงไอคอนคอมพิวเตอร์เมื่อใช้เมาส์/แทร็กแพด แสดงไอคอนโทรศัพท์เมื่อใช้หน้าจอสัมผัส และแสดง fallback image หากไม่ใช่ทั้งสองแบบ
  • `` ดูเป็นองค์ประกอบเชิงทดลองที่เกี่ยวข้องกับลิงก์พรีวิวสไตล์ iPad และประโยชน์ด้านประสิทธิภาพแบบ SPA
    • ณ ปี 2023 ไม่มีเบราว์เซอร์ใดเปิดใช้งานเป็นค่าเริ่มต้น
    • ดูเหมือนเคยมี flag ทดลองใน Chrome แต่ในปี 2023 ใช้ไม่ได้ใน chrome://flags
    • ดูเหมือนไม่อยู่ใน HTML 5 Spec และไม่แน่ใจว่าทำไมจึงอยู่ในเอกสาร MDN

SVG, MathML และ scripting

  • น่าสนใจที่เอกสาร MDN จัด และ ไว้ด้วยกัน
    • `` ใช้กันแพร่หลายเพราะสามารถ prototype และ export ได้ง่ายด้วยเครื่องมืออย่าง Figma และ Sketch
    • `` ดูเป็นองค์ประกอบที่พบได้ยากกว่า
  • ใช้ `` ในตัวอย่างการวาดวงกลมโดยตรง
  • มองว่า `` คล้าย wrapper สำหรับองค์ประกอบที่ไม่ใช่ HTML ใน namespace ของ MathML และใส่แค่สมการง่าย ๆ
  • เคยสำรวจปัญหาการวาดเส้นให้คมชัดอย่างลึกใน Recurse Center ปี 2020
    • จากเอกสาร MDN เพิ่งรู้ว่าแต่ละเบราว์เซอร์มีขนาดสูงสุดของ ``
    • เบราว์เซอร์สมัยใหม่แต่ละมิติมีขนาดราว 32,000 พิกเซล
    • นำ , และ มาทำ ปลอมขึ้นมาใหม่
  • ไม่ได้คาดว่า `` จะเป็นองค์ประกอบที่ให้ความรู้สึกเก่า แต่ระหว่างเขียนก็รู้ว่าจริง ๆ แล้วไม่ค่อยได้เขียนเองโดยตรง
    • JavaScript ส่วนใหญ่ถูก build tool รวมแล้วใส่เข้ามาเป็นแท็ก `` ตัวเดียว
    • ดังนั้น `` จึงรู้สึกเหมือน boilerplate มากกว่า markup tag
  • `` เป็นองค์ประกอบที่มองว่ายังใส่ไม่เพียงพอในเว็บไซต์แบบ interactive
    • โดยเฉพาะ SPA ที่ minified/compiled แล้ว หากไม่มี `` ผู้ใช้อาจเห็นหน้าเปล่า
    • ในบทความนี้ใส่ ควบคู่กับแท็ก ทุกตัว

เครื่องหมายแก้ไข ตาราง ฟอร์ม และปฏิสัมพันธ์

  • และ เป็นองค์ประกอบที่เพิ่งรู้จักครั้งแรกจากเอกสาร MDN และดูเหมือนองค์ประกอบที่น่าจะใช้ในโปรแกรมประมวลผลคำ
    • นึกถึงการ render ของ Google Docs ด้วย แต่ยืนยันว่า render เป็น `` เช่นกัน
  • `` เคยถูกใช้มากเกินไปเพื่อ layout ในยุคแรกของเว็บ แต่กลับมองว่าน่าขันที่ในเว็บยุคหลังซึ่งข้อมูลเพิ่มขึ้น กลับใช้ค่อนข้างน้อย
    • เหตุผลที่ยกมาคือดีไซน์เริ่มต้นที่ดูทื่อ และเป้าหมายของเว็บ UI ที่ต้องการนำเสนอข้อมูลในตารางฐานข้อมูลจากมุมมองอื่น
    • ตัวบทความเองเป็นเอกสาร จึงไม่มีข้อมูลตารางจริง แต่ใส่ตารางตัวอย่างเป็นข้อมูลอีโมจิที่น่าจะอิงจาก Apple emoji set ปี 2023
    • และ เป็นสิ่งที่ไม่เคยรู้มาก่อน และไม่แน่ใจว่าจะมีโอกาสใช้มากกว่าดีไซน์ custom ที่ไม่ใช่ `` หรือไม่
  • `` และองค์ประกอบที่เกี่ยวข้องมักเคยใช้ในกรณีที่ submit แล้วไปหน้าใหม่ แต่ก็ใช้กับปฏิสัมพันธ์ของผู้ใช้ภายในหน้าได้เช่นกัน
    • มองว่าในแง่การเข้าถึง องค์ประกอบฟอร์มอาจสำคัญที่สุด และตั้งใจจะอ้างอิงเอกสารเมื่อ implement ต่อไป
  • และ เป็นตัวอย่างที่พบบ่อยของสิ่งที่ “ทำได้แม้ไม่มี JavaScript”
    • UI แบบพับ/ขยายนี้เป็นฟังก์ชันที่เคยทำครั้งแรกด้วย JavaScript หรือ jQuery และน่าสนใจที่ตอนนี้ทำได้ง่ายด้วยแท็ก HTML ไม่กี่ตัว
    • คาดเดาว่าถูกเสนอเข้า HTML spec ในปัจจุบัน อาจถูกแทนด้วยเอฟเฟกต์คล้าย CSS แล้วถูกถอนข้อเสนอไปก็ได้
  • `` เป็นองค์ประกอบที่ไม่รู้มาก่อนว่ามีอยู่ด้วย HTML เพียงอย่างเดียว
    • หากต้องการให้มีประโยชน์มากกว่าเอฟเฟกต์ด้านสไตล์ ยังต้องใช้ JavaScript
    • เป็นวิธีเรียบง่ายที่สร้างปฏิสัมพันธ์ custom กว่า alert() และยังจัดสไตล์ด้วย CSS ได้

Web Components และองค์ประกอบที่ deprecated แล้ว

  • Web Components อยู่ในรายการสิ่งที่ควรเรียนรู้เพิ่มเติมมานานแล้ว จึงดีใจที่ได้อ่าน section นี้ของ MDN
  • เป็นเรื่องเหนือความคาดหมายที่การ render Web Components ต้องใช้ JavaScript และ syntax Class
    • หลังอ่านเพิ่มเติมเกี่ยวกับ Shadow DOM ก็เข้าใจได้ เพราะ HTML ไม่มีวิธี encapsulate สไตล์ในตัว
    • ในเชิงแนวคิดมองว่าค่อนข้างคล้ายกับ ``
  • ใช้ Web Components กับ และ เพื่อทำสารบัญของบทความ
    • หาวิธีส่ง property ที่จะใช้เป็นแอตทริบิวต์ขององค์ประกอบ template ลูกแบบคอมโพเนนต์ frontend framework ไม่เจออย่างรวดเร็ว
    • จึงส่งองค์ประกอบ `` ทั้งหมดให้ลูกแต่ละตัว แล้วตั้งค่า href ที่ถูกต้องภายใน `
  • `
  • ใส่องค์ประกอบ HTML ที่ deprecated แล้วไว้ท้ายบทความด้วย
    • , , , และ `` เป็นตัวอย่างของฟีเจอร์ด้าน layout ที่ย้ายไปอยู่ใน CSS
    • และ เคยเป็นส่วนหนึ่งของ spec Web Components แต่ไม่ได้ implement สมบูรณ์ จึงทำจริงไม่ได้
    • ดูเหมือน แบบเว็บเซิร์ฟเวอร์สำหรับแสดงรายการไดเรกทอรี และใช้ในตัวอย่างรายการไดเรกทอรีของเว็บสแตติก Eleventy
  • และ ถูกออกแบบให้ใช้แทน จึงใส่โดยตรงในเนื้อหาทั่วไปได้ยาก และใช้เฉพาะภายใน
  • จากคำอธิบายของ MDN ที่ว่า `` ไม่เคยเป็นส่วนหนึ่งของ specification อย่างเป็นทางการ จึงคาดว่าจะไม่ทำงาน แต่ในปี 2023 ดูเหมือนจะทำงานในบางเบราว์เซอร์
    • มองว่านี่อาจเป็น fallback สำหรับกรณีที่สับสนกับ ``
  • `` ระบุว่ารองรับบางส่วนใน Firefox 8~84 แต่แม้ในเวอร์ชันเก่าที่ติดตั้งในเครื่องก็ทำให้ตัวอย่างทำงานไม่ได้
  • คล้าย fallback อย่าง แต่ถูก deprecated ขณะที่ `` ยังอยู่ใน spec จึงน่าแปลกใจ
  • ไม่ชัดเจนว่าทำไม จึงเป็นองค์ประกอบแยกต่างหากแทนที่จะเป็นแอตทริบิวต์
    • ตอนเริ่มบทความ มันอยู่ใน section “Embedding Content” ของ MDN แต่ตอนเขียนเสร็จถูก deprecated แล้ว
  • `` โดดเด่นตรงที่ยังทำงานจริงในบรรดาองค์ประกอบ deprecated
    • หากใช้ตรง ๆ หน้าถัดไปจะถูก render เป็น source code จึงห่อด้วย ``
  • และ มีแท็กปิด จึงใช้ในเนื้อหาเพื่อแสดง source code หรือข้อความ monospace แบบ teletype ได้
  • และ เคยใช้สำหรับแสดงเสียงอ่านของอักษรเอเชียตะวันออก แต่สรุปว่า spec ดูเหมือนจะถูกทำให้ง่ายลง
  • เพิ่ม `` ที่ไม่อยู่ในรายการ MDN หลังตรวจสอบรายการแท็ก HTML อื่น ๆ
  • รายการเก่าของ MDN ปี 2013 มีองค์ประกอบอย่าง , , และ
    • `` ปัจจุบันถูกเบราว์เซอร์ส่วนใหญ่เพิกเฉยด้วยเหตุผลด้านการเข้าถึง
    • `` ไม่ทำงานในเบราว์เซอร์สมัยใหม่ และเป็นฟังก์ชันที่ควรจัดการด้วย CSS
    • `` บ่งบอกวิสัยทัศน์ของเอกสารเว็บที่มีความเป็นมัลติมีเดียมากขึ้น
    • `` ดูเหมือนเป็นองค์ประกอบจากโลกที่ไม่มี JavaScript
  • กล่าวถึง `` ด้วย แต่ไม่ได้ลองใช้
  • ภายหลังพบว่าไม่มี implementation ของ footnote แบบ native ใน HTML

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

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

 
GN⁺ 2023-08-14
ความคิดเห็นบน Hacker News

  • ดูเหมือนผู้เขียนจะเด็กเกินกว่าจะจำ เฟรม (frames) ได้ :) ผมตั้งใจจะแปะลิงก์บทความวิกิพีเดีย (https://en.wikipedia.org/wiki/Frame_(World_Wide_Web)) อย่างเดียว แต่คำอธิบายก็ไม่ได้ดีนัก ตอนเว็บยุคแรกเริ่มแพร่หลาย เฟรมถูกใช้บ่อยกับเมนู แถบด้านข้าง เฮดเดอร์ที่มองเห็นตลอดเวลา ฯลฯ มักจัดวางแบบมีเฮดเดอร์คงที่ด้านบน แถบด้านข้างทางซ้าย และเฟรมเนื้อหาอยู่ตรงกลาง แต่ละเฟรมทำงานค่อนข้างเป็นอิสระ เช่น มีประวัติย้อนกลับ/ไปข้างหน้าของตัวเอง และลิงก์โดยค่าเริ่มต้นก็อาจเปลี่ยนเฉพาะเฟรมนั้น ดังนั้นการย้อนกลับ ไปข้างหน้า และรีเฟรชจึงไม่เป็นไปตามสัญชาตญาณ และถ้าเนื้อหาผิดถูกโหลดเข้าไปในเฟรมหนึ่ง การกู้คืนก็ค่อนข้างยุ่งยาก นอกจากต้องเข้าใหม่ตั้งแต่ต้น โชคดีที่ CSS เข้ามาแทนที่กรณีใช้งานหลัก ๆ ของเฟรมได้เกือบหมด และจากมุมมองผู้ใช้ เฟรมนั้นใช้งานทรมานจริง ๆ

    • หนึ่งในกรณีใช้งานเฟรมที่จำได้คือ ไซต์ดัชนี ของเว็บไซต์อื่น ๆ โครงสร้างคือมีลิงก์หลายรายการในแถบด้านข้างซ้าย และเปิดเว็บไซต์นั้นในเฟรมด้านขวา ในยุคที่เบราว์เซอร์ยังไม่มีแท็บ มันเป็นการใช้งานที่ค่อนข้างดี และการไล่ดูรายการลิงก์ในเฟรมภายในหน้าต่างเดียวก็ดีกว่าการสลับไปมาด้วยประวัติหรือจัดการหลายหน้าต่าง
    • Eric Meyer ราชาแห่ง CSS ก็ยังคงเอกสารอ้างอิง CSS เก่าไว้เป็นหน้าเฟรมอยู่: https://meyerweb.com/eric/css/references/css1ref.html
    • เว็บไซต์แรกที่ทำบน GeoCities ในยุค 90 ก็ใช้ frameset และเป็นเลย์เอาต์ตามที่กล่าวไว้ด้านบนพอดี
    • https://tintara.tripod.com/FramesSuck.html
    • และ ตอนนี้ไม่ใช่แค่ ไม่แนะนำให้ใช้ แต่เป็น องค์ประกอบที่ถูกยกเลิก มานานแล้ว: https://html.spec.whatwg.org/dev/obsolete.html#obsolete

  • แม้จะมีพูดถึงสั้น ๆ แต่ก็ยังรู้สึกไร้เหตุผลที่จนถึงตอนนี้ยังไม่มี declaration มาตรฐานของ CSS แบบง่าย ๆ สำหรับซ่อนจากหน้าจอ แต่ยังคงไว้สำหรับ screen reader สิ่งที่เห็นมาจนถึงตอนนี้ยังคงเป็นการใช้ clip หรือย้ายเนื้อหาออกนอกหน้า หรือทริกคล้าย ๆ กันเท่านั้น ไม่เข้าใจว่าทำไมสิ่งนี้ถึงไม่เป็นค่าทดแทนของ display หรือเป็นพร็อพเพอร์ตีเพิ่มเติม พร็อพเพอร์ตี speak ที่แก้เรื่องนี้ได้เคยลอยอยู่ในหนึ่งในโมดูล CSS เชิงทฤษฎี แต่เท่าที่รู้แทบไม่มี implementation รับไปใช้เลย

    • สำหรับจุดประสงค์นั้นใช้ แอตทริบิวต์ ARIA ได้ https://developer.mozilla.org/en-US/docs/Web/Accessibility/A... โค้ดตัวอย่าง: https://stackoverflow.com/questions/26032089/in-html-how-can...
    • ผมรู้สึกว่าสิ่งนี้ควรอยู่ฝั่ง HTML ที่ดูแลข้อมูล โครงสร้าง และความหมาย มากกว่า CSS ที่ดูแลการแสดงผลทางสายตา สงสัยเหมือนกันว่าอาจจัดการแบบคล้ายกันได้ด้วยอักขระเว้นวรรคที่มี aria-label เหมาะสมหรือไม่

  • ถ้าพูดถึงองค์ประกอบ ที่ผู้เขียนสับสนอยู่ **HTML 5.2** ถูก W3C ยกเลิกในปี 2021 และแทนที่ด้วย WhatWG HTML Living Standard แล้ว มาตรฐาน WhatWG ไม่ได้ยกเลิก ต่างจาก HTML 5.2 และนิยามใหม่ว่าเป็น “แถบเครื่องมือในรูปแบบรายการแบบไม่มีลำดับขององค์ประกอบ li ที่แสดงคำสั่งซึ่งผู้ใช้สามารถดำเนินการหรือเปิดใช้งานได้” รายการองค์ประกอบและข้อมูลเวอร์ชัน HTML ในวิกิพีเดียน่าจะล้าสมัยตรงนี้ และ ยังมีชีวิตอยู่ อย่างไรก็ตาม เมื่อดูประวัติที่เคยถูกทำเครื่องหมายว่าไม่แนะนำให้ใช้หลายครั้ง และเบราว์เซอร์รุ่นใหม่ ๆ ก็ยังสับสนกับการให้ความหมายที่ถูกต้อง แทบทุกกรณีใช้ พร้อมบทบาท ARIA ที่เหมาะสม (toolbar, menu, menubar) จะดีกว่า

  • เหตุผลที่องค์ประกอบส่วนใหญ่เหล่านี้ไม่ได้ถูกใช้แพร่หลาย คือมันเป็นความพยายามเก่า ๆ เพื่อแก้ปัญหาที่ไม่มีอยู่อีกแล้ว หรืออย่างที่ผู้เขียนเองก็ยอมรับว่า CSS แก้ได้ดีกว่า หรือไม่ก็พึ่งพาการ implement ของเบราว์เซอร์อย่างมาก ตัวอย่างเช่น ตอนที่ และ เข้ามาในเบราว์เซอร์ที่อัปเดตต่อเนื่องทุกตัว ผมคาดหวังไว้มาก แต่ถ้าต้องการให้เปิดแบบเลื่อนอย่างนำทางผู้ใช้ แทนที่จะโผล่เนื้อหาออกมาทันที ก็ยังต้องใช้ JavaScript อยู่ดี implementation ที่ดีที่สุดที่ผมเคยเห็นใช้ WAAPI และ Safari ถึงกับเพิ่ม pseudo-element เฉพาะของตัวเองเข้ามา

    • แอนิเมชันแบบสไลด์ ทำได้แม้ไม่ใช้ JavaScript ก็จริง แต่ตอนปิดดูไม่ค่อยสวย ส่วนตอนเปิดถือว่าโอเค: https://codepen.io/dada1smo/pen/LYydWBg ไม่ใช่โค้ดของผมเอง เจอมาจากคอมเมนต์ในลิงก์ css-tricks
    • เมื่อก่อนเป็นแท็กจัดรูปแบบ แต่ใน HTML5 กลายเป็นแท็กสำหรับ **ข้อความตัวเล็กเชิงหมายเหตุ (fine print)** แล้ว[1] แท็กที่เป็นการจัดรูปแบบล้วน ๆ อย่าง ถูกทำเครื่องหมายว่าไม่แนะนำให้ใช้และหายไปนานแล้ว [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

  • แท็ก / สามารถซ้อนกันได้ ครั้งหนึ่งผมเคยใช้สิ่งนี้ทำ เกมผจญภัยแบบเลือกเส้นทาง แล้วเอาไปลงในอินทราเน็ตของบริษัท มีสคริปต์สร้างที่ต่อชิ้นส่วนเข้าด้วยกัน และตัวข้อความจริง ๆ มีแค่ไม่กี่หน้า แต่ HTML กลายเป็น 5MB วันนั้นทำเบราว์เซอร์พังไปหลายตัว และสุดท้ายต้องลบทิ้ง

    • น่าสนใจแต่ยังไม่ค่อยเข้าใจ อยากฟังเพิ่มว่าการซ้อน details/summary นำไปสู่ HTML 5MB ได้อย่างไร และมันทำให้เบราว์เซอร์หลายตัวพังได้อย่างไร

  • นึกถึงตอนเริ่มเรียน HTML ราวปี 1995 มีใครจำ Barebones Guide to HTML ของ Kevin Werbach ได้ไหม? โดยพื้นฐานแล้วมันเป็นไซต์ที่ไล่รายการแท็ก HTML ทั้งหมดและหน้าที่ของมัน แค่มีเอกสารนั้น โปรแกรมแก้ไขข้อความ และ Netscape Navigator รุ่นแรก ๆ ก็เรียนและลองทำได้ทันที

  • ไม่กี่วันก่อนตอนพยายามสร้าง AI agent สำหรับท่องเว็บ ผมตกใจที่เห็นว่าคอมเมนต์ของ Hacker News ถูก implement เป็นตารางซ้อนอยู่ในตารางซ้อนอยู่ในตารางอีกที

    • พอรู้แบบนั้นกลับดีใจเสียอีก ผมทำ userContent.css เพื่อให้อ่าน HN ได้ง่ายขึ้น โดยจำกัดความกว้างของเนื้อหา ตั้ง line-height เป็น 1.5em และเพิ่มระยะห่างด้านบนให้ทุกย่อหน้า ตอนนี้ไม่ต้องทนอ่าน HN ที่แสดง 250 ตัวอักษรต่อบรรทัดในเบราว์เซอร์จอกว้างแล้ว แต่ละย่อหน้าอ่านง่ายขึ้น และการแบ่งย่อหน้าก็ดูชัดเจนกว่าระยะห่างบรรทัด

  • HTML เชิงความหมาย (semantic HTML) มีศักยภาพมาก ส่วนตัวผมชอบสไตล์ที่วางเชิงอรรถของเนื้อหาไว้ในระยะขอบด้านขวาด้วยฟอนต์ที่เล็กลงหรือกึ่งโปร่งใส และถ้าจำเป็นก็ใส่องค์ประกอบเปิด/พับ / ประกอบ แต่ดูเหมือนว่าถ้าจะ implement สไตล์แบบนี้จริง ๆ ทุกครั้งต้องรู้ CSS ค่อนข้างละเอียดถึงจะทำงานได้ถูกต้อง

  • ก่อนอื่น นี่เป็นวิธีเรียนรู้ที่ยอดเยี่ยมจริง ๆ และเป็นการฝึกที่ดี การได้เห็นผู้เขียนคาดเดาการใช้งานขององค์ประกอบเก่า ๆ ที่เคยทำให้ตื่นเต้นเพราะอยู่ ๆ ก็ใช้ได้ แต่ตอนนี้ไม่ใช้กันแล้ว ก็สนุกดี อย่างไรก็ตาม ในฐานะคนที่เขียน HTML ด้วยมือตั้งแต่ทุกเวอร์ชันหลัง Mosaic ผมไม่ค่อยชอบที่ MDN เปลี่ยนชื่อย้อนหลัง อย่าง description list เท่าไร ชอบชื่อในสเปกดั้งเดิมว่า definition list มากกว่า สำหรับผม การคิดถึง dl, dt, dd ว่าเป็น “รายการคำนิยาม”, “คำที่ถูกนิยาม”, “คำนิยาม” ดูเป็นธรรมชาติกว่า ถึง description จะเป็นคำที่กว้างกว่า definition ก็จริง แต่ถ้ามองว่าเป็น definition list ก็จะจำได้ง่ายว่าใน dl มีคำศัพท์ (dt) และคำนิยาม (dd) W3 ก็เรียกว่า definition list: https://www.w3.org/TR/html4/struct/lists.html#edef-DL

  • เคยเห็นกรณีในโลกจริงที่ ไปถึง `` ไหม?

    • เคย งานสายเทคนิคงานแรกของผมคือเอเจนซีการตลาดระดับท้องถิ่นมาก ๆ และใช้เวลาส่วนใหญ่ไปกับการอัปเดตเมนูร้านอาหารและข้อมูลการขายของร้านเล็ก ๆ ในพื้นที่ เมนูร้านอาหารมักมีลำดับชั้นลึกจนน่าขำ เพราะร้านอาหารจำนวนมากทำเมนูไว้เยอะเกินไป บางครั้งถ้าจะนำเสนอ mozzarella sticks กับ arancini ให้ถูกต้อง ก็ต้องมีลำดับชั้นประมาณ Restaurant -> Menu -> Antipasti -> For Groups -> Fried -> Cheesy
    • เคย ในสเปกหรือเอกสารเทคนิคอื่น ๆ ก็มีให้เห็น เช่น สเปก HTML[1] เองก็เป็นแบบนั้น [1]: https://html.spec.whatwg.org/#link-type-next
    • เป็นหนึ่งในเรื่องที่น่าหงุดหงิด ไม่รู้ว่าทำไมต้องจำกัดไว้ที่ 1~6 และไม่ยอมให้มีแอตทริบิวต์สำหรับกำหนดขนาดตามใจชอบ
    • ผมเคยทำเว็บเวอร์ชันของหนังสือเล่มมหึมาที่อดีตอาจารย์และเจ้านายเขียนไว้ ซึ่งแน่นอนว่าใช้หัวข้อ 6 ระดับ และอาจต้องการมากกว่านั้นด้วย