Paragraphs & Breaks
How HTML handles blocks of text: the paragraph, the in-content line break, the thematic divider, and why your extra spaces vanish.
What it is
The <p> element is a paragraph: a block of related text. It is block-level, so each paragraph starts on a new line and the browser puts space between one paragraph and the next for you.
Two smaller elements go alongside it. <br> forces a single line break inside content, and <hr> marks a thematic break, a shift from one topic or scene to the next. Both are void elements, so they have no closing tag.
Why it matters
Text is most of the web, and almost everyone's first surprise is that HTML does not respect the spacing they typed. Understanding how paragraphs and breaks actually behave saves hours of fighting the page to make gaps appear.
It also sets up a habit you will use everywhere: structure belongs in HTML, and spacing belongs in CSS. Paragraphs say what the content is; styling decides how far apart it sits.
How it works
Inside a paragraph, HTML collapses whitespace. Any run of spaces, tabs, and newlines in your source becomes a single space on the page. That is why you can indent and wrap your code neatly, and it all renders as clean flowing text, but it also means you cannot create gaps by pressing the spacebar or the Enter key.
Use <br> only when the line break is genuinely part of the content, like the lines of a postal address or a poem. Do not use it to push things apart or to separate paragraphs. For two distinct paragraphs, write two <p> elements and let spacing come from CSS.
<hr> represents a thematic break between sections of content, such as a change of subject. It is semantic, so it tells assistive technology that the topic shifts, not just that there is a line on screen. Its thickness, color, and spacing are all controlled with CSS.
Try it
On the left, a paragraph spread across messy indented lines, then an address with <br>, then an <hr>. On the right, what the browser actually renders.
HTML ignores extra spaces and newlines.
P. Sherman
42 Wallaby Way
Sydney
A new topic begins.
The five spaces and blank lines in the code collapsed to single spaces. The <br> kept the address on separate lines.
The messy spacing on the left collapses to clean text on the right.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
<p>groups a paragraph of related content and is block-level, so each one starts on a new line.- HTML collapses runs of spaces, tabs, and newlines into a single space; you cannot space things out with whitespace.
- Use
<br>only for in-content line breaks like addresses or poems, never for spacing or to split paragraphs. <hr>is a semantic thematic break (a topic or scene change); control its look and spacing with CSS.
Done with this concept?
Mark it complete to track your progress. No login needed.