Articles → HTML 5 → Summary and detail tag in HTML5

Summary and detail tag in HTML5






Purpose





Syntax


<details>
	<summary></summary>
	<!--Content to be showed or hidden-->
</details>



Example


<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="bootstrap\css\bootstrap.min.css">
   </head>
   <body>
      <details>
         <summary>Trade fair in Delhi (Click for more details)</summary>
         <p>Venue: Pragati Maiden</p>
         <p>Date: 14 November</p>
      </details>
   </body>
</html>



Output


Picture showing the output of Summary and detail tag in HTML5

Click to Enlarge


Browser support


TagInternet ExplorerFirefoxChromeSafariOperaEdge
SummaryNot supported48.012.06.015.0Not supported
DetailNot supported49.012.06.015.0Not supported



Video





Posted By  -  Karan Gupta
 
Posted On  -  Tuesday, November 14, 2017

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250