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;
}
Cho mình hỏi một tí, mình có xem 1 video trên youtube dạy web, thấy họ vừa hiển thị 1 trình soạn thảo web (hình như là DW) trên 1 cửa sổ và bên cạnh lại có một cửa sổ hiển thị trình duyệt web, họ sửa code bên cửa sổ trình soạn thảo thì thấy ngay kết quả của trang web bên cửa sổ trình duyệt rất là tiện lợi mà mình không biết cách nào làm hết, vậy nhờ Nguyễn Đức Anh chỉ giáo cho vài đường về cách này đi. Thank
Nói thực, hiện mình cũng không biết cách làm cái này thế nào. Mình thấy https://www.w3schools.com/ họ cũng có trình soạn thảo với tính năng gần tương tự.