HTML Guide

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>

Learn more:

W3C: Headings and sections

Related W3C validator issues

Article lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all articles.

The <article> element can be used to define complete, self-contained compositions of a document, for example blog posts. Consider using a heading element (any of <h2> to </h6>) to present each article.

Example:

<h1>Our blog</h1>
<article>
  <h2>How to validate accessibility</h2>
  <p>Use Rocket Validator for a in-depth scan</p>
</article>
<article>
  <h2>How to monitor sites for accessibility</h2>
  <p>Define schedules in Rocket Validator</p>
</article>

Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.

The <section> element can be used to define sections of a document, like chapters, tabbed content, etc. Consider using a heading element (any of <h2> to </h6>) to present each section. Example:

<h1>All about guitars</h1>
<section>
  <h2>Guitar types</h2>
  <p>Acoustic, electric, classical... we have them all!</p>
</section>
<section>
  <h2>Amplifiers</h2>
  <p>Analog, digital, portable...</p>
</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.