Paragraphs, Breaks, Rules and pre
Most of the text on the web is ordinary prose, and four small elements handle nearly all of it. Each has a precise meaning, and mixing them up is one of the most common beginner habits, like pressing Enter twice in a word processor.
The rule
p for thoughts, br for lines, hr for topic shifts, pre for exact spacing.
<p> marks a paragraph: a block of text about one idea. Browsers put space above and below each one.
<p>The ferry leaves at seven.</p>
<p>Tickets are sold on board, cash only.</p><br> is a line break inside a piece of content, where the break itself carries meaning, as in a poem or an address. It is a void element.
<p>12 Lake Road<br>
Udaipur 313001<br>
Rajasthan</p><hr> marks a thematic break: a change of topic or a scene change in a story. Browsers draw it as a horizontal line, but its meaning is "new topic", not "draw a line". It is also void.
<pre> holds preformatted text. Inside it, spaces and line breaks are kept exactly as typed, and the text is usually shown in a monospaced font. It suits ASCII art, command output and code (for code, put a <code> element inside it).
<pre>
/\_/\
( o.o )
> ^ <
</pre>The shortcut
Ask "what is the break for?"
A new idea starts
Close the current
<p>and open a new one. Paragraphs, not stacked<br>tags.
The trap is <br><br> between blocks of text. If you need two breaks, you almost always need two paragraphs.
Why not just use <br> everywhere and skip paragraphs? Because a paragraph is a unit the browser, CSS and assistive technology all understand. You can style the space between paragraphs, screen readers can move from one to the next, and translation tools keep each one together. A wall of text broken only by <br> gives them nothing to hold on to.
Drills
Answer fast — trust the rule.
What is the right way to separate two ideas in body text?
Which content is the best fit for <br>?
What does <hr> mean?
Inside <pre>, what happens to three spaces in a row?
Remember
pfor each idea,brfor meaningful line endings,hrfor a topic change,prefor exact spacing.- Shortcut: ask what the break is for; if the answer is "space", use CSS.
- Trap:
<br><br>between blocks instead of separate paragraphs.