Blog

details tag in HTML5

Posted by Mahak Gupta Blogs | HTML 5 Mar 27, 2012
The details tag in HTML5 is used to show the details of the particular topic.
The <details> tag in HTML5 is used to show the details of the particular topic.

<html>
<body>
<details>
<summary>C# Corner</summary>
<p>Premier community for C#, ASP.NET, Silverlight, WPF, Windows Phone, Windows Forms and .NET tutorials, articles, blogs, forums, news, and resources.</p>
</details>
</body>
</html>

Here we take a Summary tag. It is used to specify a visible heading for the details.

OUTPUT

1.png

After we click on it:


2.png


New feature in HTML5:

HTML5 introduces open attribute in the details tag. This property is used when we want that the details of the content is always visible to us.


<html>
<body>
<details open="open">
<summary>C# Corner</summary>
<p>Premier community for C#, ASP.NET, Silverlight, WPF, Windows Phone, Windows Forms and .NET tutorials, articles, blogs, forums, news, and resources.</p>
</details>
</body>
</html>


OUTPUT:


2.png2.png
COMMENT USING
PREMIUM SPONSORS
Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.
SPONSORED BY
  • MCN is your source for developing solutions involving websites, mobile apps, cloud-computing, databases, BI, back-end services and processes and client-server applications.