HTML Guide for h1

Consider using the “h1” element as a top-level heading only (all “h1” elements are treated as top-level headings by many screen readers and other tools).

h1
headings

The HTML <h1> to <h6> elements represent headings for the different sections of a document, where <h1> is the highest section and <h6> is the lowest. Headings are specially important on screen readers as they give a quick overview of the contents of the different sections in the web page, so although it’s technically correct (not an error) to use a <h1> in this way:

<section class="about">
  <article>
    <h1>Article heading</h1>
    <p>Lorem</p>
  </article>
</section>

this will raise a warning as it would be preferrable for example to leave the <h1> for the heading of the <section>, and <h2> for the heading of the article, like this:

<section class="about">
  <h1>About heading</h1>
  <article>
    <h2>Article heading</h2>
	<p>Lorem</p>
  </article>
</section>

The element “h1” must not appear as a descendant of the “th” element.

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>
    <th><h1>Revenue</h1></th> <!-- Incorrect placement of h1 inside th -->
  </tr>
  <tr>
    <td>January</td>
    <td>$500</td>
  </tr>
</table>

Corrected HTML:

<h1>Revenue per month</h1>
<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 h1 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.