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 are only understood by web browsers. This language is majorly in form of tags that are only relevant for a particular use and for a particular purpose in a given situation. A markup language is a consortium of web languages that annotates and manipulates text, instructions, and definitions in order for the web browser to clearly interpret what it means, such languages include HTML, XHTML, and XML. Amongst these 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 website elements. HTML has evolved over time from primitive versions to new versions of HTML5 progressively with different features over time. 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 implications to the browser in use. But for this scenario we shall narrow down to two such tags i.e <details> and <summary> in details.

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

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

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

Example of format on how to use them on text editor

<details>

<summary>Summary Text</summary >

Content goes here

</details>

Browser display:

When the above sequence of HTML tags is run on any web browser  such as Mozilla Firefox, Safari browser, or 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 the 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 examples of HTML codes to demonstrate the use of these tags are outlined below:

<details>

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

</details>

This is another example whose display is shown below.

Show/hide/collapse.

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

The <summary tag> is used for defined visible heading for the details element. The summary tag may be for hiding details by clicking, these tags are new concepts only introduced in HTML 5 to further define the logical structure of the table and give a caption to the details table. Both of these tags have given modern-day web pages the capability to display and hide data as per user requests.