Thẻ summary trong HTML dùng để đặt tên tiêu đề cho thẻ details, giúp người dùng hiểu rõ hơn về chi tiết nội dung trước khi click xem, chi tiết như nào hãy cùng chúng tôi phân tích:

Thẻ summary trong HTML

Chức năng của Thẻ summary trong HTML

Thẻ summary trong HTML dùng để đặt tên tiêu đề cho thẻ details, giúp người dùng hiểu rõ hơn về chi tiết nội dung trước khi click xem.

Code Thẻ summary trong HTML

Thẻ summary mặc định trong HTML

Sử dụng thẻ summary để đặt tên cho tiêu đề cho thẻ details:

<details>
  <summary>Xem chi tiết</summary>
  <p>Hãy Chạy thử Thẻ details mặc định trong HTML, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</details>

Chạy Thử

Css cho Thẻ summary trong HTML

<!DOCTYPE html>
<html>
<head>
<title>Css cho Thẻ summary trong HTML</title>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
</head>
<body>
<h1>Css cho Thẻ summary trong HTML</h1>
<details>
  <summary>Xem chi tiết</summary>
  <p>Hãy Chạy thử Thẻ summary mặc định trong HTML, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</details>
</body>
</html>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ summary trong HTML.

5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

Chia sẻ nội dung đánh giá của bạn về Thẻ summary trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn