Post
Ask Question

details tag in HTML5

details tag in HTML5 

 
The <details> tag in HTML5 is used to show the details of the particular topic.
  1. <html>  
  2.     <body>  
  3.         <details>  
  4.             <summary>C# Corner</summary>  
  5.             <p>Premier community for C#, ASP.NET, Silverlight, WPF, Windows Phone, Windows Forms and .NET tutorials, articles, blogs, forums, news, and resources.</p>  
  6.         </details>  
  7.     </body>  
  8. </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 the open attribute in the details tag. This property is used when we want the details of the content is always visible to us.
  1. <html>  
  2.     <body>  
  3.         <details open="open">  
  4.             <summary>C# Corner</summary>  
  5.             <p>Premier community for C#, ASP.NET, Silverlight, WPF, Windows Phone, Windows Forms and .NET tutorials, articles, blogs, forums, news, and resources.</p>  
  6.         </details>  
  7.     </body>  
  8. </html>  
OUTPUT:
 
2.png
 
2.png
Next Recommended Reading HTML Tags Which Are Deprecated In HTML5