HTML Tutorial

<summary> Tag in HTML | Creating Collapsible Sections

The <summary> tag in HTML is used in conjunction with the <details> tag to create a collapsible section. The <summary> tag provides a summary or heading for the content inside the <details> tag, which can be expanded or collapsed by the user.

Key Points on <summary> Tag:

The <summary> tag is a child element of the <details> tag.
It acts as the clickable title or summary of the content in a <details> element.
When clicked, it toggles the visibility of the content inside the <details> tag.
The <details> element, along with the <summary> tag, provides an interactive way to present additional information without taking up too much space on the page.
If no content is inside the <details> tag, the <summary> tag can be used as a standalone clickable element.

Syntax of <summary> Tag:

Syntax Example

<details>
            <summary>Summary of Content</summary>
            Content goes here...
        </details>

Example of <summary> Tag in HTML:

This example demonstrates how to use the <summary> tag with the <details> tag to create a collapsible section.

Code Example

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>HTML Summary Example</title>
        </head>
        <body>
        
            <details>
                <summary>Click to View More Information</summary>
                <p>This is the detailed content that is hidden until the summary is clicked. It can be any kind of information or data you want to hide initially.</p>
            </details>
        
        </body>
        </html>

Output

Click to View More Information

This is the detailed content that is hidden until the summary is clicked. It can be any kind of information or data you want to hide initially.

The <summary> tag is a useful element when paired with the <details> tag for creating interactive, collapsible sections. It allows users to reveal additional content only when they choose to, which helps in keeping the web page clean and uncluttered while offering detailed information when necessary.