HTML Guide
An h2 heading cannot be placed inside a dt element.
The dt (definition term) element is only allowed to contain phrasing content, such as text or inline elements (e.g., span, a). Heading elements like h2, which are flow content, are not permitted within dt. Description lists should structure terms and their descriptions with dt for each term and dd for each description. To include headings within the flow of a description list, place the heading outside the dt and dd elements or directly before the list.
Invalid Example:
<dl>
<dt>
<h2>Heading Inside Term</h2>
Term Title
</dt>
<dd>Description of the term.</dd>
</dl>Valid Example — Place Heading Before the List:
<h2>Terms and Definitions</h2>
<dl>
<dt>Term Title</dt>
<dd>Description of the term.</dd>
</dl>Valid Example — Place Heading Outside dt:
<dl>
<dt>Term Title</dt>
<dd>
<h2>Description</h2>
Description of the term.
</dd>
</dl>
Always ensure that heading elements are not nested within dt elements to comply with HTML standards.
Learn more:
Related W3C validator issues
The <dl> element, used to create a definition lists that matches some terms with their definitions, has nesting issues related to <div> elements used with it.
To fix the W3C HTML Validator issue stating that a heading element like h1, h2, h3, h4, h5 or h6 must not appear as a descendant of the th element, you need to ensure that the HTML structure follows the specifications where a heading element (h1 to h6) is not placed within a table cell element like th.
Here’s an example of what might be causing the issue and how you can correct it:
Incorrect HTML:
<table>
<tr>
<th>Month</th>
<!-- Incorrect placement of h2 inside th -->
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>Corrected HTML:
<h2>Revenue per month</h2>
<table>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
<tr>
<td>January</td>
<td>$500</td>
</tr>
</table>In the corrected example, the issue is fixed by removing the h2 element from the th element. If you need to style the text inside the th element differently, you can achieve that via CSS without nesting heading elements inside table cell elements.