"details" and "summary" Elements

This section provides an tutorial example of using 'details' and 'summary' elements in HTML documents to present contents as expandable blocks.

"details" elements are added in HTML5 standard to allow us to group paragraphs together to be presented as hide-or-show blocks. When clicked, contents of "details" elements will be displayed or hidden.

"summary" elements are added in HTML5 standard to allow us to represent summary information of "details" elements.

Here are some general rules about "nav" and "aside" elements:

1. "details" elements are used to present hide-or-show blocks.

2. "summary" elements are optional elements that should have only text content and appear as the first element of "details" elements.

3. "details" elements are presented in browsers as clickable controls with a special icon and the "summary" element is provided. When a "details" control is clicked, its content will be displayed or hidden.

4. Multiple "details" elements are allowed at the same level.

5. "details" elements are allowed to be directly nested.

Here is a good example of using "details" and "summary" elements in HTML documents:

<!DOCTYPE html>
<!-- HTML5_details_and_summary_Example.html
 - Copyright (c) 2014, HerongYang.com, All Rights Reserved.
-->
<html>
<head>
<title>HTML5 details and summary Example</title>
</head>
<body>
 <details>
  <summary>Windows</summary>

  <blockquote>
  <details>
   <summary>Boot</summary>
   <blockquote>Files in \Boot ...</blockquote>
  </details>

  <details>
   <summary>Debug</summary>
   <blockquote>Files in \Boot ...</blockquote>
  </details>

  <details>
   <summary>Fonts</summary>
   <blockquote>Files in \Boot ...</blockquote>
  </details>

  <details>
   <summary>System32</summary>
   <blockquote>
   <details>
    <summary>drivers</summary>
    <blockquote>Files in \Windows32\Boot ...</blockquote>
   </details>
   <details>
    <summary>Microsoft</summary>
    <blockquote>Files in \Windows32\Microsoft ...</blockquote>
   </details>
   </blockquote>
  </details>
  </blockquote>

 </details>
</body>
</html>

Note that, currently, IE 10 and Firefox 22 do not support "details" elements. If you need to use Chrome 28 to test the above HTML document.

Last update: 2014.

Table of Contents

 About This Book

 Introduction of HTML

Introduction of HTML5 Features

 What Is HTML5?

 Differences between HTML5 and HTML 4

 HTML5 DOCTYPE Declaration

 Adding Inline SVG Image in HTML5 Documents

 Adding MathML Formula in HTML5 Documents

 "article" and "section" Elements

 "header" and "footer" Elements

 "nav" and "aside" Elements

"details" and "summary" Elements

 "figure" and "figcaption" Elements

 "audio" and "video" Elements

 HTML Document Structure and Content

 HTML Document and Elements Syntax

 References

 PDF Printing Version