The <summary> element

The <summary> element represents a summary, caption, or legend for the contents of the <details> element. The <summary> must always be the first child of <details>, but more than one <summary> element can be used per details element.

Syntax:

<details><summary></summary></details>

Attributes:

By clicking on the summary line of the <details> element, the details below should reveal themselves.

NOTE: Currently <summary> element is not supported by the Internet Explorer, as well as Firefox.

Example

The summary tag example:

<!DOCTYPE html>
<html lang='en-us'>
<head><style type='text/css'>
	body{background-color:#343434;}
	article{background-color:#f4f4f4; padding:2px 5px; width:90%; margin:1.5em auto;}
	details{margin:-8px auto; width:auto; background:gray; font-weight:bold; font-family:Arial; font-size:smaller;}
</style></head>
<body>
<details>
  <summary>info</summary>
  <p>HTML5 tutorial</p>
  <p>Date:2015, February 27th.</p>
</details>
<article>
	<p>The summary element represents a summary, caption, or legend for the contents of the &lt;details&gt; element. The summary must always be the first child of details, but more than one summary element can be used per details element.</p>
</article>
</body>
</html>

›› go to examples ››

The <summary> element

Syntax:

Attributes:

Example

The summary tag example:

Comments

About

Contact

Get Connected