HTML5 Figure และ Figcaption

หน้าแรก HTML5 HTML5 Figure และ Figcaption

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

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

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

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

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

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

Code

<figure>
โอ้ชีวิต ช่างรันทด หมดทางสู้ 
แสนหดหู เดียวดาย ใต้ฟ้าคลั่ง 
หัวใจข้า นั่นหนา แทบจะพัง 
ร้อนรุ่มดั่ง นั่งอยู่ใน กลางใจเธอ
<figcaption><cite>รำพันชีวิต</cite> พร อันทะ, 2012</figcaption>
</figure>
ใช้ figure กับ Code computer

<figure id="ex-2" title="ตัวอย่างที่" 2="">
<figcaption>การเขียน css เพื่อ clear หลังจาก float</figcaption>
<pre><code> .clear:after {
content: ;
display: block;
clear: both;
}
</code></pre>
</figure>

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

Code

<figure>
<figcaption>เรื่องราวธรรมชาติช้างบ้าน</figcaption>
<figure>
<img src="butterfly-on-flower.jpg" alt="ผีสื้อสีดำ, กระพือปีก, บนดอกไม้">
<figcaption>ออกล่าแข็งขันตามประสาสัตว์สวยงาม</figcaption>
</figure>
<figure>
<img src="cat.jpg" alt="แมวสีขาว, นั่งหลับตา">
<figcaption>เจ้าแมวน้อยผู้หิวโหย</figcaption>
</figure>
<figure>
<img src="tree.jpg" alt="กิ่งไม้มีหนาม">
<figcaption>บางครั้งธรรมชาติก็สร้างให้สิ่งมีชีวิตป้องกันตัวเอง</figcaption>
</figure>
<figure>
<img src="butterfly.jpg" alt="ผีเสื้อกางปีก, บนดอกไม้สีชมพู">
<figcaption>โผบินต่ำ เน้นสวยงาม</figcaption>
</figure>
</figure>

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

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

มีความสุขกับการใช้ชีวิตครับ
</figure></figcaption></figure></figcaption></figure></figure>

ขึ้นไปด้านบน