figure และ figcaption ใน html5

<figure>

figure ซึ่งส่วนใหญ่จะคิดว่าเป็นแทกที่บ่งบอกภาพของเนื้อหาในเพจนั้นๆ เพียงอย่างเดียว ที่จริงมันไม่ใช่อย่างนั้นครับ ถูก แต่ถูกไม่หมด figure ยังใช้บ่งบอกความหมายนอกเหนือจากภาพได้ครับ

figure นั้นจะแสดงเนื้อหาที่เกี่ยวข้องกับเนื้อหาหลัก เช่นรูปภาพประกอบเนื้อหา ซึ่งอาจจะวางตำแหน่งไว้ส่วนไหนของเพจก็ได้ 

ส่วนลำดับความสำคัญนั้น ให้เราดูว่าเมื่อนำข้อมูลใน figure ออกนั้น เนื้อหาหลักรวมๆ ของเพจนั้นก็ยังไมไ่ด้มีการเปลี่ยนแปลง หรือมีผลกระทบอะไรมากมาย เช่นนั้นเราก็สามารถใช้ figure ได้

figure นี้ใช้กับหลักๆ คือ

1. บ่งบอกภาพในเพจ
2. บ่งบอกโค๊ด โปรแกรมที่แสดงในเพจ
3. บ่งบอกคติ หรือวลีของบทกลอนต่างๆ
4. chart หรือ แผนผัง ไดอะแกรมต่างๆ

figcaptionนั้น ใช้อธิบายเพิ่มเติมเนื้อหาของ figure อีกทีนืงครับมีก็ได้ไม่มีก็ได้ ถ้ามีก็ ใส่ใน figure ได้เลยเช่น

<figure>
   <img src="images/box-img.png">
   <figcaption>ภาพแสดงรูปกล่อง</figcaption>
</figure>

หรือตัวอย่างนี้ใช้ figure กับกลอน
<figure>
   "คุณกำหนดคนที่จะเข้ามาในชีวิตคุณไม่ได้
แต่คุณเลือกตัดเขาออกไปจากชีวิตของคุณได้"
</figure>

หรือตัวอย่างนี้ใช้ figure กับ code คอมพิวเตอร์
<figure>
   $i = 10;
   $j = 20;
   echo $i+$j;
   <figcaption>ตัวอย่างการ echo ด้วยตัวแปรใน php</figcaption>
</figure>

ง่ายๆ นะครับ figure นั้น คืออะไรก็ได้  ที่เราบังคับเอากรอบใส่มันเป็นภาพ ไม่
ว่าจะเป็นตัวอักษร หรือโค๊ดโปรแกรม หรืออะไรก็ตาม
ให้คิดภาพว่า figure เป็นกรอบรูป แล้วเราเอากรอบรูปนี้ไปครอบกับอะำร
ก็ตาม สิ่งที่อยู่ในกรอบรูปจะกลายเป็นภาพทันที น่าจะพอเข้าใจได้บ้างแล้วนะครับ
และเมื่อเราครอบ figure หน้าที่ของสิ่งที่เราครอบจะกลาย
เป็นแค่ ภาพประกอบของบทความ หรือหน้าเพจก็เท่านั้น
เองครับ