HTML Guides for h5

An h5 element cannot be placed inside an element that has role="button" because heading elements are not allowed as descendants of buttons.

Screen readers and other assistive technologies treat buttons as flat, interactive controls. When a heading appears inside a button, the heading semantics are either lost or conflict with the button role. The user expects a button to contain a short label, not a document structure element. The HTML spec and ARIA authoring practices both restrict the content model of elements with role="button" to phrasing content only, which excludes headings (h1 through h6).

If the text inside the button needs to look like a heading visually, apply CSS styling to a span or directly to the button itself. The visual appearance and the semantic meaning are separate concerns.

HTML examples

Invalid: heading inside a button role

<divrole="button"tabindex="0">

<h5>Subscribe now</h5>

</div>

Valid: styled span instead of a heading

<divrole="button"tabindex="0">

<spanclass="button-label">Subscribe now</span>

</div>

.button-label{

font-size:0.83em;

font-weight: bold;

}

If the element is actually meant to function as a heading and not as a button, remove the role="button" and use a proper button or a element nearby instead.

The th element is specifically designed to act as a header cell within a table. It already carries implicit heading semantics — screen readers announce th content as a header when navigating table cells. When you place an h5 (or any h1–h6) inside a th, you're creating a conflict: the content is simultaneously a table header and a document section heading. This breaks the document's outline structure and creates confusing behavior for assistive technologies, which may announce the content as both a table header and a section heading.

The HTML specification restricts the content model of th to "flow content, but with no header, footer, sectioning content, or heading content descendants." Heading elements (h1 through h6) fall under heading content, so placing any of them inside a th is invalid.

This issue typically arises when developers want the text inside a th to look like a heading — larger, bolder, or styled differently. The correct approach is to use CSS to style the th content directly, rather than wrapping it in a heading element.

How to Fix It

1. Remove the heading element from inside the th.
2. Keep the text content directly inside the th.
3. Use CSS to apply any desired visual styling to the th element.
4. If the heading is meant to describe the entire table (not just a column), move it outside the table or use the <caption> element.

Examples

❌ Incorrect: Heading inside a th

<table>

<tr>

<th><h5>Product</h5></th>

<th><h5>Price</h5></th>

</tr>

<tr>

<td>Widget</td>

<td>$9.99</td>

</tr>

</table>

This triggers the validation error because h5 elements are nested inside th elements.

✅ Correct: Plain text inside th, styled with CSS

<table>

<tr>

<thclass="table-heading">Product</th>

<thclass="table-heading">Price</th>

</tr>

<tr>

<td>Widget</td>

<td>$9.99</td>

</tr>

</table>

<style>

.table-heading{

font-size:1.1em;

font-weight: bold;

text-transform: uppercase;

}

</style>

The th elements already convey header semantics. CSS handles the visual presentation without introducing invalid markup.

✅ Correct: Using <caption> for a table title

If the heading was meant to describe the table as a whole, use <caption> instead:

<table>

<caption>Monthly Revenue</caption>

<tr>

<th>Month</th>

<th>Revenue</th>

</tr>

<tr>

<td>January</td>

<td>$500</td>

</tr>

</table>

✅ Correct: Heading placed before the table

If you need a document-level heading that introduces the table, place it outside:

<h5>Revenue per Month</h5>

<table>

<tr>

<th>Month</th>

<th>Revenue</th>

</tr>

<tr>

<td>January</td>

<td>$500</td>

</tr>

</table>

This keeps the document outline clean and avoids nesting headings inside table cells. The same rule applies to all heading levels — h1, h2, h3, h4, h5, and h6 are all equally invalid inside th (and td) elements.