HTML headings and paragraphs: expose a readable outline without styling tricks

Use it for a real task

A finance page starts with one page heading and then splits review and export work into peer sections. Choose heading levels from the document hierarchy, not from font size. CSS may change their appearance while the DOM keeps the same reading order for keyboard and assistive-technology users.

<main>
  <h1>Receipt operations</h1>
  <section aria-labelledby="review-heading">
    <h2 id="review-heading">Review</h2>
    <p>Check the batch total before approval.</p>
  </section>
  <section aria-labelledby="export-heading">
    <h2 id="export-heading">Export</h2>
    <p>Download only approved receipts.</p>
  </section>
</main>

What the markup guarantees

A section with an accessible heading has a clear purpose. The h2 elements are siblings under the h1; neither is a smaller heading merely because it looks smaller on screen.

Cost and limits

Semantic headings cost no script or network request. Misusing them can make long pages harder to scan, particularly when a styled div looks like a heading but is absent from heading navigation.

Common Mistakes

• Do not skip levels to get a preferred font size.
• Do not use an empty heading as a spacer.
• Keep DOM order meaningful before visual reordering.

Connected lessons

• HTML document skeleton: declare language, encoding, and a real title
• HTML article and section: mark standalone content and named subdivisions
• HTML landmarks: give navigation, main content, and page edges clear owners

Related: HTML title and metadata: distinguish document identity from page copy.

Related: HTML lists: choose ordered, unordered, or term-description structure.

Related: HTML landmarks: give navigation, main content, and page edges clear owners.

Related: HTML article and section: mark standalone content and named subdivisions.

Continue with HTML inline text: emphasis, importance, code, and abbreviations.

Continue with HTML br and hr: separate a line from a change of subject.

Continue with HTML ordered-list numbering: keep source order and displayed rank aligned.

Form and type styling

• CSS text-wrap balance: improve short headings without truncation

Related CSS decisions

• CSS text-wrap: pretty: spend line-breaking work where copy merits it

Related CSS decisions

• CSS baseline alignment: line up mixed text by its reading edge