Semantic HTML: Structure Checks and SEO

1. Problem

Formatting makes source easier to inspect; it does not establish ranking or indexing gains. This guide checks heading jumps and missing image alt attributes, separating executable hints from manual accessibility judgment and project conventions.

2. Minimal reproduction

This fragment contains h1→h3 across a section boundary and an image without alt. A decorative image uses empty alt. Inline image data avoids external image requests. Save it as HTML and run section five in a browser.

<main id="audit-fixture">
  <h1>Guide</h1>
  <section><h3>Skipped level</h3></section>
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">
</main>

3. Root cause

Read heading levels in document order. Passing a parent heading level down a tree misses common sibling or cross-container headings. Missing alt differs from alt="": decorative images generally need empty alternative text, while informative images need a useful description.

4. Recommendation

Choose headings for content relationships and CSS for appearance. Select semantic containers by purpose instead of replacing every div with section. This site uses one main h1 as a project convention. Neither that convention nor a DOM depth of 32 is a Google indexing or ranking requirement.

5. Complete code

The browser TypeScript below traverses descendant headings in document order and checks only missing alt attributes. It does not judge alt quality, rank pages, or validate all HTML. If the root itself is a heading or image, inspect its parent so it is included.

function auditHtmlSemantics(root: ParentNode): string[] {
  const issues: string[] = [];
  let previousLevel = 0;
  for (const heading of root.querySelectorAll('h1, h2, h3, h4, h5, h6')) {
    const level = Number(heading.localName.slice(1));
    if (previousLevel && level > previousLevel + 1) {
      issues.push(`heading-order: h${previousLevel} -> h${level}`);
    }
    previousLevel = level;
  }
  for (const image of root.querySelectorAll('img')) {
    if (!image.hasAttribute('alt')) issues.push('img-alt-missing');
  }
  return issues;
}

const root = document.getElementById('audit-fixture');
if (!root) throw new Error('Missing fixture');
console.log(auditHtmlSemantics(root));
// ['heading-order: h1 -> h3', 'img-alt-missing']

6. Incorrect approaches

Indentation cannot repair element semantics. Redundant alt text on decorative images adds noise. An arbitrary nesting limit is not a search standard. Parent-only heading tracking misses sibling jumps. b/i and strong/em express different meanings and are not mechanical substitutes.

7. Boundaries

Returning from h4 to h2 closes a subsection and is not a downward jump. Empty alt still requires checking image purpose. Hidden content, ARIA, shadow roots, frames, and dynamic content exceed this lightweight check. ARIA does not implement interaction behavior.

8. Verification

Expect heading-order and img-alt-missing for the reproduction. Change h3 to h2 and the first warning disappears; add suitable alt to the first image and the second disappears. The decorative image’s empty alt should not be flagged. Check reading order and alternatives with a keyboard and assistive technology afterward.

9. FAQ

Does one h1 guarantee Google indexing? No; it is one site content convention.

Is alt="" wrong? It is generally appropriate for decorative images; judge the actual purpose.

Is a return to a higher-level heading a jump? h4→h2 closes a subsection and is not the downward jump reported here.

10. Summary

Check heading order and missing alt with reproducible input, then assess meaning and accessibility manually. Do not claim ranking effects from DOM depth without evidence. Use /tools/format/html-formatter for source inspection; see /articles/html-formatter-inline-block-space-collapse and /articles/html-formatter-script-style-indentation-engine for separate formatting risks.