Cách sử dụng phần tử HTML <figcaption>

Phần tử <figcaption> được dùng để thêm chú thích (caption) cho phần tử <figure>. Thường dùng để thêm chú thích cho hình ảnh.

Ví dụ code

<figure>
  <img src="duong-dan-anh.jpg" alt="Mô tả hình ảnh" />
  <figcaption>Chú thích cho bức ảnh</figcaption>
</figure>

Đặc điểm quan trọng

• <figcaption> phải là con trực tiếp (first hoặc last child) của <figure>.
• Một <figure> chỉ nên có một <figcaption>.
• Khác với alt (mô tả thay thế cho accessibility/SEO), <figcaption> hiển thị trực tiếp cho người dùng như chú thích hình ảnh.
• Có thể chứa các element inline khác: <a>, <strong>, <em>, <cite>.

Ví dụ mở rộng

<figure>
  <img src="bieu-do-doanh-thu.png" alt="Biểu đồ doanh thu quý 1-4 năm 2024" />
  <figcaption>
    <strong>Hình 1:</strong> Doanh thu theo quý năm 2024. 
    Nguồn: <a href="https://example.com/bao-cao">Báo cáo tài chính</a>.
  </figcaption>
</figure>

Tại sao nên dùng <figure> + <figcaption>?

• Semantic HTML: Cải thiện SEO, accessibility (screen reader đọc được mối quan hệ ảnh-chú thích).
• Styling dễ dàng: CSS target figure, figcaption riêng biệt.
• Grouping: Gom ảnh, biểu đồ, code snippet, bài thơ... kèm caption thành một đơn vị logic.