Detail Tag in HTML5
In this article I am going to describe about the implementation and use of detail tag in HTML5.
Detail Tag
Detail Tag is new in HTML5.The <details> tag did not exist in older versions of HTML. It essentially allows us to show and hide content with the click of a button.
It can be used in conjunction with the <summary> tag to provide a heading that can be clicked on to expand/collapse the details as required. Any sort of content can be put inside the <details> tag.
The content of a <details> element should not be visible unless the open attribute is set.
Browser Support
The <details> tag is currently only supported in Chrome and in Safari on Mac.
Attributes
| Attribute |
Value |
Description |
| open |
open |
Specifies that the detail should be visible to the user |
Example of Detail Tag in HTML5
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Detail Tag</title>
</head>
<body>
<details open="open">
<summary>Lighthouse</summary>
<img src="/C:\Users\Public\Pictures\Sample Pictures\Lighthouse.jpg" alt="Lighthouse" width="350px" height="350px" />
<div>
<h4>Implementation of Detail Tag in HTML5</h4>
</div>
</details>
<p><b>Note:</b> The <details> tag is currently only supported in Chrome and in Safari on Mac.</p>
</body>
</html>
Output
