HTML Figure และ Figcaption

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

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

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

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

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

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

<figure id=”ex-2” title=”ตัวอย่างที่ 2”>
    <figcaption>การเขียน css เพื่อ clear หลังจาก float</figcaption>
    <pre><code>	.clear:after { 
            content: ‘ ‘; 
            display: block; 
            clear: both;
    	}
    </code></pre>
</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 ใช้ร่วมกับรูปภาพเท่านั้น เราสามารถใช้ร่วมกับอะไรก็ตามที่เราต้องการให้ เห็นเป็นภาพ

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

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