Learn HTML – Part 54 – summary Tag – Details Caption

The HTML summary tag is used to define a visible heading or caption for a details element.

Users click the summary text to expand or collapse the hidden content.

What is the summary Tag?

The summary element acts as a clickable label for the details element.

It controls the visibility of the content inside details.

Basic Syntax

<details>

   <summary>Click to expand</summary>

   Hidden content here

</details>

Example – summary with details

<details>

   <summary>What is HTML?</summary>

   HTML stands for HyperText Markup Language.

</details>

Output:

Default Behavior

• The summary text is always visible
• Clicking it toggles the content inside details
• It usually displays a small arrow indicator

Example – Multiple Sections

<details>

   <summary>HTML</summary>

   HTML is the structure of web pages.

</details>

<details>

   <summary>CSS</summary>

   CSS is used for styling.

</details>

Output:

Why Use summary?

• Provides a clear heading for expandable content
• Improves user experience
• Helps organize information
• Works without JavaScript

The summary tag defines the clickable heading for a details element.

Common Mistakes Beginners Make

• Using summary outside details
• Not providing meaningful summary text
• Adding too much content inside summary

Conclusion

The HTML summary tag provides a clickable caption for expandable content inside the details element.

It is useful for creating interactive sections like FAQs and collapsible content blocks.

What’s Next?

Now that you understand the summary tag, the next step is learning about the dialog tag, which is used to create modal dialogs.

Next: Learn HTML – Part 55 – dialog Tag – Modal Dialog →

Series: Learn HTML Series