ความเข้าใจผิดเกี่ยวกับ figure element

ก่อนที่จะพูดถึงเรื่องที่หลายๆ คน เข้าใจผิดเกี่ยวกับ figure element ผมขออธิบายก่อนว่า figure element คืออะไร และใช้งานยังไง

figure tag หรือ <figure> นั่นเอง ใช้สำหรับ mark up อะไรก็ได้ ที่มีความหมายในตัวของมันเอง ไม่ว่าจะเป็น รูปภาพ รูปวาด ไดอะแกรม หรืออื่นๆ โดยเราสามารถใส่คำอธิบายเพิ่มเติมให้กับ figure element นั้นๆ ได้ด้วย <figcaption> ดังตัวอย่างต่อไปนี้ครับ

ต่อมา เรามาดูว่าเรื่องที่หลายๆ คน เข้าใจผิดเกี่ยวกับการใช้ <figure> มีอะไรบ้างครับ

  • mark up ทุกๆ <img> ด้วย <figure>
  • ใช้ <figure> กับโลโก้ของเว็บไซต์
  • <figure> ต้องใช้กับรูปเสมอ

ดังนั้น ผมขอสรุปหลักการใช้ <figure> คร่าวๆ ดังนี้ครับ

  • ดูว่าสิ่งนั้นมีความหมายในตัวของมันเองหรือไม่ ถ้าไม่มี จะไม่ใช้ <figure>
  • ถ้ามี สิ่งนั้นมีความสัมพันธ์กับเนื้อหาหรือไม่ ถ้าไม่มี จะไม่ใช้ <figure>
  • ถ้ามี สิ่งนั้น มีความสำคัญกับตัวเนื้อหามากน้อยแค่ไหน ถ้าไม่มาก ควรใช้ <aside> แทน
  • ถ้ามีมาก ลำดับของสิ่งนั้นสำคัญหรือไม่ ถ้าสำคัญ ให้ใช้ <div> หรือ <img> แทน
  • ถ้าไม่สำคัญ คือจะอยู่บน กลาง หรือล่าง ก็ได้ ให้ใช้ <figure>
(Visited 1,245 times, 1 visits today)

Leave a Reply