Main content and heading structure in server HTML and rendered DOM

Headings organize content for readers and assistive technology, while the main text gives the URL its purpose. The report compares server HTML with the rendered DOM, counts heading levels, checks accessible text and visibility, and estimates meaningful visible content.

At a glance

Structure should explain the page even before styling

Use one clear main topic, descriptive headings in a logical hierarchy, and a main landmark around the primary content. Deliver essential text in robust HTML and use JavaScript to enhance it rather than make it disappear when rendering fails.

  • Write headings for meaning, not font size or keyword repetition.
  • Keep the main page topic and visible H1 aligned.
  • Use nested heading levels to describe real subsections.
  • Make critical content present in server HTML or reliably rendered and visible.
01

A useful heading hierarchy

The H1 commonly names the page’s primary subject. H2 elements introduce major sections, with H3 and deeper levels used when the content truly nests. Multiple H1 elements are valid HTML, but a single obvious main heading is usually easier to maintain and understand.

Do not use an empty heading, hide headings purely for keyword insertion, or choose levels only to obtain a visual size. CSS controls appearance; heading markup communicates structure.

02

Interpret content and rendering differences

  • Low server text An app shell may require JavaScript before the main content becomes discoverable to a renderer.
  • Large DOM difference Hydration or client requests materially change what users and crawlers can see.
  • Missing main landmark The primary content is harder for assistive technology to identify and skip to.
  • Hidden or empty headings The visual and semantic outline may disagree, often because of templates or responsive variants.
03

Improve substance before word count

A word estimate is diagnostic, not a minimum. A concise tool, product, or contact page can satisfy its purpose with little text, while a long page can still be repetitive or unhelpful.

Clarify the user task, add the facts needed to complete it, remove boilerplate, and connect related pages through descriptive links. Verify that the important text is visible and equivalent in server and rendered views.

Action checklist

Make the page understandable from its outline

  1. 01Identify one primary page purpose and visible main heading.
  2. 02Correct empty headings and unjustified level jumps.
  3. 03Wrap the unique primary content in a main landmark.
  4. 04Compare server HTML and rendered text for critical information.
  5. 05Review quality and completeness rather than chasing a word threshold.

Official references

The technical recommendations in this guide are aligned with these primary sources.