Deatails and Summary HTML Tag

The <summary> tag used to add to a visible heading of the <details> tag. The heading is clickable to view/hide the details. The <summary> tag is new in HTML5 and it has opening and closing ends.The <summary> tag should be the first child tag for the <details> tag or we can say that <summary> tag should put as first tag inside <details> tag,So we assume that <summary> tag and <details> tag are family tag.
<details> tag is the wrapper for all the content we want to show or hide, and <summary> contains summary and Heading of the section.
The open attribute is by default and there is no closed attribute for <details> tag.
Generally when we want to make a interactive widget that provides a way of hide and show of our content,it require a long javascript coding but by using HTML5 <details> and <summary> tags we can create this toggle feature with just a few lines of HTML and without any JavaScript.So these HTML5 tags make webpage attractive and provide a way to save space in webpage.
Inside <details>, we can put any type of content taht we want.


You can understand use of <details> and <summary> tags by a simple example:-

e.g.

<!DOCTYPE html>
<html>
<head>
<title>Deatails tag< and <Summary>/title>
</head>
<body>

<details>
<summary>Show/Hide</sumary>
<p>Indianwebschool is india's leading web development learning portal .</p>
</details>

<details>
<summary>How To Start Blogging Learn by Blogger Video(please click here)</summary>
<p>Blogger Getting Started Guide by Google </p>
<iframe width="560" height="315" src="//www.youtube.com/embed/NXx4zbid45Q"></iframe>
</details>

<details>
<summary>indianwebschool</summary>
<p> Designed by Ndal Gurjar. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company indianwebschool.</p>
</details>

</body>
</html>


Result:-
Show/Hide

Indianwebschool is india's leading web development learning portal .



How To Start Blogging Learn by Blogger Video(please click here)

Blogger Getting Started Guide



indianwebschool

Designed by Ndal Gurjar. All Rights Reserved.

All content and graphics on this web site are the property of the company indianwebschool.



e.g.2

<!DOCTYPE html>
<html>
<head>
<title>Deatails tag< and <Summary>/title>
</head>
<body>
<details>
<summary>Sections</summary>
<p><strong>The body tag</strong></p>
<p><strong>The airticle tag</strong></p>
<p><strong>The section tag</strong></p>
<p><strong>The nav tag</strong></p>
<details>
<summary>Related documents</summary>
<ul>
<li><p><strong>The aside tag</strong></p></li>
<li><p><strong>The h1,h2,h3,h4,h5,h6 tag</strong></p></li>
<li><p><strong>The header tag</strong></p></li>
<li><p><strong>The footer tag</strong></p></li>
<li><p><strong>The address tag</strong></p></li>
</ul>
</details>
</details>
</body>
</html>


Result:-
Sections

The body tag

The airticle tag

The section tag

The nav tag

Related documents

  • The aside tag

  • The h1,h2,h3,h4,h5,h6 tag

  • The header tag

  • The footer tag

  • The address tag





1 comment: