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;
}
Comments are closed.