Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Tìm hiểu về thẻ “details” và “summary” trong HTML5
Tìm hiểu về thẻ “details” và “summary” trong HTML5
Nguyễn Trung Hiếu
Share Code Web Company 2014

Tìm hiểu về thẻ “details” và “summary” trong HTML5

Bài viết phân tích và hướng dẫn sử dụng hai thẻ details và summary trong HTML5

Sử dụng details

Thành phần thẻ details có thể được sử dụng ở bất cứ đâu trong cặp thẻ body commande viagra sans ordonnance. Ví dụ:

Ở ví dụ trên cho chúng ta thấy thành phần thẻ details bao gồm một đoạn văn bản, về cơ bản mặt hiển thị khi chúng ta chạy trên trình duyệt thì chưa có gì cả. Ngoài ra, bên trong thẻ details chúng ta cũng có thể sử dụng các thẻ khác của HTML5 như figure hoặc một số thành phần của form như các thẻ input, textarea
Sự khác nhau đáng kể duy nhất là mặt hiển thị trên các cửa sổ trình duyệt khác nhau. Ở các trình duyệt mới nhất như Google Chrome, Firefox, Opera nó sẽ hiển thị thêm một nút tam giác ở đầu cạnh.
sample with details tag in HTML5
Thẻ details làm việc như một accordion trong jquery, chuyển qua chuyển lại mũi tên, hoặc nhấp chuột vào bất cứ nơi nào mà chiều ngang thẳng hàng với mũi tên, sẽ tiết lộ nội dung ẩn. Chúng ta có thể sử dụng phím Tab để di chuyển giữa các thành phần này, sau đó có thể nhấn phím space hoặc Enter để mở nội dung ẩn
details-keyboard-navigation
Bạn cũng có thể thêm thuộc tính open để mặc định hiển thị một thành phần nào đó

Thẻ summary

Thẻ details có thể có cả thẻ summary đi kèm, nhưng th

Với đoạn code trên ta sẽ được kết quả như hình dưới
details-summary-example
Bạn cũng có thể đặt các thẻ details dạng lồng nhau

Khi đó chúng ta sẽ có dạng kích mở 2 lần.

Style Details với CSS

2 thẻ detailssummary có thể được style bằng css như các thẻ bình thường khác

Style dấu tam giác

Các bạn cũng có thể thay cái dấu tam giác ở đầu đi bằng đoạn css sau

Sự hỗ trợ của các trình duyệt

support browser in html5

Ví dụ ứng dụng

Bạn có thể thấy ví dụ ứng dụng thông qua bức ảnh sau
details-in-ecommerce
Thẻ details được dùng để trình bày phần menu bên trái của website, nhìn rất hay đấy chứ.

Tổng kết

Với các thẻ này, hy vọng một ngày nào đó nó sẽ chạy độc lập với các thư viện javascript trong việc thiết kế các accordion.
Vậy website của bạn đã sử dụng cặp thẻ detailssummary chưa?

Loạt bài viết về Học HTML5

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}