Headings, paragraphs, and inline text formatting

Headings and paragraphs make up the majority of real page content, and they're also two of the most commonly misused elements — chosen for how they look by default rather than what they actually mean. This part covers using them correctly, which matters directly for both the SEO and accessibility parts later in this series.

Headings: <h1> through <h6> as a real outline

<h1>Bright Leaf Coffee</h1>
<h2>Our Subscriptions</h2>
<h3>Gift Subscription</h3>
<h3>Ethiopian Light Roast</h3>
<h2>How Shipping Works</h2>

Headings aren't a way to make text bigger — they define a real, hierarchical outline of the page, the same way chapter and section headings organize a book. <h1> is the single most important heading (usually the page's main topic), <h2> marks major sections within it, <h3> marks subsections within an <h2>, and so on. Search engines and screen readers both use this exact hierarchy to understand a page's structure — a screen reader user can jump directly between headings the same way a sighted user visually scans a page for the right section.

The rule that gets broken most often: one real <h1> per page

<!-- correct: one h1, the actual topic of this page -->
<h1>Ethiopian Light Roast</h1>
<h2>Tasting Notes</h2>
<h2>Brewing Recommendations</h2>

<!-- wrong: skipping straight from h1 to h3, no h2 in between -->
<h1>Ethiopian Light Roast</h1>
<h3>Tasting Notes</h3>

Using multiple <h1> elements or skipping heading levels (jumping from <h1> straight to <h3>) doesn't crash anything, but it breaks the outline the hierarchy is supposed to represent — the same structural gap the SEO series covers directly. Choosing a heading level because "it looks the right size" rather than because it's the correct level in the real outline is the single most common heading mistake, and it's easy to avoid once headings are treated as structure first, styling second — actual visual size is CSS's job, covered later in this series, not the heading level's.

Paragraphs: <p> for real blocks of prose

<p>
  Bright Leaf Coffee roasts in small batches every week, so what
  ships is never more than a few days off the roaster.
</p>

Every real block of body text belongs in a <p> element — not separated with <br> tags, which describe a line break within a single block of content, not a new paragraph. A screen reader announces paragraph boundaries distinctly; a page built from <br>-separated lines instead of real <p> elements loses that boundary entirely.

Inline text formatting: meaning, not just style

<p>
  Orders ship <strong>within 24 hours</strong> of roasting — this is
  <em>not</em> a marketing claim, it's how the subscription model works.
</p>

• <strong> marks text of real importance (by default, bold) — not "text I want bold," but text a reader should genuinely weigh more heavily
• <em> marks text with real emphasis, changing how a sentence should be read (by default, italic)
• <b> and <i> exist too, and only apply visual styling with no semantic meaning attached — genuinely rare to have a real use case for them over <strong>/<em>

A quick note on <br> and <hr>

<br> forces a line break within the same block of content (a mailing address, a poem) — genuinely different from starting a new paragraph. <hr> marks a real thematic break between sections of content, rendering as a horizontal line by default — not a generic "I want a divider line here" tool, though it's commonly reached for that way.

Next: lists — ordered, unordered, and description lists — for the parts of a real page that are genuinely list-shaped, like a subscription plan's feature list.