<summary> - Disclosure Summary

The `<summary>` Element

Interactive HTML5

The <summary> element defines the visible heading or label for a <details> disclosure widget. It serves as the clickable element that toggles the visibility of the details content. When clicked, it expands or collapses the associated details element.

Quick Example

<details>
<summary>Click to reveal the answer</summary>
<p>The answer is 42! According to "The Hitchhiker's Guide to the
Galaxy," this is the answer to the Ultimate Question of Life, the
Universe, and Everything.</p>
</details>

<details>
<summary>📋 View document metadata</summary>
<dl>
  <dt>Author:</dt>
  <dd>Jane Smith</dd>
  <dt>Created:</dt>
  <dd>January 15, 2025</dd>
  <dt>Modified:</dt>
  <dd>January 20, 2025</dd>
</dl>
</details>

Result

Interactive code playground requires JavaScript. Here's the code:

<details>
<summary>Click to reveal the answer</summary>
<p>The answer is 42! According to "The Hitchhiker's Guide to the
Galaxy," this is the answer to the Ultimate Question of Life, the
Universe, and Everything.</p>
</details>

<details>
<summary>📋 View document metadata</summary>
<dl>
  <dt>Author:</dt>
  <dd>Jane Smith</dd>
  <dt>Created:</dt>
  <dd>January 15, 2025</dd>
  <dt>Modified:</dt>
  <dd>January 20, 2025</dd>
</dl>
</details>

Syntax

<details>
  <summary>Summary text goes here</summary>
  <!-- Hidden content -->
</details>

Attributes

Element-Specific Attributes

The <summary> element has no element-specific attributes.

Global Attributes

The <summary> element supports all global attributes.

Requirements and Behavior

Must Be First Child

The <summary> element must be the first child of <details>:

✅ Correct
❌ Incorrect

<details>
  <summary>Summary first</summary>
  <p>Content follows</p>
</details>

<details>
  <p>This content comes first</p>
  <summary>Summary should be first!</summary>
</details>

Default Summary

If you omit <summary>, browsers display a default label:

<!-- Without summary -->
<details>
<p>Content without a custom summary. The browser shows
"Details" or a localized equivalent.</p>
</details>

<!-- With custom summary -->
<details>
<summary>Custom Label</summary>
<p>Content with a descriptive custom summary.</p>
</details>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Without summary -->
<details>
<p>Content without a custom summary. The browser shows
"Details" or a localized equivalent.</p>
</details>

<!-- With custom summary -->
<details>
<summary>Custom Label</summary>
<p>Content with a descriptive custom summary.</p>
</details>

Common Use Cases

Rich Content in Summary

Summaries can contain any phrasing content, including formatting and icons:

<details>
<summary>
  <strong>Important:</strong>
  <em>Read before proceeding</em> ⚠️
</summary>
<p>Make sure you've backed up your data before making changes.</p>
</details>

<details>
<summary>
  <span style="color: #3b82f6;">●</span>
  Status: <code>Active</code>
</summary>
<p>Service is running normally. Last checked: 2 minutes ago.</p>
</details>

<details>
<summary>
  🎨 <span style="font-variant: small-caps;">Design Assets</span>
</summary>
<ul>
  <li>Logo.svg</li>
  <li>Brand-colors.css</li>
  <li>Icons.png</li>
</ul>
</details>

<style>
details {
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

summary {
  cursor: pointer;
  user-select: none;
}

summary:hover {
  color: #3b82f6;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<details>
<summary>
  <strong>Important:</strong>
  <em>Read before proceeding</em> ⚠️
</summary>
<p>Make sure you've backed up your data before making changes.</p>
</details>

<details>
<summary>
  <span style="color: #3b82f6;">●</span>
  Status: <code>Active</code>
</summary>
<p>Service is running normally. Last checked: 2 minutes ago.</p>
</details>

<details>
<summary>
  🎨 <span style="font-variant: small-caps;">Design Assets</span>
</summary>
<ul>
  <li>Logo.svg</li>
  <li>Brand-colors.css</li>
  <li>Icons.png</li>
</ul>
</details>

<style>
details {
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

summary {
  cursor: pointer;
  user-select: none;
}

summary:hover {
  color: #3b82f6;
}
</style>

Images in Summary

<details>
<summary>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%233b82f6'/%3E%3C/svg%3E"
       alt=""
       style="vertical-align: middle; margin-right: 0.5em;">
  User Profile Settings
</summary>
<form>
  <label>
    Display Name: <input type="text" value="Jane Doe">
  </label>
  <br>
  <label>
    Email: <input type="email" value="jane@example.com">
  </label>
</form>
</details>

<style>
details {
  max-width: 400px;
  padding: 1em;
  border: 1px solid #ddd;
  border-radius: 8px;
}

summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1em;
}

form {
  margin-top: 1em;
}

label {
  display: block;
  margin: 0.75em 0;
}

input {
  width: 100%;
  padding: 0.5em;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 0.25em;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<details>
<summary>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%233b82f6'/%3E%3C/svg%3E"
       alt=""
       style="vertical-align: middle; margin-right: 0.5em;">
  User Profile Settings
</summary>
<form>
  <label>
    Display Name: <input type="text" value="Jane Doe">
  </label>
  <br>
  <label>
    Email: <input type="email" value="jane@example.com">
  </label>
</form>
</details>

<style>
details {
  max-width: 400px;
  padding: 1em;
  border: 1px solid #ddd;
  border-radius: 8px;
}

summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1em;
}

form {
  margin-top: 1em;
}

label {
  display: block;
  margin: 0.75em 0;
}

input {
  width: 100%;
  padding: 0.5em;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 0.25em;
}
</style>

Counters and Badges

<details>
<summary>
  Notifications
  <span class="badge">5</span>
</summary>
<ul class="notification-list">
  <li>New message from John</li>
  <li>Your order has shipped</li>
  <li>Meeting reminder: 2:00 PM</li>
  <li>System update available</li>
  <li>New follower: @developer</li>
</ul>
</details>

<details>
<summary>
  Shopping Cart
  <span class="badge badge-success">3 items</span>
</summary>
<ul class="notification-list">
  <li>Wireless Mouse - $29.99</li>
  <li>USB-C Cable - $12.99</li>
  <li>Laptop Stand - $49.99</li>
</ul>
</details>

<style>
details {
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

summary {
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge {
  background: #ef4444;
  color: white;
  padding: 0.25em 0.6em;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: bold;
}

.badge-success {
  background: #10b981;
}

.notification-list {
  margin: 1em 0 0 0;
  padding: 0;
  list-style: none;
}

.notification-list li {
  padding: 0.5em;
  border-bottom: 1px solid #f3f4f6;
}

.notification-list li:last-child {
  border-bottom: none;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<details>
<summary>
  Notifications
  <span class="badge">5</span>
</summary>
<ul class="notification-list">
  <li>New message from John</li>
  <li>Your order has shipped</li>
  <li>Meeting reminder: 2:00 PM</li>
  <li>System update available</li>
  <li>New follower: @developer</li>
</ul>
</details>

<details>
<summary>
  Shopping Cart
  <span class="badge badge-success">3 items</span>
</summary>
<ul class="notification-list">
  <li>Wireless Mouse - $29.99</li>
  <li>USB-C Cable - $12.99</li>
  <li>Laptop Stand - $49.99</li>
</ul>
</details>

<style>
details {
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

summary {
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge {
  background: #ef4444;
  color: white;
  padding: 0.25em 0.6em;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: bold;
}

.badge-success {
  background: #10b981;
}

.notification-list {
  margin: 1em 0 0 0;
  padding: 0;
  list-style: none;
}

.notification-list li {
  padding: 0.5em;
  border-bottom: 1px solid #f3f4f6;
}

.notification-list li:last-child {
  border-bottom: none;
}
</style>

Styling the Summary

Custom Disclosure Markers

<details class="plus-minus">
<summary>Expand for more information</summary>
<p>This uses a plus sign that becomes a minus when opened.</p>
</details>

<style>
.plus-minus summary {
  list-style: none;
  cursor: pointer;
  padding: 1em;
  background: #f3f4f6;
  border-radius: 4px;
  position: relative;
  padding-left: 2.5em;
}

.plus-minus summary::-webkit-details-marker {
  display: none;
}

.plus-minus summary::before {
  content: '+';
  position: absolute;
  left: 0.75em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  font-weight: bold;
  color: #3b82f6;
  width: 1em;
  text-align: center;
}

.plus-minus[open] summary::before {
  content: '−';
}

.plus-minus summary:hover {
  background: #e5e7eb;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<details class="plus-minus">
<summary>Expand for more information</summary>
<p>This uses a plus sign that becomes a minus when opened.</p>
</details>

<style>
.plus-minus summary {
  list-style: none;
  cursor: pointer;
  padding: 1em;
  background: #f3f4f6;
  border-radius: 4px;
  position: relative;
  padding-left: 2.5em;
}

.plus-minus summary::-webkit-details-marker {
  display: none;
}

.plus-minus summary::before {
  content: '+';
  position: absolute;
  left: 0.75em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  font-weight: bold;
  color: #3b82f6;
  width: 1em;
  text-align: center;
}

.plus-minus[open] summary::before {
  content: '−';
}

.plus-minus summary:hover {
  background: #e5e7eb;
}
</style>

Interactive Summary Styles

<details class="card-style">
<summary>
  <span class="title">Premium Features</span>
  <span class="subtitle">Click to view all features</span>
</summary>
<ul>
  <li>✓ Unlimited storage</li>
  <li>✓ Priority support</li>
  <li>✓ Advanced analytics</li>
  <li>✓ Custom branding</li>
</ul>
</details>

<style>
.card-style {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s;
}

.card-style:hover {
  border-color: #3b82f6;
}

.card-style summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5em;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.card-style summary::-webkit-details-marker {
  display: none;
}

.card-style .title {
  display: block;
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 0.25em;
}

.card-style .subtitle {
  display: block;
  opacity: 0.9;
  font-size: 0.9em;
}

.card-style ul {
  margin: 0;
  padding: 1.5em;
  list-style: none;
}

.card-style li {
  padding: 0.5em 0;
  border-bottom: 1px solid #f3f4f6;
}

.card-style li:last-child {
  border-bottom: none;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<details class="card-style">
<summary>
  <span class="title">Premium Features</span>
  <span class="subtitle">Click to view all features</span>
</summary>
<ul>
  <li>✓ Unlimited storage</li>
  <li>✓ Priority support</li>
  <li>✓ Advanced analytics</li>
  <li>✓ Custom branding</li>
</ul>
</details>

<style>
.card-style {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s;
}

.card-style:hover {
  border-color: #3b82f6;
}

.card-style summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5em;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.card-style summary::-webkit-details-marker {
  display: none;
}

.card-style .title {
  display: block;
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 0.25em;
}

.card-style .subtitle {
  display: block;
  opacity: 0.9;
  font-size: 0.9em;
}

.card-style ul {
  margin: 0;
  padding: 1.5em;
  list-style: none;
}

.card-style li {
  padding: 0.5em 0;
  border-bottom: 1px solid #f3f4f6;
}

.card-style li:last-child {
  border-bottom: none;
}
</style>

JavaScript Interaction

While the summary element works natively, you can enhance it with JavaScript:

<details id="trackable">
<summary id="mySummary">Track clicks on this summary</summary>
<p>This details element tracks how many times it's been toggled.</p>
</details>

<div style="margin-top: 1em; padding: 1em; background: #f3f4f6;
          border-radius: 4px;">
Click count: <strong id="count">0</strong>
</div>

<script>
const summary = document.getElementById('mySummary');
const countDisplay = document.getElementById('count');
let count = 0;

summary.addEventListener('click', (e) => {
  count++;
  countDisplay.textContent = count;
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<details id="trackable">
<summary id="mySummary">Track clicks on this summary</summary>
<p>This details element tracks how many times it's been toggled.</p>
</details>

<div style="margin-top: 1em; padding: 1em; background: #f3f4f6;
          border-radius: 4px;">
Click count: <strong id="count">0</strong>
</div>

<script>
const summary = document.getElementById('mySummary');
const countDisplay = document.getElementById('count');
let count = 0;

summary.addEventListener('click', (e) => {
  count++;
  countDisplay.textContent = count;
});
</script>

Preventing Toggle

You can prevent the details from toggling under certain conditions:

<details id="conditional">
<summary id="protectedSummary">
  🔒 Requires confirmation
</summary>
<p>This content is protected. You need to confirm to view it.</p>
</details>

<script>
const details = document.getElementById('conditional');
const summary = document.getElementById('protectedSummary');

summary.addEventListener('click', (e) => {
  if (!details.open) {
    const confirmed = confirm('Are you sure you want to view this?');
    if (!confirmed) {
      e.preventDefault();
    }
  }
});
</script>

<style>
#conditional summary {
  cursor: pointer;
  padding: 1em;
  background: #fef3c7;
  border: 2px solid #f59e0b;
  border-radius: 4px;
  font-weight: 600;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<details id="conditional">
<summary id="protectedSummary">
  🔒 Requires confirmation
</summary>
<p>This content is protected. You need to confirm to view it.</p>
</details>

<script>
const details = document.getElementById('conditional');
const summary = document.getElementById('protectedSummary');

summary.addEventListener('click', (e) => {
  if (!details.open) {
    const confirmed = confirm('Are you sure you want to view this?');
    if (!confirmed) {
      e.preventDefault();
    }
  }
});
</script>

<style>
#conditional summary {
  cursor: pointer;
  padding: 1em;
  background: #fef3c7;
  border: 2px solid #f59e0b;
  border-radius: 4px;
  font-weight: 600;
}
</style>

Advanced Patterns

Multi-Column Summary

<details class="table-style">
<summary>
  <span class="col">Product</span>
  <span class="col">Price</span>
  <span class="col">Status</span>
</summary>
<div class="details-content">
  <p><strong>Description:</strong> Premium wireless headphones
  with active noise cancellation.</p>
  <p><strong>Features:</strong> 30-hour battery, Bluetooth 5.0,
  Fast charging</p>
</div>
</details>

<style>
.table-style {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.table-style summary {
  list-style: none;
  cursor: pointer;
  padding: 1em;
  background: #f9fafb;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
}

.table-style summary::-webkit-details-marker {
  display: none;
}

.table-style .col {
  flex: 1;
}

.table-style .col:nth-child(1)::before {
  content: 'Headphones Pro';
  font-weight: normal;
  display: block;
  margin-top: 0.25em;
}

.table-style .col:nth-child(2)::before {
  content: '$299';
  font-weight: normal;
  color: #059669;
  display: block;
  margin-top: 0.25em;
}

.table-style .col:nth-child(3)::before {
  content: '✓ In Stock';
  font-weight: normal;
  color: #3b82f6;
  display: block;
  margin-top: 0.25em;
}

.table-style .details-content {
  padding: 1em;
}

.table-style summary:hover {
  background: #f3f4f6;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<details class="table-style">
<summary>
  <span class="col">Product</span>
  <span class="col">Price</span>
  <span class="col">Status</span>
</summary>
<div class="details-content">
  <p><strong>Description:</strong> Premium wireless headphones
  with active noise cancellation.</p>
  <p><strong>Features:</strong> 30-hour battery, Bluetooth 5.0,
  Fast charging</p>
</div>
</details>

<style>
.table-style {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.table-style summary {
  list-style: none;
  cursor: pointer;
  padding: 1em;
  background: #f9fafb;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
}

.table-style summary::-webkit-details-marker {
  display: none;
}

.table-style .col {
  flex: 1;
}

.table-style .col:nth-child(1)::before {
  content: 'Headphones Pro';
  font-weight: normal;
  display: block;
  margin-top: 0.25em;
}

.table-style .col:nth-child(2)::before {
  content: '$299';
  font-weight: normal;
  color: #059669;
  display: block;
  margin-top: 0.25em;
}

.table-style .col:nth-child(3)::before {
  content: '✓ In Stock';
  font-weight: normal;
  color: #3b82f6;
  display: block;
  margin-top: 0.25em;
}

.table-style .details-content {
  padding: 1em;
}

.table-style summary:hover {
  background: #f3f4f6;
}
</style>

Summary with Actions

<details class="action-summary">
<summary>
  <span class="text">Document Actions</span>
  <button onclick="event.stopPropagation(); alert('Edit clicked!');"
          class="btn">
    ✏️ Edit
  </button>
</summary>
<div class="actions-panel">
  <button>📥 Download</button>
  <button>📤 Share</button>
  <button>🗑️ Delete</button>
</div>
</details>

<style>
.action-summary {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  max-width: 400px;
}

.action-summary summary {
  list-style: none;
  cursor: pointer;
  padding: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9fafb;
}

.action-summary summary::-webkit-details-marker {
  display: none;
}

.action-summary .text {
  font-weight: 600;
}

.action-summary .btn {
  padding: 0.5em 1em;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.action-summary .btn:hover {
  background: #2563eb;
}

.actions-panel {
  padding: 1em;
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}

.actions-panel button {
  padding: 0.75em 1em;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
}

.actions-panel button:hover {
  background: #e5e7eb;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<details class="action-summary">
<summary>
  <span class="text">Document Actions</span>
  <button onclick="event.stopPropagation(); alert('Edit clicked!');"
          class="btn">
    ✏️ Edit
  </button>
</summary>
<div class="actions-panel">
  <button>📥 Download</button>
  <button>📤 Share</button>
  <button>🗑️ Delete</button>
</div>
</details>

<style>
.action-summary {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  max-width: 400px;
}

.action-summary summary {
  list-style: none;
  cursor: pointer;
  padding: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f9fafb;
}

.action-summary summary::-webkit-details-marker {
  display: none;
}

.action-summary .text {
  font-weight: 600;
}

.action-summary .btn {
  padding: 0.5em 1em;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
}

.action-summary .btn:hover {
  background: #2563eb;
}

.actions-panel {
  padding: 1em;
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}

.actions-panel button {
  padding: 0.75em 1em;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
}

.actions-panel button:hover {
  background: #e5e7eb;
}
</style>

Accessibility

ARIA and Semantic Markup

The summary element is inherently accessible:

<details>
<summary aria-describedby="help-text">
  Account Settings
</summary>
<p id="help-text" class="sr-only">
  Expand to view and modify your account preferences
</p>
<form>
  <label>
    Username: <input type="text" value="user123">
  </label>
</form>
</details>

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

details {
  padding: 1em;
  border: 1px solid #ddd;
  border-radius: 4px;
}

summary {
  cursor: pointer;
  font-weight: 600;
}

label {
  display: block;
  margin-top: 1em;
}

input {
  margin-top: 0.5em;
  padding: 0.5em;
  width: 100%;
  max-width: 300px;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<details>
<summary aria-describedby="help-text">
  Account Settings
</summary>
<p id="help-text" class="sr-only">
  Expand to view and modify your account preferences
</p>
<form>
  <label>
    Username: <input type="text" value="user123">
  </label>
</form>
</details>

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

details {
  padding: 1em;
  border: 1px solid #ddd;
  border-radius: 4px;
}

summary {
  cursor: pointer;
  font-weight: 600;
}

label {
  display: block;
  margin-top: 1em;
}

input {
  margin-top: 0.5em;
  padding: 0.5em;
  width: 100%;
  max-width: 300px;
}
</style>

Focus Management

<details>
<summary class="focus-visible">
  Click or use keyboard
</summary>
<p>This summary has clear focus indicators for keyboard users.</p>
</details>

<style>
.focus-visible {
  cursor: pointer;
  padding: 1em;
  border-radius: 4px;
  background: #f9fafb;
}

.focus-visible:focus {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

.focus-visible:focus:not(:focus-visible) {
  outline: none;
}

.focus-visible:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<details>
<summary class="focus-visible">
  Click or use keyboard
</summary>
<p>This summary has clear focus indicators for keyboard users.</p>
</details>

<style>
.focus-visible {
  cursor: pointer;
  padding: 1em;
  border-radius: 4px;
  background: #f9fafb;
}

.focus-visible:focus {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

.focus-visible:focus:not(:focus-visible) {
  outline: none;
}

.focus-visible:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}
</style>

Best Practices

Descriptive text: Make summary content clear and actionable
Keyboard accessible: Ensure all functionality works via keyboard
Focus indicators: Provide visible focus styles
Screen reader friendly: Use ARIA when additional context helps
Avoid nesting interactive elements: Can confuse assistive tech
Test thoroughly: Verify with actual screen readers

Browser Support

Excellent Support

The <summary> element is supported in all modern browsers:

Chrome: 12+ (2011)
Firefox: 49+ (2016)
Safari: 6+ (2012)
Edge: 79+ (2020)
Opera: 15+ (2013)
Mobile: Widely supported

Note: Must be used inside <details>. Behavior outside of <details> is undefined.

<details> - Parent disclosure widget
<dialog> - Modal dialogs
<button> - Generic interactive buttons

Best Practices

Always use with <details>: Required parent element
Must be first child: Place summary before other content
Make it descriptive: Users should know what will be revealed
Keep it concise: Summary should be brief and scannable
Style focus states: Essential for keyboard users
Avoid complex interactivity: Keep nested controls simple
Test keyboard navigation: Enter/Space should toggle
Consider mobile: Ensure touch targets are adequate

Specifications

Learn More:

<summary> - Disclosure Summary

The <summary> Element

Quick Example

Syntax

Attributes

Element-Specific Attributes

Global Attributes

Requirements and Behavior

Must Be First Child

Default Summary

Common Use Cases

Rich Content in Summary

Images in Summary

Counters and Badges

Styling the Summary

Custom Disclosure Markers

Interactive Summary Styles

JavaScript Interaction

Preventing Toggle

Advanced Patterns

Multi-Column Summary

Summary with Actions

Accessibility

ARIA and Semantic Markup

Focus Management

Best Practices

Browser Support

Related Elements

Best Practices

Specifications

The `<summary>` Element