HTML — Paragraphs

The <p> tag

A paragraph is any block of running text:

<p>HTML paragraphs always start on their own line.</p>
<p>The browser adds space after each one automatically.</p>

What the browser displays

HTML paragraphs always start on their own line.

The browser adds space after each one automatically.

(Two separate blocks with breathing room between them — no CSS required.)

You cannot nest a paragraph inside another paragraph:

<!-- Invalid -->
<p>Outer <p>Inner</p> paragraph</p>

Browsers will silently close the first <p> early and your layout will puzzle you. If you need content inside text flow, use inline elements like <strong> or <span>.

The golden rule of spacing

Pressing Enter in your code does not create a line break on the page.

Browsers collapse all consecutive whitespace — spaces, tabs, newlines — into a single space:

<p>
    Roses   are red,
        violets are blue.
</p>

What the browser displays

Roses are red, violets are blue.

(One continuous line! All that careful indentation vanished.)

This surprises every beginner. HTML treats your source-code formatting as irrelevant — it only cares about tags.

Forcing line breaks with <br>

When you truly need a break inside flowing text, use the empty element <br>:

<p>
    Roses are red,<br>
    violets are blue.<br>
    HTML ignores newlines,<br>
    so br tags must do.
</p>

What the browser displays

Roses are red, violets are blue. HTML ignores newlines, so br tags must do.

Legitimate uses of <br>:

• Poetry and song lyrics
• Addresses

<p>
    221B Baker Street<br>
    London<br>
    NW1 6XE
</p>

Anything else probably wants a different element.

Thematic breaks with <hr>

<hr> (horizontal rule) marks a shift in topic, not just decoration:

<h2>Chapter One: The Beginning</h2>
<p>It was a dark and stormy night...</p>

<hr>

<h2>Chapter Two: The Morning After</h2>
<p>Sunlight broke through...</p>

The browser draws a subtle line across the page. Screen readers announce it as a separator. Use it when a visual and meaningful break is needed — not as a random divider.

Preserving text exactly with <pre>

<pre> (preformatted) keeps every space, tab and newline exactly as written, rendered in monospace font:

<pre>
  function greet() {
      return "hello";
  }
</pre>

What the browser displays

  function greet() {
      return "hello";
  }

Perfect for:

• Code samples
• ASCII art
• Text that aligns in columns

<pre>
Name     Age
Ada      36
Grace    45
</pre>

Displays with columns intact. A regular <p> would collapse all of it into one mangled line.

Warning: inside <pre>, your indentation counts! Don't indent the tag itself to match surrounding code, or you'll get unwanted leading spaces:

<!-- Wrong: adds 4 leading spaces -->
    <pre>text</pre>

How browsers actually wrap text

Text wraps automatically at the edge of its container. Resize your browser window right now — paragraphs reflow word by word. This "fluid" behavior is fundamental to the web and why HTML pages adapt to any screen.

Long unbreakable strings (like URLs) can overflow their container; CSS (overflow-wrap) handles that problem when it appears.

Semantic alternatives worth knowing

Sometimes what looks like a paragraph is something more specific:

Content	Better element
A quote from someone	<blockquote>
A short inline quote	<q>
A postal address	<address>
Output of a program	<samp>
Keyboard input	<kbd>

<blockquote>
    Any sufficiently advanced technology is indistinguishable from magic.
</blockquote>

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

These give machines meaning — search engines and screen readers benefit again.

Common mistakes checklist

1. Stacking <br><br><br> for spacing between blocks — spacing belongs to CSS (margin). Use <p> elements and let styles handle gaps.
2. Nesting <p> inside <p> — invalid; browsers break it apart silently.
3. Fighting whitespace collapse with tricks like     — use <pre> where exact spacing matters, CSS everywhere else.
4. Using <hr> purely as decoration — it means "topic change".

Mini Practice

Build poem.html:

1. Title the page with an <h1>
2. Write a four-line poem using <br> for line breaks
3. Add an <hr> after the poem
4. Recreate a small piece of formatted text (like a code snippet or aligned list) using <pre>

Then try replacing your <br> approach: put each poem line in its own <p> and compare which feels more appropriate.

Next: comments — notes invisible to visitors →