Summary Tag in HTML5
In this article I am going to describe about the implementation and use of summary tag in HTML5.
Summary Tag
The <summary> tag use for defined visible heading for detail element. The summary tag may be use for view and hide detail element by the clicking.
Purpose of the summary tag is to specify a text which a summary of the purpose as well as structure of a table. The <summary> tag is new in HTML5.
The summary tags gives caption to the details section. If we have not used summary tag, the caption would have been Details, which is default.
Note : The <summary> element should be the first child element of the <details> element.
Browser Support
The <summary> tag is currently only supported in Chrome. While other browsers are not currently supporting it.
Syntax
<table summary="value" >.....</summary>
Example of <summary> tag in HTML5
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Summary Tag</title>
</head>
<body>
<h1>Implementation of Summary Tag in HTML5</h1>
<details>
<summary>India Won</summary>
<p>In the asia cup, the match played between India and Pakistan.India won that match by beating pakistan by 12 runs</p>
</details>
<p><b>Note:</b> The <summary> tag is currently only supported in Chrome.</p>
</body>
</html>
Output
