The <p> element represents a paragraph of prose. Browsers render paragraphs as block-level boxes with default vertical margins—exact spacing belongs to CSS, not additional empty paragraphs.
When to use p
- Continuous textual explanations, intros, disclaimers, narrative body copy.
- Each distinct prose block gets its own
prather than stuffing unrelated sentences into one giant paragraph unless editorial style demands it.
Line breaks with br
<br> inserts a soft line break inside the same paragraph—appropriate for poetry lines, formatted addresses, or legal disclaimers where breaks carry meaning. It is not a substitute for paragraph spacing or vertical rhythm.
Example — paragraphs vs line breaks vs rule
<p>First prose block.</p>
<p>Warehouse address:<br>
123 Freight Ave<br>
Portland, OR</p>
<p>Second topic resumes here.</p>
<hr>
<p>After a thematic shift…</p>Rendered output
First prose block.
Warehouse address:
123 Freight Ave
Portland, OR
Second topic resumes here.
After a thematic shift…
Thematic breaks with hr
<hr> represents a thematic shift between paragraphs—use when the break carries semantic meaning. Decorative separators belong in CSS backgrounds or borders, not gratuitous rules.
Spacing anti-patterns
- Stacking multiple
brelements to emulate margins. - Empty
<p></p>or paragraphs containing only - Putting block-level elements inside
p—the parser will implicitly close the paragraph when it sees them.
Preformatted text
Use <pre> when whitespace fidelity matters (ASCII art, shell snippets paired with code). Ordinary paragraphs should rely on normal flow and CSS for wrapping.
What developers mistakenly ship
- Dummy paragraphs (
<p> </p>) purely for spacing—maintainers delete them unknowingly and layout shifts; spacing belongs in CSS on real elements. - Giant unbroken strings without wrapping hints—fine in
pre; in normal text they overflow on mobile unless CSS handles overflow. - Raw user HTML pasted into prose without escaping—stored XSS starts here; templating frameworks must encode by default.
When to reconsider br vs a new paragraph
If two lines form separate thoughts, readers benefit from paragraph separation (p) and consistent vertical rhythm (margin in CSS). Reserve br for addresses, poems, legal lines, or CSV-like rows—not general layout.
Important interview questions and answers
- Q: What is the purpose of ``?
A: It forces standards mode so browsers use modern layout/parsing behavior instead of legacy quirks mode. - Q: Why is semantic HTML important in interviews and production?
A: It improves accessibility, SEO, maintainability, and reduces ARIA/JS work by using native element behavior. - Q: What is the difference between `head` and `body`?
A: `head` stores metadata/resources for the document, while `body` contains user-visible content.
Tip: Use <p> for paragraphs—not double <br> for spacing.