References

Beginner-friendly references for web development, with live, editable examples.

The HTML abbr attribute

Attribute All modern browsers Updated
Quick answer

The HTML abbr attribute, used on the <th> element, provides a short, abbreviated label for a header cell that assistive technology can announce instead of the full heading text.

Overview

The abbr attribute gives a table header cell a short abbreviated label. It is used on the <th> element.

It works alongside the other table attributes: colspan and rowspan for spanning cells, and scope and headers for connecting data cells to their headers. These attributes are central to making data tables understandable to screen-reader users.

Syntax

<th abbr="Qty">Quantity ordered</th>

Values

Value
A short string.

Best practices

  • Set scope on every <th> so screen readers associate headers with cells.
  • Use colspan/rowspan to merge cells rather than nesting tables.
  • For complex tables, link cells to headers with the headers attribute and matching ids.
  • Add a <caption> so the table has an accessible name.

Accessibility

Screen readers may announce a header cell repeatedly while reading a column; abbr lets them use a concise label (e.g. "Qty") instead of a long heading, making large tables less tedious to navigate.

Frequently asked questions

What does the abbr attribute do?
Gives a table header cell a short abbreviated label.
How do I merge table cells?
Use colspan to span columns and rowspan to span rows.
How do I make a data table accessible?
Use <th> headers with scope, add a <caption>, and link cells to headers with headers in complex tables.
Which elements use the abbr attribute?
It is an element-specific attribute, used on the <th> element.
accept