Headings, Paragraphs & Text Formatting

Text is the heart of most web pages. This chapter covers the elements that structure headings and paragraphs, plus the inline tags that add emphasis — and, just as importantly, when not to use them.

Headings: <h1> to <h6>

HTML provides six heading levels. Think of them as an outline of a book, not as six different font sizes:

<h1>The complete guide to bread</h1>          <!-- Level 1: page topic -->
  <h2>Choosing flour</h2>                     <!-- Level 2: major section -->
    <h3>Whole wheat vs. refined</h3>          <!-- Level 3: subsection -->
    <h3>Storage tips</h3>
  <h2>Kneading techniques</h2>
    <h3>The stretch-and-fold method</h3>

Expected output: browsers render <h1> largest and <h6> smallest, with bold weight and vertical spacing around each.

Rules for a healthy heading hierarchy

• Exactly one <h1> per page — it should match the page's main topic (and usually the title tag).
• Never skip levels (do not jump from <h2> to <h4>) — screen reader users navigate by heading level, and crawlers use headings to understand content structure.
• Never choose a heading for its size. Want small bold text? That is a job for CSS on a <p> or <span>.

Paragraphs: <p>

Each block of prose goes in its own <p>. Browsers add space before and after paragraphs automatically.

<p>Sourdough relies on a live starter culture instead of commercial yeast.</p>
<p>A well-kept starter can live for decades — some bakeries treasure theirs.</p>

Line breaks and thematic breaks

<p>Open daily<br>7 AM – 9 PM</p>      <!-- br = forced line break (rare) -->

<hr>                                    <!-- hr = thematic divider between sections -->

Use <br> only inside genuinely multi-line text such as an address or a poem — never to fake paragraph spacing.

Inline text semantics

These tags give words meaning, not just appearance:

<p>Never store <strong>bananas</strong> in the fridge — the peel turns black.</p>
<p>The recipe <em>actually</em> gets faster with practice.</p>
<p>Today's deal: <del>₹400</del> <ins>₹299</ins></p>
<p>Results: <mark>3 of 4 tests passed</mark>.</p>

<blockquote cite="https://developer.mozilla.org">
  <p>HTML is the backbone of the web."</p>
  <footer>— <cite>MDN Web Docs</cite></footer>
</blockquote>

Real-life use case

A recipe page uses this exact pattern: one <h1> for the dish name, <h2> for Ingredients and Instructions, <h3> for each step group, <strong> for critical warnings ("do not skip resting the dough"), <del>/<ins> for price changes, and <mark> to highlight the step the reader is on.

Common mistakes

• Multiple <h1>s — confuses both SEO and assistive technology.
• Using <b> and <i> — they carry no meaning (purely visual). Reach for <strong>/<em> unless the text is truly merely bold/italic.
• Empty paragraphs for spacing — use CSS margins instead.
• Skipping heading levels for styling — never use <h4> just because it looks smaller.

Best practices

• Write headings like a table of contents — someone scanning only the headings should understand your page.
• Keep paragraphs short (2–4 sentences) for readability on phones.
• Include your primary keyword naturally in the <h1> and one <h2>.

What's next?

Connect your pages with Links & Navigation, or add visuals with Images & Figures.