WEB CƠ BẢN

Thẻ <details> & <summary> trong HTML


- Thẻ <details><summary> thường được sử dụng kết hợp với nhau để tạo phần tử có dạng:

"chỉ hiển thị tiêu đề còn chi tiết thì bị ẩn, khi bấm vào tiêu đề thì chi tiết mới được hiển thị"

- Ví dụ:

Loạt tài liệu hướng dẫn học Lập Trình Web của chúng tôi bao gồm:
  • Tài liệu học HTML
  • Tài liệu học CSS
  • Tài liệu học JavaScript
  • Tài liệu học MySQL
  • Tài liệu học PHP

- Để sử dụng thẻ <details><summary>, chúng ta dùng cú pháp như sau:

<details> <summary>Tiêu đề</summary> Phần nội dung chi tiết bị ẩn </details>
Ví dụ

<details>
    <summary>Loạt tài liệu hướng dẫn học Lập Trình Web gồm:</summary>
    <ul>
        <li>Tài liệu học HTML</li>
        <li>Tài liệu học CSS</li>
        <li>Tài liệu học JavaScript</li>
        <li>Tài liệu học MySQL</li>
        <li>Tài liệu học PHP</li>
    </ul>
</details>

- Chúng ta cũng có thể thêm thuộc tính open vào thẻ <details> để thiết lập phần nội dung chi tiết mặc định được hiển thị.

Ví dụ

<details open>
    <summary>Loạt tài liệu hướng dẫn học Lập Trình Web gồm:</summary>
    <ul>
        <li>Tài liệu học HTML</li>
        <li>Tài liệu học CSS</li>
        <li>Tài liệu học JavaScript</li>
        <li>Tài liệu học MySQL</li>
        <li>Tài liệu học PHP</li>
    </ul>
</details>

- Hầu hết các trình duyệt sẽ hiển thị phần tử <details> & <summary> với định dạng CSS như sau:

details {
    display: block;
}
summary {
    display: block;
}