HTML abbr Attribute

HTML abbr Attribute

The HTML abbr attribute provides an alternative label for a table header cell. It is used with the <th> element when a shorter or otherwise more useful label is needed when the header is referenced in another context.

Syntax

The abbr attribute is placed in the opening <th> tag. Its value is text that provides an alternative label for the table header.

<th abbr="Short Label">Full Header Label</th>

For example, a longer table heading can have a shorter alternative label:

<th abbr="Population">Estimated Population</th>

Attribute Value

The value is normally a concise alternative to the header cell's visible content. It can also provide an expansion or different wording when that is more useful.

Elements That Use the abbr Attribute

The abbr attribute is currently valid on the <th> element. It was also used on the <td> element in older HTML, but that use is now obsolete.

Using the abbr Attribute

The following table uses longer visible column headings with shorter alternative labels supplied by the abbr attribute.

<table>
  <thead>
    <tr>
      <th abbr="Product">Product Name</th>
      <th abbr="Price">Current Price</th>
      <th abbr="Stock">Items in Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Garden Gloves</td>
      <td>$12.95</td>
      <td>24</td>
    </tr>
    <tr>
      <td>Watering Can</td>
      <td>$18.50</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

The visible headings remain unchanged. The abbr values provide alternative labels that user agents may use when referring to those header cells in other contexts.

abbr Attribute vs. <abbr> Element

The abbr attribute and the <abbr> element have different purposes even though they share the same name.

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

<p><abbr title="HyperText Markup Language">HTML</abbr> is used to structure web pages.</p>

The first example uses the abbr attribute on a table header. The second uses the separate <abbr> element to mark an abbreviation in text.

Common Mistakes

Do not use the abbr attribute simply to create a tooltip. The attribute supplies an alternative label for a <th> element and does not provide the same behavior as the title attribute.

<!-- Correct -->
<th abbr="Qty">Quantity Available</th>

Do not confuse the abbr attribute with the <abbr> element. The attribute belongs on a table header cell, while the element marks an abbreviation or acronym in document content.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The abbr attribute on the <th> element is widely supported in current core browsers. Its former use on <td> is obsolete and should not be used in modern HTML.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the abbr Attribute

Edit the abbr values in the example and compare them with the visible table headings. The attribute does not normally change how the table looks because it provides an alternative label rather than visual styling.

Summary

The HTML abbr attribute provides an alternative label for a <th> table header cell. Its value is text that can be used when the header is referenced in another context. The attribute does not normally change the table's visible appearance and should not be confused with the separate <abbr> element used for abbreviations and acronyms.