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
post comment
     
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
Join a Chapter
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Get Career Advice from Experts