HTML - <summary> Tag

Quiz

Introduction to <summary> Tag

The HTML <summary> tag is used to specify the summary, caption, or description for its <details> element. It acts as a clickable label that can toggle the visibility of the content inside he <details> tag. It can contains text, iniline elements and other HTML tags.

The <summary> tag is optional within the <details> elements. However, when it is present, it improves the accessibility by providing a clear description of what content can be expanded or collapsed. The <summary> text is always visible, even when the <details> content is collapsed.

Syntax

Following is the syntax of HTML <summary> tag −

<summary>.....</summary>

Attributes

HTML summary tag supports Global and Event attributes of HTML.

Example : Basic Usage

Let's look at the following example, where we are going to consider the basic usage of the <summary> tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML summary tag</title>
</head>
<body>
   <!--create a summary tag-->
   <p>HTML 'summary' element example..</p>
   <details>
      <summary>Read more</summary>
       It is used within the details element. 
       When a user clicked on the summary,
       it toggles the states of the parent
       element details open and closed.
       The summary element content can be any 
       heading content, plain text, or HTML 
       that can be used within a paragraph.
   </details>
</body>
</html>

Example : Nested Content

Consider the following example, where we are going to make the <ul&t; list hidden until the summary is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML summary tag</title>
</head>
<body>
   <!--create a summary tag-->
   <p>HTML 'summary' element example..</p>
   <details open>
      <summary>Overview</summary>
      <ul>
      <li>Total money : 5000</li>
      <li>Cash on hand : 3570 </li>
      <li>Spended money : (5000 - 3570) = 1430</li>
      </ul>
   </details>
</body>
</html>

Supported Browsers

Tag
embed	Yes 12.0	Yes 79.0	Yes 49.0	Yes 6.0	Yes 15.0

html_tags_reference.htm

Print Page