<details> Tag in HTML5
1. Introduction of <details> tag
2. Syntax of <details> tag
3. Attributes of <details> tag
4. Example of <details> tag
4. Example of <details> tag
Introduction of HTML5 <details> Tag
There are some details in the content which is better to show on the demand of users. For example, many products have been shown on a web page. If all the details of the products are shown with them then there will be very few products available on the webpage.
It is also not necessary that the user is interested in all the products. So their details are hidden with all the products. The user who is interested in the product himself sees his details. By doing this you can show a lot of products on the web page. Also, the user experience will not be disturbed.
JavaScript was used to implement before the HTML5. Such code was written in JavaScript to show only one link to the user. When the user clicked on that link, then the detail was shown. This is also called the toggle menu.
A simple solution has been provided in HTML5 to implement this functionality. HTML5 provides you with <details> tag. With this tag, you can implement the toggle menus without using any JavaScript code.
The <details> tag of HTML5 shows additional details that the user can hide and show according to its own wish. This tag creates a widget that can be open and close. You can insert any kind of content into this tag. Such as paragraph elements, lists, and links etc.
Syntax of HTML5 <details> Tag
The syntax of <details> tag is being given below.
<details>
... Content Here ...
</ details>
When you define <details> tag like this, a widget is created in the web page with heading details. When you click this heading, the content inside the <details> tag is displayed below this heading.
If you want to show yourself a heading, then you can use the <summary> tag for it. By doing so, the text defined inside the <summary> tag is displayed as the heading of the widget, which is clicked when the other content is shown. When you do not define the summary tag, automatic default heading details are displayed. Its syntax is being given below.
<details>
<summary> Heading Here </ summary>
... Content Here ...
</details>
Styling HTML5 <details> Tag
Styling by CSS like any normal HTML tag on the <details> tag can be applied. An example of this is being given below.
details
{
color: blue;
}
Similarly, you can apply other CSS rules to this tag.
Attributes of HTML5 <details> Tag
Open attribute is available with <details> tag. When you want the contents of the <details> tag to not be hidden and you do not need to click the user to see it, in this case, you can set the open attribute. By setting the Open attribute, the contents of the <details> tag are visible from the beginning. Its syntax is being given below.
<details open>
... Content Here ...
</ details>
<details> tag supports all global attributes such as class, id etc.
<details id = "IdOne">
... Content Here ...
</ details>
<details id = "idtwo">
... Content Here ...
</ details>
Event Attributes of HTML5 <details> Tag
<details> tag supports all event attributes (onclick, onfocus, etc.). With this tag, event attributes can be used like this.
<details onfocus = "">
... Content Here ...
</ details>
How to use details Tag in HTML5?
Example of HTML5 <details> Tag
There is an example of details tag as below.
The above script generates the given output as below.
 |
| EXAMPLE-OF-DETAILS-TAG |
Previous:- How to use wbr tag in html5?
Next:- How to use Aside tag in HTML5?
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.