Ví dụ
Cách sử dụng thẻ <details>:
<details>
<summary>Copyright 2013 - 2016.</summary>
- bởi Nguyen Duc Anh. Tất cả các quyền được bảo hộ.
Tất cả nội dung và hình ảnh trên website này thuộc sở hữu của Nguyen Duc Anh.
</details>Kết quả:
Copyright 2013 – 2016.
– bởi Nguyen Duc Anh. Tất cả các quyền được bảo hộ.
Tất cả nội dung và hình ảnh trên website này thuộc sở hữu của Nguyen Duc Anh.
Định nghĩa và cách dùng
Thẻ <details> chỉ định thông tin người dùng có thể xem hoặc ẩn tuỳ theo nhu cầu.
Thẻ <details> có thể sử dụng để tạo khả năng tương tác để người dùng mở hoặc đóng. Bất cứ nội dung nào cũng có thể đưa vào bên trong thẻ <details>.
Nội dung của thẻ <details> nên ẩn trừ khi các thuộc tính được thiết lập sẵn.
Trình duyệt hỗ trợ
Các con số trong bảng xác định các phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ các tính năng.
| Thẻ | Chrome | IE | FireFox | Safari | Opera |
|---|---|---|---|---|---|
| <details> | 12.0 | Không hỗ trợ | 48.0 | 6.0 | 15.0 |
Sự khác biệt giữa HTML 4.01 và HTML5
Thẻ <details> là thẻ mới trong HTML5
Một số mẹo và lưu ý
Thẻ <summary> được dùng để chỉ định thông tin tiêu đề hiển thị ra bên ngoài. Tiêu đề có thể được click để ẩn/hiện thông tin chi tiết bên dưới.
Các thuộc tính
| Thuộc tính | Giá trị | Mô tả |
|---|---|---|
| open | open | Chỉ định rằng thông tin phải được hiển thị cho người dùng (nếu không phải giá trị open thì bình thường sẽ ẩn, click vào mới hiển thị). |
Thiết lập mặc định trong CSS
Hầu hết các trình duyệt sẽ hiển thị phần tử <details> với các giá trị mặc định sau:
details {
display: block;
}