HTML Figure และ Figcaption

เชื่อว่าหลายคนคงเคยเห็น <figure> ของ HTML ผ่านตามาบ้างแล้ว เช่นเดียวกันหลายคนก็อาจจะยัง งง กับการใช้งานของ tag <figure> และ <figcaption> อยู่ บางคนอาจจะคิดว่ามันสามารถใช้คู่กับ <img> เท่านั้น ซึ่งเป็นไอเดียที่ถูกไม่หมดสักทีเดียว

วันนี้ผมจะขอแลกเปลี่ยนสั้นๆ เล็กน้อยๆ ตามประสาอีกเช่นเคย ซึ่งจริงๆ แล้วที่ผมมาเขียทิ้งไว้ก็เพราะว่าผมกลัวตัวเองลืมมากกว่า (รวมไปถึงบทความที่เคยเขียนที่ผ่านๆ มาด้วย)

<figure> ตามหลักการของภาษา HTML แล้ว หมายถึง การแสดงให้เห็นเป็นภาพ ส่วน <figcaption> นั้น คือ การอธิภายสิ่งที่เป็นภาพนั้นเพิ่มเติม

เพราะฉะนั้น การใช้ <figure> ของ HTML จึงไม่จำเป็นต้องนำไปครอบ <img> เพียงอย่างเดียว เพราะสามารถนำไปใช้ได้กับอะไรก็ได้ที่อยากแสดงให้เห็นเป็นภาพ หรือมโนภาพ เฉกเช่นเดียวกับการหลับตานึก

ตัวอย่างการใช้ figure แบบต่างๆ

ใช้ figure ร่วมกับบทกลอน

ใช้ figure กับ Code computer

ใช้ figure กับ อัลบั้มรูป

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

สำหรับวันนี้ผมก็ขอจบบทความก้อม เอาไว้แค่นี้ก่อน พบกันใหม่กับบทความก้อมๆ คราวหน้า

มีความสุขกับการใช้ชีวิตครับ

Back to Top

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top