HTML5 <summary> Tag

Topic: HTML5 Tags Reference« Prev|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:

HTML / XHTML: <summary> ... </summary>

The example below shows the <summary> tag in action.

  • <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.

Browsers Icon

Basic Support—

  • Firefox ×
  • Google Chrome 12+
  • Internet Explorer ×
  • Apple Safari 6+
  • Opera 15+

Further Reading

See tutorial on: HTML Headings.

Related tags: <details>

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.