Text, headings, and paragraphs

Headings describe the outline

Use headings to name sections, not to achieve a font size. A useful page starts with a clear h1, then nests subsections without skipping levels for visual effect.

<main>
  <h1>Visit Harbor Park</h1>
  <p>The park is open from sunrise to sunset.</p>

  <section>
    <h2>Things to do</h2>
    <h3>Walking trail</h3>
    <p>The accessible loop is 1.2 miles.</p>
  </section>
</main>

Meaning survives restyling

Paragraphs use p. Important urgency may use strong; stress emphasis may use em. CSS can change appearance, but the element continues to communicate its role to reading tools and browser features.

Common mistakes

• Choosing h4 because it looks smaller.
• Using an empty paragraph for spacing.
• Wrapping unrelated sentences in one paragraph.

How browsers actually behave

Browsers expose heading rank through the accessibility tree and give paragraphs ordinary text semantics. Default styles make ranks look different, but those styles are not the definition of a heading. CSS can make an h2 small and a paragraph large without changing what navigation tools announce.

Some screen-reader users open a heading list or jump by heading rank to scan a page. Search, reader modes, and browser extensions also use document structure. An apparent visual hierarchy built from bold generic text is unavailable to those features.

Decisions and trade-offs

Use one clear page heading as the practical default, then choose subsection ranks by nesting. HTML does not prohibit multiple h1 elements, but a single page-level heading remains easier to review and more consistently understood. Do not skip a rank to get a visual size; style the correct rank.

Use strong for strong importance and em for stress that changes meaning. Use blockquote for an extended quotation and cite the source in nearby prose. Do not use semantic emphasis merely to make a decorative bold or italic style; a class is appropriate when the change carries no meaning.

Accessibility consequences

A well-written heading is an information scent, not just a label. “Verify the deployment” is more useful than “More” because it describes the section out of context. Keep headings concise, unique enough to distinguish sections, and followed by content that fulfills their promise.

Paragraph length and line length affect comprehension. Break ideas into coherent paragraphs, but do not create a separate paragraph for every sentence. At high zoom, headings must wrap without clipping or overlapping adjacent controls.

Failure diagnosis and fixes

• The heading list jumps from level two to four. Rank was chosen by size. Change the markup to reflect nesting and handle appearance in CSS.
• Several sections are all named “Overview.” Labels are not distinctive. Name the job or subject of each section.
• Blank space is announced strangely. Empty paragraphs were used for spacing. Remove them and apply CSS margins.
• A heading is visually hidden behind a sticky header after navigation. Anchor scrolling ignores the overlay. Add appropriate scroll margin and test keyboard focus.

Verify it

Read only the page title and headings in order. They should form a useful outline without the paragraph text. Inspect heading roles and levels in the accessibility tree, then navigate by heading with a screen reader. Disable CSS to confirm the same hierarchy remains. At 320 CSS pixels and 200% text zoom, check wrapping, anchor links, and sticky elements. Finally, search for empty paragraphs and headings used only as visual labels.

Exercise and next step

Write an outline for a recipe, event, or project page before adding any CSS. Read only the headings: they should still explain the page structure. Next, turn parts of that outline into descriptive links and ordinary site navigation.

Boundary of this lesson

A technically ordered outline does not guarantee clear writing. Headings must match the questions readers bring, paragraphs must support their claims, and sources must be placed where readers can evaluate them. Avoid manufacturing extra sections solely to hit a content-depth number. The depth gate is a regression floor; editorial review still decides whether every section earns its place and whether a shorter explanation would serve the task better.

Practice with an outline-only review

Export only the title and headings from a long page and give that outline to a reader who has not seen the design. Ask them to predict the page's purpose, section order, and next action. Revise vague or repetitive labels, then restore the paragraphs and confirm each section fulfills its heading. This test exposes structural problems that typography and card styling can otherwise conceal.