How to use Details and Summary HTML Elements

Html (Hypertext markup language) is one of the scripting languages used by web developers to write codes that is only understood by web browsers. This language is majorly in form of tags that is only relevant for particular use and for particular purpose at given situation. A mark up language is consortium of web languages that annotates, manipulates text, instructions, definitions in order for the web browser to clearly interprets what it means, such languages include HTML, XHTML, XML. Amongst this languages HTML is the most widely used by web designers/web developers as the major markup language to communicate to different web browsers well developing/coding web site elements. HTML has evolved overtime from primitive versions to new version of HTML5 progressively with different features overtime. HTML codes are rich in abstraction language called tags with different graphical elements, frames etc that range alphabetically from “a” to “x” in which each has different implication to the browser in use. But for this scenario we shall narrow down to two such tags i.e <details> and <summary> in details.

This two elements in most cases are used in implementation of user collapsible widgets.

Let’s delve on how these key elements are used in details by web developers in order to implement different user important features.

<details>: This  special html tag mainly used by web developers to show what the user can view/expand or collapse on demand. It is used hand in hand with <summary> tag to collapse string of elements into user readable format

Example of format on how to use them on text editor


<summary>Summary Text</summary >

Content goes here


Browser display:

When the above sequence of html tags are run on any web browser  such as Mozilla firefox, safari browser, Opera mini browser the below message is displayed:

“Content goes here”

When the user clicks the lone area displayed,  a given content of information is displayed for user to view. If you would like the widget to open when the page loads modify the codes as shown below:

<details open>………………..<details open>.

The browser will toggle the open attribute for you as the user opens and closes the browser.

Therefore what are the usage of <details> and <summary> HTML elements or tags?

Any extra information you would like to give about a topic. For example, you can use these tags for marking up order data within an e commerce application. In the following example, the user is presented with an order number that, when clicked, will reveal the full information about the order. Further example of HTML codes to demonstrate  use of this tags are outlined below:


<summary> Show/hide/collapse</summary>


This is another example whose display as shown below.


In advance coding graphical user interfaces are used to display this kind of content such that the user can easily interact with this contents.

The <summary tag> use for defined visible heading for details element. The summary tag may be for hide details by clicking, this tags are new concepts only introduced in html 5 to further define the logical structure of table and giving caption to details table. Both of this tags has given modern day webpages capability to display and hide data as per user requests.

Awards & Recognitions

© Copyright 2012-2020. All Rights Reserved by Primoz InfoTech.
A division of Primoz InfoTech Pvt. Ltd.