Download presentation
Presentation is loading. Please wait.
1
The details tag <details>
Name: Fatima , Shabia Professor: Porps, Freddy Date:04/10/ Course: CS 300- Client Side
2
What is the <details> tag in HTML5
This tag is utilized to create details within a summary heading. The <details> tag specifies additional details that the user can view or hide on demand. This tag is also one of the sectioning root tags, which means that the sections and headings inside the element are not included in the outline of any higher level sections. The default format of this information is viewed similar to a dropdown list The default format of this tag is details { display: block; }
3
What is the purpose of this tag
The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag. This tag helps to keep your web page organized and keeps excessive information hidden until the viewer wants to view it. The content of a <details> element should not be visible unless the open attribute is set. Open attribute <details open> …(code)… </details>
4
What browsers support this tag’s usage
Supported Firefox 49.0 Chrome 12.0 Safari 6.0 Opera 15.0 Not Supported Internet Explorer
5
How was this function done previously?
The <details> tag is new in HTML5. Previously, something similar to it could have been long coded by utilizing a drop down list Additionally: The <details> tag supports the Global Attributes in HTML. The <details> tag supports the Event Attributes in HTML.
6
How to use this tag in code
The <summary></summary> tag is used to specify a visible heading for the details. The heading can be clicked to view/hide the details. <details> <summary>Places I Have Traveled Outside The United States</summary> <ul> <li>Pakistan</li> <li>Saudia Arabia</li> <li>Turkey</li> <li>Dubai</li> <li>Canada</li> <li>Jamaica</li> <li>London</li> </ul> </details> <details> <summary>Places I Have Traveled Within The United States</summary> <p>Florida</p> <p>New York</p> <p>Atlanta</p> <p>Michigan</p> <p>Kansas</p> <p>Missouri</p> <p>Kentucky</p> <p>Tennessee</p> <p>Texas</p> </details>
7
Works Cited “HTML <details> Tag.” HTML Details Tag, W3.CSS, “HTML Attribute Reference.” HTML 5 Reference for Web Designers, Accilent® Corp., 2014,
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.