Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <summary> tag.

Use of <summary> tag

The <summary> tag is used to act as a visible part or heading where the user can show or hide the additional information of a <details> element when click.
The <summary> element must be contained inside the <details> element as a first-child.

Display:Block

Example of <summary> tag

    <details>
       <summary> This is visible sentence. </summary>
       <p>This paragraph will be hidden as long as you click the above sentence. </p>
    <details>

Supported Browsers.

Tag
<summary> 12.0 or higher Not supported 48.0 or higher 6.0 or higher 15.0 or higher

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<details>
<summary> Show hidden elements </summary>
<p>This paragraph will be hidden as long as you click the above sentence.
</p>
</details>
</body>
</html>

Output

Show hidden elements

This paragraph will be hidden as long as you click the above sentence.

Click here, to learn about <details> tag.

More Reference


<summary> tag is new in HTML5.
<summary> tag is used to define the visible section of <details> tag which can be clicked to hide or show the elements.
Using of <details> tag is useful in the copyright notice or other bid information of your website.

Example

Why choose Us?

Our website has dedicated a lot to the HTML learning from ultimate beginner to pro.

Copyright Notice

All the contents are maintained under the Logic Maker Studio.
Copyright © 2018||All Rights Reserved.

Read this

You should know that the <details> tag and <summary> tag are not supported in Internet Explorer.So, if you are aware of using JavaScript,it is better which is supported in all browsers and has more professional appearance.

Default CSS properties of <summary> tag

summary {
    display:block;
}