How to check the correctness of the header hierarchy…

There are several ways to check the correctness of header hierarchy:

Visual code analysis: A simple review of the HTML structure allows for quick identification of obvious errors, such as skipped levels (<h1> immediately after <h3>).

<!-- Incorrect hierarchy (no <h2>) -->
<h1>Main Title</h1>
<h3>Subheading</h3>

<!-- Correct hierarchy -->
<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

Using developer tools (DevTools): In the browser, you can view the DOM structure and clearly see the order of header tags. Many browsers have tabs for viewing the DOM tree.
Using HTML validators: Online validators (e.g., from W3C) analyze the entire HTML document and can point out issues with semantics and structure, including incorrect header usage. However, they do not guarantee checking the hierarchy within the entire document context.
Using browser extensions and specialized tools: There are extensions (e.g., SEO analyzers) and standalone programs that scan a webpage and provide a report on the header structure, levels, and nesting. Some visualize the hierarchy.

Writing scripts: You can use scripts (e.g., in JavaScript) to extract all header elements (<h1> - <h6>) and analyze their order in the document.

// Get all header elements
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

let currentLevel = 0;
let isCorrect = true;

headings.forEach(heading => {
  const level = parseInt(heading.tagName.substring(1)); // Extract level (1-6)

  if (currentLevel === 0) {
    // The first header should be h1
    if (level !== 1) {
      isCorrect = false;
      console.error('First header is not h1:', heading);
    }
  } else {
    // Next level should not be more than current+1
    if (level > currentLevel + 1) {
      isCorrect = false;
      console.error('Skipped header level:', heading, 'after level', currentLevel);
    }
  }
  currentLevel = level;
});

if (isCorrect) {
  console.log('Header hierarchy is likely correct.');
} else {
  console.error('Header hierarchy is broken.');
}

Manual testing with accessibility tools: Some accessibility tools (e.g., Lighthouse in Chrome DevTools) analyze header structure and can provide recommendations.
Viewing document structure in SEO tools: Many SEO platforms have features for analyzing header structure on a page.

It is important to remember that a "correct" hierarchy means sequential use of levels (h1, h2, h3...) without skips, except when a lower level (e.g., h4) appears after a higher level (e.g., h2 without an h3 in between), but the nesting should be logical. Usually, it is recommended to start with <h1> and then move to <h2>, <h3>, and so on, without skipping levels. There should only be one <h1> on the page.

How to check the correctness of the header hierarchy in HTML?