🌱BeginnerText Content
Paragraphs and Line Breaks
Write text content with <p>, control line breaks with <br>, and add thematic breaks with <hr>.
Overview
The most common way to add text content to an HTML page is with the <p> (paragraph) element. Each <p> creates a block of text with automatic spacing above and below it like pressing Enter twice in a word processor.
If you need a line break within a paragraph (not a new paragraph), use <br> a void element with no closing tag. Use it sparingly: multiple <br> tags in a row to create space is a CSS job, not an HTML one.
The <hr> element draws a horizontal rule (a visual line) that signals a thematic break a shift in topic within a section. Like <br>, it is a void element. Browsers render it as a horizontal line, but CSS can completely restyle it.
Key Points
- •<p> wraps blocks of text; it is a block element with margin above and below
- •Do not use empty <p></p> tags just to add vertical space use CSS margin instead
- •<br> inserts a line break inside a paragraph without starting a new one
- •<br> is a void element no closing tag: write <br> not <br></br>
- •<hr> adds a horizontal thematic divider between sections
- •Whitespace (spaces, newlines) inside HTML is collapsed to a single space by browsers
Examples
A basic paragraph
<p>This is a paragraph of text. Browsers add margin above and below it automatically.</p>
<p>This is a second paragraph. Notice the visual gap between them.</p>Line break inside a paragraph with <br>
<p>
123 Main Street<br>
Springfield, IL 62701<br>
United States
</p>An address is a perfect use case for <br> lines are related, so a new <p> is wrong.
Horizontal rule as a thematic divider
<p>This section discusses topic A.</p>
<hr>
<p>This section shifts to a completely different topic B.</p><hr> signals a thematic break, not just a visual line.
How browsers collapse whitespace
<!-- Multiple spaces and newlines become one space -->
<p>Hello World</p> <!-- renders: "Hello World" -->
<p>
Line one
Line two
</p> <!-- renders: "Line one Line two" -->To preserve whitespace, use the <pre> element or CSS white-space property.
Common Mistakes
- Using <br><br> for visual spacing use CSS margin/padding on the elements instead
- Writing <br></br> <br> is void and takes no closing tag
- Putting block elements (like <h2> or <div>) inside a <p> invalid HTML
Note
Never use empty paragraphs (<p> </p>) or multiple <br> tags just to push content down. That is CSS's job add margin to the surrounding elements instead.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4