พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน figure Tag

ใน HTML5, แท็ก <figure> ถูกนำมาใช้เพื่อห่อหุ้มเนื้อหาที่เกี่ยวกับสื่อ เช่น รูปภาพ แผนภูมิ ตาราง หรือโค้ด เพื่อบอกว่าเนื้อหานั้นเป็นเนื้อหาที่สามารถมีคำบรรยายได้ (caption) ผ่านแท็ก <figcaption>

การใช้งาน <figure>

  • แท็ก <figure> ทำหน้าที่จัดกลุ่มเนื้อหาที่ไม่จำเป็นต้องเชื่อมโยงโดยตรงกับเนื้อหาหลักของเอกสารเสมอไป แต่ก็สามารถเข้าใจได้ด้วยตนเองหากถูกแยกออกไป เช่น ภาพประกอบหรือแผนภูมิ
  • แท็ก <figcaption> มักจะถูกใช้ภายใน <figure> เพื่อให้คำอธิบาย หรือคำบรรยายของเนื้อหานั้นๆ

ตัวอย่างการใช้งาน <figure> รูปแบบต่างๆ

รูปภาพพร้อมคำบรรยาย

HTML
<figure>
  <img src="path/to/image.jpg" alt="Nature scenery">
  <figcaption>ภาพทิวทัศน์ธรรมชาติ</figcaption>
</figure>

ในตัวอย่างนี้ <figure> ถูกใช้เพื่อครอบ <img> และมี <figcaption> ที่ให้คำบรรยายภาพ

ตารางข้อมูล

HTML
<figure>
  <table>
    <tr><th>หัวข้อ 1</th><th>หัวข้อ 2</th></tr>
    <tr><td>ข้อมูล 1</td><td>ข้อมูล 2</td></tr>
  </table>
  <figcaption>ตารางนี้แสดงข้อมูลตัวอย่าง</figcaption>
</figure>

ในตัวอย่างนี้ <figure> ใช้สำหรับตารางข้อมูลพร้อมคำอธิบายภายใต้ <figcaption>

โค้ดโปรแกรม

HTML
<figure>
  <pre><code>
  function example() {
    console.log("Hello, World!");
  }
  </code></pre>
  <figcaption>โค้ดตัวอย่างของฟังก์ชัน JavaScript</figcaption>
</figure>

ตัวอย่างนี้แสดงการใช้ <figure> กับโค้ดที่มีการบรรยายด้วย <figcaption>

วีดีโอ

HTML
<figure>
  <video controls>
    <source src="path/to/video.mp4" type="video/mp4">
    วิดีโอไม่รองรับเบราว์เซอร์ของคุณ
  </video>
  <figcaption>วิดีโอนำเสนอสินค้า</figcaption>
</figure>

ในกรณีนี้ เราใช้ <figure> เพื่อครอบวิดีโอและบรรยายวิดีโอด้วย <figcaption>

คุณสมบัติสำคัญของ <figure>

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

รูปแบบที่ประยุกต์ใช้งานได้

  • ใช้สำหรับการอ้างอิงกราฟหรือแผนภูมิประกอบเนื้อหา
  • ใช้เพื่อแสดงภาพประกอบพร้อมคำอธิบายใต้ภาพในบทความบล็อกหรือเว็บไซต์ข่าว
  • ใช้ในเอกสารเชิงวิชาการที่ต้องการแสดงรูปภาพหรือตารางพร้อมคำบรรยาย
Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ