Giới thiệu

Tag <summary> là một phần của HTML5 và được sử dụng trong việc tạo ra các mô tả ngắn gọn cho các phần tử có thể được mở rộng hoặc thu gọn. Tag này thường được sử dụng kết hợp với tag <details> để tạo ra các phần tử có thể được mở rộng và thu gọn.

Cách sử dụng

Để sử dụng tag <summary>, bạn cần đặt nó bên trong tag <details>. Tag <details> sẽ là phần tử cha và tag <summary> sẽ là phần tử con. Khi người dùng nhấp vào phần tử <summary>, nội dung bên trong tag <details> sẽ được hiển thị hoặc ẩn đi.

Dưới đây là cú pháp sử dụng tag <summary>:

<details>
  <summary>Đây là mô tả ngắn gọn</summary>
  <p>Đây là nội dung chi tiết</p>
</details>

Ví dụ kèm giải thích

Hãy xem ví dụ sau đây để hiểu rõ hơn về cách sử dụng tag <summary>:

<details>
  <summary>Thông tin cá nhân</summary>
  <ul>
    <li>Họ và tên: John Doe</li>
    <li>Tuổi: 25</li>
    <li>Địa chỉ: 123 ABC Street, XYZ City</li>
  </ul>
</details>

Trong ví dụ trên, chúng ta sử dụng tag <details> để tạo ra một phần tử có thể được mở rộng và thu gọn. Phần tử <summary> được đặt bên trong tag <details> và chứa mô tả "Thông tin cá nhân". Khi người dùng nhấp vào phần tử <summary>, danh sách thông tin cá nhân sẽ được hiển thị hoặc ẩn đi.

Tag <summary> giúp tạo ra các phần tử có thể được mở rộng và thu gọn, giúp người dùng dễ dàng điều hướng và tìm kiếm thông tin cần thiết.