Thẻ figure trong HTML

Ví dụ

Sử dụng phần tử <figure> để đánh dầu một bức ảnh trong tài liệu:

<figure>
 <img src="ducanhplus.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

---

Định nghĩa và cách dùng

Thẻ <figure> xác định nội dung khép kín (tự nó là đầy đủ), giống như illustrations, biểu đồ, ảnh, danh sách mã, vân vân…

Trong khi nội dung của phần tử <figure> là liên quan đến dòng chảy nội dung chính, thì vị trí của nó là độc lập với dòng chảy, và nếu loại bỏ nó phải không ảnh hưởng đến dòng chảy của tài liệu.

---

Trình duyệt hỗ trợ

Con số trong bảng chỉ phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ tính năng của thể.

Phần tử	Chrome	IE	FireFox	Safari	Opera
<figure>	6.0	9.0	4.0	5.0	11.1

---

Sự khác nhau giữa HTML 4.01 và HTML5

Thẻ <figure> là thẻ mới trong HTML5.

---

Các mẹo và lưu ý

Mẹo: Phần tử <figcaption> được sử dụng để thêm mô tả cho phần tử <figure>.

---

Thiết lập CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị phần tử <figure> với các giá trị mặc định sau:

Ví dụ:

figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}