เชื่อว่าหลายคนคงเคยเห็น <figure> ของ HTML ผ่านตามาบ้างแล้ว เช่นเดียวกันหลายคนก็อาจจะยัง งง กับการใช้งานของ tag <figure> และ <figcaption> อยู่ บางคนอาจจะคิดว่ามันสามารถใช้คู่กับ <img> เท่านั้น ซึ่งเป็นไอเดียที่ถูกไม่หมดสักทีเดียว
วันนี้ผมจะขอแลกเปลี่ยนสั้นๆ เล็กน้อยๆ ตามประสาอีกเช่นเคย ซึ่งจริงๆ แล้วที่ผมมาเขียทิ้งไว้ก็เพราะว่าผมกลัวตัวเองลืมมากกว่า (รวมไปถึงบทความที่เคยเขียนที่ผ่านๆ มาด้วย)
<figure> ตามหลักการของภาษา HTML แล้ว หมายถึง การแสดงให้เห็นเป็นภาพ ส่วน <figcaption> นั้น คือ การอธิภายสิ่งที่เป็นภาพนั้นเพิ่มเติม
เพราะฉะนั้น การใช้ <figure> ของ HTML จึงไม่จำเป็นต้องนำไปครอบ <img> เพียงอย่างเดียว เพราะสามารถนำไปใช้ได้กับอะไรก็ได้ที่อยากแสดงให้เห็นเป็นภาพ หรือมโนภาพ เฉกเช่นเดียวกับการหลับตานึก
ตัวอย่างการใช้ figure แบบต่างๆ
ใช้ figure ร่วมกับบทกลอน
<figure>
<p>โอ้ชีวิต ช่างรันทด หมดทางสู้<br>
แสนหดหู เดียวดาย ใต้ฟ้าคลั่ง<br>
หัวใจข้า นั่นหนา แทบจะพัง<br>
ร้อนรุ่มดั่ง นั่งอยู่ใน กลางใจเธอ</p>
<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 กับ อัลบั้มรูป
<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 ใช้ร่วมกับรูปภาพเท่านั้น เราสามารถใช้ร่วมกับอะไรก็ตามที่เราต้องการให้ เห็นเป็นภาพ
สำหรับวันนี้ผมก็ขอจบบทความก้อม เอาไว้แค่นี้ก่อน พบกันใหม่กับบทความก้อมๆ คราวหน้า
มีความสุขกับการใช้ชีวิตครับ
Leave a Reply