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

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

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

โครงสร้างพื้นฐานของ <figure> และ <figcaption>

HTML
<figure>
  <img src="image.jpg" alt="A beautiful scenery">
  <figcaption>This is a beautiful scenery of a sunset.</figcaption>
</figure>
  • <figure> เป็นตัวครอบองค์ประกอบหลัก เช่น รูปภาพ
  • <figcaption> เป็นส่วนที่ให้คำอธิบายเกี่ยวกับรูปภาพ

การใช้งาน <figcaption> ในรูปแบบต่างๆ

การใส่ <figcaption> ไว้ใน <figure> หลังเนื้อหา

HTML
<figure>
  <img src="landscape.jpg" alt="Mountain landscape">
  <figcaption>Mountain landscape at dawn</figcaption>
</figure>
  • คำอธิบายจะปรากฏหลังจากรูปภาพ
  • เป็นรูปแบบที่ใช้บ่อยที่สุด

การใส่ <figcaption> ไว้ก่อนเนื้อหา

HTML
<figure>
  <figcaption>A serene river flowing through the forest</figcaption>
  <img src="river.jpg" alt="River flowing through forest">
</figure>
  • คำอธิบายจะปรากฏก่อนรูปภาพ

การใช้งานร่วมกับเนื้อหาอื่นๆ เช่น วิดีโอ

HTML
<figure>
  <video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <figcaption>A short video about nature</figcaption>
</figure>
  • สามารถใช้ <figure> และ <figcaption> กับวิดีโอได้เช่นกัน โดยทำหน้าที่เป็นคำบรรยายวิดีโอ

การใช้งานกับแผนภูมิหรือกราฟ

HTML
<figure>
  <img src="chart.png" alt="Sales growth over the last five years">
  <figcaption>Figure 1: Sales growth from 2019 to 2024</figcaption>
</figure>
  • <figure> สามารถใช้สำหรับแผนภูมิ และ <figcaption> จะทำหน้าที่บรรยายเพิ่มเติมเกี่ยวกับข้อมูลในแผนภูมิ

การใส่เนื้อหาหลายอย่างใน <figure>

HTML
<figure>
  <img src="image1.jpg" alt="A cityscape at night">
  <img src="image2.jpg" alt="A cityscape during the day">
  <figcaption>Comparison of the cityscape at night and during the day</figcaption>
</figure>
  • <figure> สามารถครอบคลุมเนื้อหาหลายรูปหรือเนื้อหาได้หลายประเภท โดยมีคำอธิบายรวมกันใน <figcaption>

ประโยชน์ของ <figcaption>

  • ช่วยเพิ่มความชัดเจนในการแสดงเนื้อหา โดยเฉพาะรูปภาพและวิดีโอที่ต้องการคำอธิบาย
  • ทำให้หน้าเว็บสามารถเข้าถึงได้ง่ายขึ้น (accessibility) สำหรับผู้ที่ใช้อุปกรณ์ช่วยเหลือ เช่น screen readers
  • ช่วยให้โครงสร้างข้อมูลมีความสัมพันธ์กันมากขึ้น ทำให้ SEO ของหน้าเว็บดีขึ้น

ตัวอย่างการใช้งานร่วมกับ CSS

เราสามารถปรับแต่งการแสดงผลของ <figcaption> ด้วย CSS ได้

HTML
<figure>
  <img src="nature.jpg" alt="A beautiful nature scenery">
  <figcaption class="caption">This is a beautiful nature scenery</figcaption>
</figure>

<style>
  .caption {
    font-style: italic;
    text-align: center;
    color: #555;
  }
</style>

ในตัวอย่างนี้ <figcaption> ถูกจัดแต่งให้มีรูปแบบเอียง (italic) และจัดกลาง (centered)

Tags
แชร์เรื่องนี้

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