Trong HTML, thẻ <summary> là một phần quan trọng của thẻ <details>, cho phép bạn tạo ra các phần tử có thể được mở rộng hoặc thu gọn để hiển thị hoặc ẩn nội dung. Điều này có thể rất hữu ích khi bạn muốn trình bày thông tin một cách ngắn gọn và có tổ chức, giúp người dùng truy cập và hiểu được thông tin một cách dễ dàng hơn. Thẻ <summary> chính là tiêu đề hoặc tóm tắt của nội dung mà bạn muốn ẩn hoặc hiển thị.
Cách sử dụng thẻ <summary> với thẻ <details>
Dưới đây là một số bước đơn giản để sử dụng thẻ <summary> cùng với thẻ <details>:
-
Tạo thẻ
<details>: Trước tiên, bạn cần đặt tất cả nội dung mà bạn muốn ẩn dưới thẻ<details>. -
Thêm thẻ
<summary>: Sau đó, bạn cần thêm thẻ<summary>bên trong thẻ<details>. Nội dung của thẻ<summary>chính là tiêu đề hoặc tóm tắt mà người dùng sẽ thấy trước khi mở rộng nội dung. -
Thêm nội dung cần ẩn: Bất kỳ nội dung nào bạn muốn ẩn sẽ được đặt sau thẻ
<summary>bên trong thẻ<details>.
Ví dụ
Dưới đây là một ví dụ đơn giản về cách sử dụng thẻ <summary>:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về thẻ <details> và <summary></title>
</head>
<body>
<details>
<summary>Thông tin chi tiết</summary>
<p>Đây là nội dung chi tiết mà sẽ hiện ra khi bấm vào phần tóm tắt.</p>
</details>
</body>
</html>
Trong ví dụ trên, thẻ <summary> chứa dòng chữ "Thông tin chi tiết". Khi người dùng nhấp vào văn bản này, nội dung bên trong thẻ <details> sẽ được mở rộng và hiển thị dòng chữ "Đây là nội dung chi tiết mà sẽ hiện ra khi bấm vào phần tóm tắt."
Ứng dụng thực tế
-
FAQs (Câu hỏi thường gặp): Thẻ
<details>và<summary>rất hữu ích trong việc tạo ra các trang FAQ, nơi người dùng có thể nhấp vào câu hỏi để xem câu trả lời khi cần thiết. -
Tài liệu kỹ thuật: Khi trình bày tài liệu kỹ thuật dài dòng, bạn có thể sử dụng thẻ này để tiện lợi hơn trong việc ẩn và hiển thị các đoạn mã hoặc đoạn văn bản dài.
-
Bài viết blog: Trong một số bài viết blog, đặc biệt là các bài viết hướng dẫn, bạn có thể sử dụng thẻ này để ẩn bớt nội dung chi tiết cho người đọc dễ dàng theo dõi.
Lợi ích của việc sử dụng thẻ <summary>
- Tối ưu hóa không gian: Giúp trang web của bạn trở nên gọn gàng hơn bằng cách ẩn các phần không cần thiết và chỉ hiện khi người dùng cần xem.
- Tăng trải nghiệm người dùng: Người dùng có thể nhanh chóng tìm thấy thông tin tóm tắt và quyết định xem có muốn xem chi tiết hay không.
- Thân thiện với SEO: Các công cụ tìm kiếm có thể đọc được nội dung bên trong thẻ
<details>, do đó không ảnh hưởng đến việc chỉ số hóa và xếp hạng của trang web.
Tóm lại, việc sử dụng thẻ <summary> kết hợp với thẻ <details> là một cách hiệu quả để quản lý và trình bày nội dung trên trang web của bạn. Nó không chỉ giúp tổ chức thông tin một cách khoa học mà còn cải thiện trải nghiệm người dùng, dẫn đến sự tương tác tốt hơn và thời gian trên trang cao hơn.
Comments