Edit markup, watch the outline

Fix the skipped <h3> and the second <h1>.

<h1>Heading hierarchy guide</h1>       <!-- one H1, with the keyword -->
<h2>Common mistakes</h2>
  <h3>Skipping levels</h3>               <!-- H2 → H3, never H1 → H3 -->
  <h3>Faking headings</h3>
<h2>What is a heading outline?</h2>    <!-- AEO: the question as a heading -->
<p>The nested list of a page's headings, in order.</p>  <!-- answer right after -->

Looks like vs is a heading

Press Next heading in each pane, like a screen reader.

<h2 class="title-md">Why it matters</h2>
<h3 class="title-sm">Screen readers</h3>

.title-md { font-size: 16px; font-weight: 650; }
.title-sm { font-size: 14px; font-weight: 600; }

Reorder and relevel

Drag a handle or use arrow keys; chevrons relevel.

const hs = [...document.querySelectorAll("h1, h2, h3, h4, h5, h6")];
const issues = [];
if (hs.filter((h) => h.tagName === "H1").length !== 1) issues.push("Want exactly one H1");
let prev = 0;
for (const h of hs) {
  const level = Number(h.tagName[1]);
  if (level > prev + 1) issues.push(`${h.tagName} "${h.textContent}" skips a level`);
  prev = level;
}

Why it matters, pros and cons