<summary> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:summary

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. summary

Introduction

The details element usually contains a summary element, which creates a label or title for the details section.

The summary Element summary

Item Value
Element:summary
Element Type: N/A
Permitted Parents: The details element
Local Attributes: None
Contents: Phrasing content
Tag Style: Start and end tags
New in HTML5? Yes
Changes in HTML5 N/A
Style Conventionsummary { display: block; }

You can see both the details and summary elements used in the following code.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
      <style>
article {border: thin black solid; padding: 10px; margin-bottom: 5px}
details {border: solid thin black; padding: 5px}
details > summary { font-weight: bold}

      </style> 
   </head> 
   <body> 
      <article> 
         <header> 
            <hgroup> 
               <h1 id="">CSS</h1> 
               <h2>Layout</h2> 
            </hgroup> 
         </header> 
         <section> 
            <p>test.</p> 
            <details> 
               <summary>summary</summary>
                this is a test with 
               <ol> 
                  <li>Layout</li> 
                  <li>Color</li> 
                  <li>Width</li> 
               </ol> 
            </details> 
         </section> 
      </article>  
   </body><!--from  w w w . ja v a2 s .  c o m-->
</html>

Related Tutorials