Lập trình · 26/09/2026

HTML details và summary: Tạo nội dung thu gọn không cần JavaScript

Một trang hướng dẫn thường có vài đoạn giải thích chỉ một số người cần đọc. Nếu luôn hiển thị tất cả, phần chính dễ bị loãng; nếu tự làm nút đóng mở, bạn lại phải quản lý trạng thái và tương tác. Với nội dung bổ sung đơn giản, HTML đã có cặp details và summary.

1. Chọn đúng nội dung để thu gọn

Hãy thử áp dụng cho phần giải thích định dạng file trong trang nhập dữ liệu. Người đã quen có thể tiếp tục thao tác, người mới mở hướng dẫn khi cần. Ngược lại, giới hạn dung lượng bắt buộc hoặc cảnh báo mất dữ liệu nên hiện ngay cạnh hành động liên quan, không buộc người dùng phải tìm trong một khối đang đóng.

Theo tài liệu MDN về details, phần tử này cung cấp cơ chế mở và thu gọn nội dung. Nó không cần JavaScript cho thao tác đóng mở cơ bản.

2. Ví dụ tối thiểu cho trang nhập dữ liệu

<details class="import-help">
  <summary>File CSV cần có những cột nào?</summary>
  <p>Dòng đầu tiên cần có hai tên cột: name và email.</p>
  <pre><code>name,email
Demo,demo@example.com</code></pre>
  <p>Chỉ dùng dữ liệu giả khi thử chức năng nhập.</p>
</details>

Đặt summary làm phần tử con đầu tiên của details. Nhãn nên nói rõ nội dung sắp mở, chẳng hạn câu hỏi về cột CSV, thay vì lặp lại “Xem thêm” ở mọi nơi. Tham khảo quy tắc của summary trên MDN.

Ví dụ này chỉ minh họa phần trợ giúp, không triển khai bộ nhập CSV. Việc kiểm tra cột, dữ liệu trùng và quyền nhập vẫn thuộc ứng dụng phía server.

3. open="false" vẫn có nghĩa là mở

open là thuộc tính Boolean: có mặt thì mở, vắng mặt thì đóng. Muốn khối mở sẵn, viết <details open>; muốn đóng ban đầu, bỏ hẳn thuộc tính. Chuỗi open="false" không tắt trạng thái mở.

Đây là điểm cần chú ý khi sinh HTML từ template. Nếu biến cấu hình là false, template nên không xuất thuộc tính open, thay vì chuyển false thành một chuỗi trong HTML. Hãy kiểm tra markup cuối cùng bằng công cụ phát triển của trình duyệt.

4. Trang trí nhẹ và giữ dấu hiệu tương tác

.import-help {
  border: 1px solid #777;
  border-radius: 0.5rem;
  padding: 1rem;
}
.import-help > summary {
  cursor: pointer;
  font-weight: 600;
}
.import-help > summary:focus-visible {
  outline: 3px solid #075ab5;
  outline-offset: 4px;
}

Mẫu CSS không xóa dấu tam giác mặc định và bổ sung viền focus. Tránh đặt liên kết hoặc nút phụ ngay trong nhãn; đưa chúng xuống nội dung để mỗi vùng có một nhiệm vụ rõ ràng. Màu sắc cần được đánh giá lại theo nền thực tế của website.

5. Thu gọn không phải bảo mật hay tải chậm

Nếu dữ liệu đã được gửi trong HTML, người dùng vẫn có thể đọc nó bằng công cụ phát triển dù khối đang đóng. Không đặt token, thông tin riêng tư hoặc dữ liệu chưa được cấp quyền trong details rồi coi đó là cách che giấu.

Tương tự, đừng suy ra rằng đóng khối sẽ tự ngăn mọi request ảnh hoặc tài nguyên bên trong. Nếu mục tiêu là giảm tải mạng, cần thiết kế cơ chế tải phù hợp và đo bằng Network. Bố cục gọn hơn không tự chứng minh trang tải nhanh hơn.

6. Checklist trước khi đưa vào giao diện thật

Dùng Tab tới summary và thử Space để đóng mở; focus phải nhìn thấy được.
Thử đọc nhãn và trạng thái bằng trình đọc màn hình trên tổ hợp trình duyệt mục tiêu.
Kiểm tra trên màn hình hẹp, khi tăng cỡ chữ và khi JavaScript bị tắt.
Đảm bảo thông tin bắt buộc vẫn dễ thấy, không nằm hết trong vùng thu gọn.
Kiểm tra template khi cấu hình mở ban đầu là true và false.
Nếu nhúng qua CMS, xác minh bộ lọc HTML không loại details hoặc summary.

Đây là checklist cần thực hiện trên sản phẩm của bạn, không phải báo cáo kiểm thử trình duyệt đã chạy. Bắt đầu với HTML đơn giản, chỉ thêm logic khi có yêu cầu thực sự sẽ giúp phần trợ giúp dễ hiểu và dễ bảo trì.