Struct Summary 

pub struct Summary;

The <summary> element - represents a summary, caption, or legend for a <details> element.

Purpose

The <summary> element provides a visible heading or label for its parent <details> element. Users click the summary to toggle the visibility of the details content. Acts as the disclosure button/trigger. If omitted, browser provides a default label like “Details”.

Content Categories

• None (only valid as first child of <details>)

Permitted Content Model

• Phrasing content
• Optionally intermixed with heading content

Common Use Cases

• FAQ question labels
• Accordion section titles
• Toggle button labels
• Expandable content headings
• Show/hide trigger text

Key Attributes

• Global attributes only

Example

<!-- Simple summary -->
<details>
  <summary>Click to reveal answer</summary>
  <p>This is the answer to the question.</p>
</details>

<!-- Summary with icon/emoji -->
<details>
  <summary>📋 View Details</summary>
  <p>Additional information here.</p>
</details>

<!-- Summary with styled text -->
<details>
  <summary><strong>Important Notice</strong></summary>
  <p>Please read this important information carefully.</p>
</details>

<!-- Summary for FAQ -->
<details>
  <summary>How do I reset my password?</summary>
  <ol>
    <li>Click on "Forgot Password"</li>
    <li>Enter your email address</li>
    <li>Check your email for reset link</li>
  </ol>
</details>

<!-- Summary with heading -->
<details>
  <summary><h3>Chapter 1: Introduction</h3></summary>
  <p>Chapter content goes here...</p>
</details>

<!-- Summary with additional context -->
<details>
  <summary>
    Product Specifications
    <small>(click to expand)</small>
  </summary>
  <ul>
    <li>Weight: 2.5 kg</li>
    <li>Dimensions: 30cm x 20cm x 10cm</li>
    <li>Material: Aluminum</li>
  </ul>
</details>

<!-- Summary with custom styling -->
<details>
  <summary style="cursor: pointer; color: #0066cc;">
    ► Show More Information
  </summary>
  <p>Hidden content revealed on click.</p>
</details>

Accessibility

• Acts as a button control, automatically keyboard accessible
• Screen readers announce it as a button with expanded/collapsed state
• Use descriptive text that clearly indicates what will be revealed
• Ensure summary is meaningful when read alone
• Avoid generic text like “Click here” or “More”
• Browser typically adds a disclosure triangle/arrow indicator

WHATWG Specification

• 4.11.2 The summary element

Trait Implementations

impl HtmlElement for Summary

const TAG: &'static str = "summary"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl CanContain<Summary> for Details

impl<T: PhrasingContent> CanContain<T> for Summary

impl CanContain<Text> for Summary