Thẻ HTML <figcaption>

Nguyen Lan Anh

Định nghĩa và cách sử dụng thẻ <figcaption>

Thẻ <figcaption> xác định phụ đề cho phần tử <figure>. Phần tử <figcaption> có thể được đặt làm phần tử con đầu tiên hoặc cuối cùng của phần tử <figure>.

Ví dụ sau sử dụng phần tử <figure> để đánh dấu ảnh trong tài liệu và phần tử <figcaption> để xác định chú thích cho ảnh:

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử.

Phần tử <figcaption>	Google Chrome	MS Edge	Firefox	Safari	Opera
Phần tử <figcaption>	8.0	9.0	4.0	5.1	11.0

Thuộc tính Global

Thẻ <figcaption> cũng hỗ trợ các thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <figcaption> cũng hỗ trợ thuộc tính sự kiện trong HTML.

Một số ví dụ khác

Sử dụng CSS để tạo kiểu cho <figure> và <figcaption>:

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}

figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure>

</body>
</html>