HTML summary tag

Summary -

In this topic, we described about the <summary> tag along with detailed example.

The <summary> tag is new in HTML5. Defines visible heading/summary/caption for <details> element. The <summary> tag used to specify the visible heading.

The tag can be specified like <summary></summary> with the summary inserted in between the opening and closing tags. The <summary> tag always used conjunction with <details> tag.

This summary/caption can be clicked to expand/collapse details. The <summary> tag is the first child of <details> tag.

Syntax -

<summary>.. text here.. </summary>

Example -

<!DOCTYPE html>
<html>
	<head>
		<title>summary tag text example.. </title>
	</head>
	<body>
		<details>
			<summary>Copyright 2018.</summary>
			<p> - by . All Rights Reserved.</p>
		</details>
	</body>
</html>

Output -

Click on it to exapnd the summary.