- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <details> tag
HTML <details> tag is used to create a disclosure widget that contains some information, and is visible when the widget is toggled to the open state.
A summary (or label) should be provided using the HTML <summary> tag. A disclosure widget is represented onscreen using a small black triangle that rotates to indicate open and closed status, with labels next to the triangles. The content of the summary is used as a label for the disclosure widget.
Syntax
<details>.....</details>
Attribute
HTML style tag supports Global and Event attributes of HTML. Accept a specific attribute as well which is listed below.
Attribute | Value | Description |
---|---|---|
open | open | Specifies that the disclosure widget should be open, by default it is closed. |
Examples of HTML details Tag
Bellow examples will illustrate the usage of details tag. Where, when and how to use details tag to create details elements of any website.
Creating Details Element
The following program is showing the usage of the HTML <details> tag.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML details tag</title> </head> <body> <!--create details tag--> <p>Click on the below label to open the details.</p> <details> <summary>Open</summary> You clicked on label(i.e. summary). </details> </body> </html>
Details Element with Open Attribute
Here, we are using the 'open' attribute within the 'details' element to set the details content should be visible after the webpage is loaded.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML details tag</title> </head> <body> <!--create details tag--> <p>HTML 'details' element example.</p> <details open> <summary>Open</summary> You have used the 'open' attribute, so by default, it opened already. </details> </body> </html>
Disclosure widget using details Tag
Let's look into the following example, we're creating a disclosure widget, using the HTML <details> tag to add additional information that users can toggle open and close. We use CSS for styling with the <details> tag.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML details tag</title> <style> details { border: 1px solid blue; border-radius: 10px; padding: 4px; color: green; } details[open] { padding: 1px; } details[open] summary { border-bottom: 1px solid black; margin-bottom: 5px; color: red; } </style> </head> <body> <!--create details tag--> <p>HTML 'details' element example.</p> <details> <summary>Open</summary> A disclosure widget is represented onscreen using a small black triangle that rotates to indicate open and closed status, with labels next to the triangles. The content of the summary is used as a label for the disclosure widget. </details> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
footer | Yes 12.0 | Yes 79.0 | Yes 49.0 | Yes 6.0 | Yes 15.0 |
To Continue Learning Please Login
Login with Google