HTML5 <summary> Tag
Topic: HTML5 Tags ReferencePrev|Next
Description
The <summary> element defines a summary for the <details> element.
The <summary> element is used along with the <details> element to provide a summary visible to the user. When the user clicks the summary, the additional information or content placed inside the <details> element which was previously hidden becomes visible.
The following table summarizes the usages context and the version history of this tag.
| Placement: | Block |
|---|---|
| Permitted Parent: | <details> |
| Content: | Inline, and text |
| Start/End Tag: | Start tag: required, End tag: required |
| Version: | New in HTML5 |
Syntax
The basic syntax of the <summary> tag is given with:
The example below shows the <summary> tag in action.
Example
Try this code »<details>
<summary>What is HTML?</summary>
<p>HTML is a markup language for describing the structure of web pages.</p>
</details>Note: The <summary> element should be the first child element of the <details> element. If it is omitted or not specified the heading "Details" will be used.
Tag-Specific Attributes
The <summary> tag doesn't have any specific attribute.
Global Attributes
Like all other HTML tags, the <summary> tag supports the global attributes in HTML5.
Event Attributes
The <summary> tag also supports the event attributes in HTML5.
Browser Compatibility
The <summary> tag is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: HTML Headings.
Related tags: <details>
