HTML / Intermediate

Keep heading order meaningful

Headings should describe document structure, not only match a visual size.

Why this matters

The production reason.

Headings are document structure, not just font sizes.

Skipping levels or using headings for visual emphasis makes pages harder to scan for users and search engines.

Choose the heading level based on the section hierarchy, then style it however the design needs.

Copy-ready example

<main>
  <h1>Image Optimization Guide</h1>
  <section>
    <h2>Compression Settings</h2>
    <h3>Quality Range</h3>
  </section>
</main>

How this applies outside a perfect demo, including frameworks, CMS platforms, stores, and builder workflows.

HTML: One clear h1 per page is still a strong practical default.

CMS editors: Do not choose h3 because it looks smaller; style the h2 instead.

SEO: Headings should match search intent and page sections.

Explore other stacks

Move from this HTML note into related HTML, CSS, Next.js, JavaScript, React, WordPress, and performance lessons.

Pre-render dynamic pages at build time instead of on every request to cut TTFB.

Local state avoids unnecessary parent renders and keeps component intent obvious.

Cancel outdated browser requests so fast UI changes do not render old data.

Fluid spacing keeps layouts responsive without a forest of breakpoint overrides.

Sanitize on input, escape on output, and keep theme templates strict about user content.

Oversized images are still the easiest way to lose LCP before users see anything.