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;
}

2 thoughts on “Thẻ figure trong HTML”

  1. 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

    Reply

Leave a Comment