HTML summary Attribute

Introduction

The summary attribute in HTML was used to provide a text description of a <table> element—mainly for accessibility so screen readers could convey the table’s purpose and structure to users with visual impairments.

It is important to know that the summary attribute is obsolete in modern HTML. Do not use it in new projects. Instead, use <caption>, clear header cells, and ARIA techniques described in this guide.

Not the same as <summary>: The <summary> element inside <details> is a visible clickable heading—that is a tag, not this attribute.

What You’ll Learn

Purpose of summary

The main purpose of the summary attribute was to offer a textual description of a table’s content and structure. Assistive technologies could read this description before navigating the cells, helping users understand context.

Modern HTML practices replace this with the <caption> element (visible or visually hidden), descriptive <th> headers, and when needed, aria-describedby linking to explanatory paragraph text.

📝 Syntax

Add summary to a <table> with a descriptive string:

<table summary="Description of this table.">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Syntax Rules

• Valid only on <table> (not on <details> or other elements).
• Value is a plain text string describing the table.
• Obsolete — prefer <caption> for new work.
• Not rendered visually in browsers (intended for assistive tech).
• IDL property: HTMLTableElement.summary (also obsolete).
• Do not confuse with the <summary> element used in disclosure widgets.

💎 Values

The summary attribute accepts any string value that describes the table. The text should be concise yet informative:

• summary="Quarterly sales figures for 2023." — Purpose of the data.
• summary="Employee contact list sorted by department." — Structure hint.
• summary="Comparison of monthly expenses vs revenue." — Relationship between columns.

<table summary="This table lists the quarterly sales figures for the year 2023.">
  <thead>
    <tr><th>Quarter</th><th>Sales</th></tr>
  </thead>
  <tbody>...</tbody>
</table>

Applicable Elements

summary vs caption vs aria-describedby

Examples Gallery

Legacy summary on a sales table, dynamic JavaScript update, and the modern caption replacement.

<table summary="This table lists the quarterly sales figures for the year 2023.">
  <thead>
    <tr>
      <th>Quarter</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Q1</td><td>$10,000</td></tr>
    <tr><td>Q2</td><td>$15,000</td></tr>
    <tr><td>Q3</td><td>$20,000</td></tr>
    <tr><td>Q4</td><td>$25,000</td></tr>
  </tbody>
</table>

<table id="salesTable">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

<script>
  document.getElementById("salesTable").setAttribute(
    "summary",
    "Dynamically added summary describing the sales table."
  );
</script>

<p id="sales-desc">
  Figures are in USD. Totals exclude tax.
</p>

<table aria-describedby="sales-desc">
  <caption>Quarterly sales figures for 2023</caption>
  <thead>
    <tr><th>Quarter</th><th>Sales</th></tr>
  </thead>
  <tbody>...</tbody>
</table>

♿ Accessibility

• Do not use summary in new tables — It is obsolete and inconsistently supported by assistive technologies.
• Always use <caption> — Provides a proper accessible name for the table.
• Use <th scope> — Mark row and column headers so screen readers understand relationships.
• Add aria-describedby when needed — For longer notes about data sources or units.
• Test with screen readers — NVDA, JAWS, or VoiceOver confirm tables are understandable.

💡 Best Practices