ก่อนที่จะพูดถึงเรื่องที่หลายๆ คน เข้าใจผิดเกี่ยวกับ figure element ผมขออธิบายก่อนว่า figure element คืออะไร และใช้งานยังไง
figure tag หรือ <figure> นั่นเอง ใช้สำหรับ mark up อะไรก็ได้ ที่มีความหมายในตัวของมันเอง ไม่ว่าจะเป็น รูปภาพ รูปวาด ไดอะแกรม หรืออื่นๆ โดยเราสามารถใส่คำอธิบายเพิ่มเติมให้กับ figure element นั้นๆ ได้ด้วย <figcaption> ดังตัวอย่างต่อไปนี้ครับ
1 2 3 4 | <figure> <img src="image.jpg" alt="This is an image." width="400" height="300" /> <figcaption>This is a caption.</figcaption> </figure> |
ต่อมา เรามาดูว่าเรื่องที่หลายๆ คน เข้าใจผิดเกี่ยวกับการใช้ <figure> มีอะไรบ้างครับ
- mark up ทุกๆ <img> ด้วย <figure>
- ใช้ <figure> กับโลโก้ของเว็บไซต์
- <figure> ต้องใช้กับรูปเสมอ
ดังนั้น ผมขอสรุปหลักการใช้ <figure> คร่าวๆ ดังนี้ครับ
- ดูว่าสิ่งนั้นมีความหมายในตัวของมันเองหรือไม่ ถ้าไม่มี จะไม่ใช้ <figure>
- ถ้ามี สิ่งนั้นมีความสัมพันธ์กับเนื้อหาหรือไม่ ถ้าไม่มี จะไม่ใช้ <figure>
- ถ้ามี สิ่งนั้น มีความสำคัญกับตัวเนื้อหามากน้อยแค่ไหน ถ้าไม่มาก ควรใช้ <aside> แทน
- ถ้ามีมาก ลำดับของสิ่งนั้นสำคัญหรือไม่ ถ้าสำคัญ ให้ใช้ <div> หรือ <img> แทน
- ถ้าไม่สำคัญ คือจะอยู่บน กลาง หรือล่าง ก็ได้ ให้ใช้ <figure>