Khám phá thẻ Details và Summary trong HTML5

Giới thiệu về thẻ <details> và <summary> trong HTML5

HTML5 mang đến nhiều yếu tố mới giúp cải thiện cấu trúc và trải nghiệm người dùng (UX - User Experience) trên các trang web. Trong số đó, thẻ <details> và <summary> là hai yếu tố mạnh mẽ cho phép tạo ra các phần nội dung có thể thu gọn và mở rộng một cách dễ dàng. Điều này đặc biệt hữu ích khi bạn muốn trình bày thông tin một cách có cấu trúc, tránh làm người dùng bị quá tải với quá nhiều nội dung trên một trang. Bài viết này sẽ cung cấp một hướng dẫn chi tiết về cách sử dụng hai thẻ này, các thuộc tính liên quan và các ví dụ minh họa cụ thể.

Việc sử dụng <details> và <summary> không chỉ giúp trang web trở nên gọn gàng hơn mà còn cải thiện khả năng điều hướng và tìm kiếm thông tin của người dùng. Thay vì phải cuộn qua một loạt văn bản dài, người dùng có thể nhanh chóng xác định các phần quan trọng và mở rộng chúng khi cần thiết. Điều này đặc biệt quan trọng trên các thiết bị di động, nơi không gian màn hình có hạn.

Cú pháp cơ bản và cách sử dụng thẻ <details> và <summary>

Cú pháp của thẻ <details> rất đơn giản. Nó là một thẻ chứa (container tag) bao gồm thẻ <summary> và nội dung bạn muốn ẩn/hiện. Thẻ <summary> đóng vai trò là tiêu đề hoặc nhãn cho phần nội dung có thể thu gọn. Khi người dùng nhấp vào <summary>, nội dung bên trong <details> sẽ được hiển thị hoặc ẩn đi.

Ví dụ cơ bản:

      
        <details>
          <summary>Tiêu đề có thể thu gọn</summary>
          <p>Đây là nội dung chi tiết sẽ được hiển thị hoặc ẩn đi.</p>
        </details>
      
    

Trong ví dụ này, "Tiêu đề có thể thu gọn" sẽ luôn hiển thị. Khi người dùng nhấp vào tiêu đề này, phần nội dung <p>Đây là nội dung chi tiết sẽ được hiển thị hoặc ẩn đi.</p> sẽ được hiển thị hoặc ẩn đi. Bạn có thể đặt bất kỳ nội dung HTML nào bên trong thẻ <details>, bao gồm văn bản, hình ảnh, danh sách, bảng biểu và thậm chí cả các phần tử HTML khác.

Lưu ý quan trọng: Thẻ <summary> phải là phần tử con đầu tiên của thẻ <details>. Nếu không, trình duyệt có thể không hiển thị đúng cách.

Thuộc tính "open" của thẻ <details>

Thẻ <details> có một thuộc tính boolean (boolean attribute) quan trọng là open. Thuộc tính này xác định trạng thái ban đầu của phần nội dung: hiển thị (mở) hay ẩn (đóng). Nếu thuộc tính open được đặt, nội dung bên trong <details> sẽ được hiển thị khi trang web được tải. Nếu không, nội dung sẽ bị ẩn cho đến khi người dùng nhấp vào thẻ <summary>.

Ví dụ:

      
        <details open>
          <summary>Tiêu đề (mở mặc định)</summary>
          <p>Nội dung này sẽ hiển thị khi trang được tải.</p>
        </details>
      
    

Trong ví dụ này, phần nội dung "Nội dung này sẽ hiển thị khi trang được tải" sẽ được hiển thị ngay khi trang web được tải, vì thuộc tính open đã được đặt. Bạn có thể sử dụng thuộc tính này để tạo ra các phần nội dung quan trọng mà bạn muốn người dùng nhìn thấy ngay lập tức.

Tùy chỉnh giao diện bằng CSS

Mặc dù thẻ <details> và <summary> hoạt động tốt mà không cần CSS, nhưng bạn có thể tùy chỉnh giao diện của chúng để phù hợp với thiết kế của trang web. Bạn có thể thay đổi màu sắc, phông chữ, kích thước và các thuộc tính CSS khác để tạo ra một giao diện hấp dẫn và chuyên nghiệp hơn.

Ví dụ:

      
        <style>
          details {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
          }

          summary {
            font-weight: bold;
            cursor: pointer;
          }

          summary:focus {
            outline: none; /* Loại bỏ viền mặc định khi focus */
          }
        </style>

        <details>
          <summary>Tiêu đề tùy chỉnh</summary>
          <p>Nội dung với giao diện tùy chỉnh.</p>
        </details>
      
    

Trong ví dụ này, chúng ta đã thêm một đường viền, padding và margin cho thẻ <details>. Chúng ta cũng đã làm cho tiêu đề (<summary>) trở nên đậm hơn và thay đổi con trỏ chuột thành hình bàn tay khi di chuột qua. Thêm vào đó, chúng ta đã loại bỏ viền mặc định khi thẻ <summary> được focus (ví dụ: khi người dùng sử dụng phím tab để điều hướng).

Bạn có thể sử dụng các pseudo-class (lớp giả) như :hover, :focus và :active để tạo ra các hiệu ứng tương tác khi người dùng di chuột qua, focus hoặc nhấp vào thẻ <summary>. Điều này giúp tăng tính tương tác và trải nghiệm người dùng trên trang web.

Ngoài ra, bạn có thể sử dụng thuộc tính list-style-type trên thẻ <summary> để thay đổi biểu tượng mũi tên mặc định. Ví dụ: bạn có thể sử dụng list-style-type: disclosure-closed; để hiển thị biểu tượng mũi tên đóng hoặc list-style-type: disclosure-open; để hiển thị biểu tượng mũi tên mở. Tuy nhiên, hỗ trợ cho các giá trị này có thể khác nhau tùy thuộc vào trình duyệt.

Sử dụng JavaScript để điều khiển thẻ <details>

Mặc dù thẻ <details> hoạt động tốt mà không cần JavaScript, nhưng bạn có thể sử dụng JavaScript để điều khiển nó một cách linh hoạt hơn. Ví dụ: bạn có thể sử dụng JavaScript để tự động mở hoặc đóng các phần nội dung dựa trên các điều kiện nhất định, hoặc để tạo ra các hiệu ứng động khi người dùng tương tác với thẻ <summary>.

Ví dụ:

      
        <details id="myDetails">
          <summary>Tiêu đề (điều khiển bằng JavaScript)</summary>
          <p>Nội dung được điều khiển bằng JavaScript.</p>
        </details>

        <button onclick="toggleDetails()">Đóng/Mở</button>

        <script>
          function toggleDetails() {
            var details = document.getElementById("myDetails");
            if (details.open) {
              details.removeAttribute("open");
            } else {
              details.setAttribute("open", "");
            }
          }
        </script>
      
    

Trong ví dụ này, chúng ta đã thêm một nút (<button>) để điều khiển trạng thái của thẻ <details>. Khi người dùng nhấp vào nút, hàm toggleDetails() sẽ được gọi. Hàm này kiểm tra xem thẻ <details> có thuộc tính open hay không. Nếu có, nó sẽ xóa thuộc tính này để đóng phần nội dung. Nếu không, nó sẽ thêm thuộc tính open để mở phần nội dung.

Bạn cũng có thể sử dụng các sự kiện JavaScript như toggle để theo dõi khi người dùng mở hoặc đóng thẻ <details>. Ví dụ: bạn có thể sử dụng sự kiện toggle để gửi dữ liệu đến máy chủ hoặc để cập nhật giao diện người dùng.

Ứng dụng thực tế của thẻ <details> và <summary>

Thẻ <details> và <summary> có thể được sử dụng trong nhiều tình huống khác nhau để cải thiện cấu trúc và trải nghiệm người dùng trên trang web. Dưới đây là một số ví dụ:

• Câu hỏi thường gặp (FAQ - Frequently Asked Questions): Sử dụng <details> và <summary> để tạo ra một danh sách các câu hỏi thường gặp có thể thu gọn và mở rộng. Điều này giúp người dùng nhanh chóng tìm thấy câu trả lời mà họ cần mà không cần phải cuộn qua một trang dài.
• Chú giải thuật ngữ (Glossary): Sử dụng <details> và <summary> để tạo ra một chú giải thuật ngữ có thể thu gọn và mở rộng. Điều này giúp người dùng hiểu rõ hơn về các thuật ngữ chuyên ngành mà không cần phải rời khỏi trang hiện tại.
• Hướng dẫn từng bước (Step-by-step instructions): Sử dụng <details> và <summary> để tạo ra một hướng dẫn từng bước có thể thu gọn và mở rộng. Điều này giúp người dùng dễ dàng theo dõi các bước thực hiện mà không bị quá tải với quá nhiều thông tin cùng một lúc.
• Nội dung bổ sung (Additional content): Sử dụng <details> và <summary> để ẩn/hiện nội dung bổ sung mà không cần thiết cho tất cả người dùng. Điều này giúp trang web trở nên gọn gàng hơn và tập trung vào những thông tin quan trọng nhất.

Ví dụ về FAQ:

      
        <details>
          <summary>Câu hỏi: HTML5 là gì?</summary>
          <p>HTML5 là phiên bản mới nhất của ngôn ngữ đánh dấu siêu văn bản (HTML - HyperText Markup Language), được sử dụng để tạo cấu trúc và nội dung cho các trang web.</p>
        </details>

        <details>
          <summary>Câu hỏi: CSS là gì?</summary>
          <p>CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy hoặc các phương tiện khác.</p>
        </details>
      
    

Khả năng tương thích của trình duyệt

Thẻ <details> và <summary> được hỗ trợ rộng rãi bởi các trình duyệt hiện đại, bao gồm Chrome, Firefox, Safari, Edge và Opera. Tuy nhiên, một số phiên bản trình duyệt cũ hơn có thể không hỗ trợ đầy đủ hoặc không hỗ trợ.

Để đảm bảo rằng trang web của bạn hoạt động tốt trên tất cả các trình duyệt, bạn có thể sử dụng một polyfill (một đoạn mã JavaScript nhỏ) để cung cấp hỗ trợ cho các trình duyệt không hỗ trợ. Một polyfill phổ biến cho thẻ <details> là <details> polyfill của Mathias Bynens (https://github.com/mathiasbynens/details-element).

Để sử dụng polyfill này, bạn chỉ cần thêm đoạn mã JavaScript sau vào trang web của bạn:

      
        <script>
          document.createElement('details');
        </script>
      
    

Đoạn mã này sẽ tạo ra một phần tử <details> trong các trình duyệt không hỗ trợ, cho phép polyfill hoạt động.

Kết luận

Thẻ <details> và <summary> là hai công cụ mạnh mẽ giúp bạn tạo ra các phần nội dung có thể thu gọn và mở rộng một cách dễ dàng trong HTML5. Chúng không chỉ giúp trang web trở nên gọn gàng hơn mà còn cải thiện khả năng điều hướng và tìm kiếm thông tin của người dùng. Bằng cách sử dụng CSS và JavaScript, bạn có thể tùy chỉnh giao diện và hành vi của hai thẻ này để phù hợp với nhu cầu cụ thể của dự án của bạn. Hy vọng rằng hướng dẫn này đã cung cấp cho bạn một cái nhìn tổng quan về cách sử dụng thẻ <details> và <summary> và cách chúng có thể giúp bạn cải thiện trải nghiệm người dùng trên trang web của bạn. Hãy thử nghiệm và khám phá các khả năng khác nhau của hai thẻ này để tạo ra các trang web tương tác và hấp dẫn hơn.

Việc sử dụng hợp lý thẻ <details> và <summary> góp phần nâng cao trải nghiệm người dùng (User Experience - UX) và khả năng truy cập (Accessibility) của website. Hãy tận dụng chúng để tổ chức nội dung một cách khoa học và thân thiện.