Thẻ details trong HTML

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.0Không hỗ trợ48.06.015.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ínhGiá trịMô tả
openopenChỉ đị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;
}

Leave a Comment