HTML Paragraphs Explained - The
Tag and Text Formatting
We have learned page structure and headings. Now we will go a step deeper and learn how to display actual text in page content.
The foundation of all this is the paragraph tag <p> - one of the most used HTML tags ever.
The <p> Tag
<p> is short for Paragraph.
It is used to define a complete block of text - like a paragraph in a book or article.
<p>This is a first text paragraph. It can contain multiple sentences.</p>
<p>This is a second paragraph separate from the first.</p>
<p>And this is the third. Each paragraph starts on a new line automatically.</p>
The browser automatically adds blank space above and below each paragraph - without you writing anything. This makes text easy to read by default.
Simple rule: Each independent idea or text block = a separate <p> paragraph. Do not put all text into one paragraph.
Spacing in HTML - A Very Important Rule
This is one of the most confusing points for beginners. Listen carefully: The browser completely ignores extra blank lines and extra spaces you write in the code.
<!-- What you write in the code -->
<p>
This text
is on multiple lines
with many spaces.
</p>
What appears in the browser:
This text is on multiple lines with many spaces.The browser merges all spaces and line breaks into a single space. This is not a bug - it is intended HTML behavior. To override it, you use special tags we will see now.
<p>. Use a new <p> paragraph for each independent text block.
The <br> Tag - Line Break
Sometimes you need to move to a new line inside the same paragraph - like when writing an address or a poem.
That is where <br> (short for Line Break) comes in.
<p>
DevArabi Website<br>
To learn programming<br>
from scratch
</p>
Result in the browser:
DevArabi Website
To learn programming
from scratch
Notice that <br> is an empty element - it does not need a closing tag and contains no content.
It is simply an instruction to the browser: "start a new line here".
<br> to add spacing between paragraphs. If you want space between two paragraphs, use a separate <p> or CSS. The <br> tag is only for line breaks inside the same paragraph.
The <hr> Tag - Horizontal Divider
<hr> is short for Horizontal Rule.
It draws a horizontal line across the full width of the page to visually separate sections.
<h2>Section One - HTML Introduction</h2>
<p>HTML is the language for building web pages...</p>
<hr>
<h2>Section Two - CSS Basics</h2>
<p>CSS is used to style web pages...</p>
Like <br>, it is also an empty element - it does not need a closing tag.
You can later change its look with CSS (color, thickness, style).
The <pre> Tag - Preserved Text Formatting
<pre> is short for Preformatted text.
It is used when you want text to appear exactly as you typed it - preserving spaces and line breaks.
<pre>
This text
will appear
with its original spacing
exactly as you wrote it here!
</pre>
The browser displays <pre> content in a monospace font and respects every space and line break.
It is often used to display code snippets inside web pages.
Comparison Between the Four Tags
| Tag | Function | When to Use It? |
|---|---|---|
<p> |
A full text paragraph | For each independent text block - the main usage |
<br> |
Line break inside a paragraph | Addresses, poems, or any text that needs lines inside one paragraph |
<hr> |
Horizontal divider line | Visually separate one topic from another |
<pre> |
Text with original formatting | Code snippets, text that needs precise spacing |
Full Practical Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Text Page</title>
</head>
<body>
<h1>Recipe: Chocolate Cake</h1>
<p>An easy and quick recipe that can be prepared in under an hour. Suitable for beginners in cooking.</p>
<hr>
<h2>Ingredients</h2>
<p>
2 cups flour<br>
1 cup sugar<br>
3/4 cup cocoa<br>
2 eggs<br>
1 cup milk
</p>
<hr>
<h2>Preparation Method</h2>
<p>Mix the dry ingredients first, then add the eggs and milk gradually. Bake in the oven at 180 C for 30 minutes.</p>
</body>
</html>
Frequently Asked Questions - FAQ
Can <p> paragraphs be nested inside each other?
No. You cannot put a paragraph inside another paragraph. The code <p><p>text</p></p> is invalid and the browser will behave unpredictably. Each paragraph is always independent.
How many times can I use <br> on a page?
There is no limit. But overusing <br> instead of separate paragraphs is bad practice. If you find yourself using 3 or more in a row - you probably should use <p> or CSS instead.
What is the difference between paragraph spacing and line break spacing?
<p> adds larger space above and below the text - it looks like a separate paragraph in a book.
<br> just moves to a new line without extra space - like pressing Enter in Word.
Can <hr> be styled with CSS?
Yes. You can change its color, thickness, and width easily with CSS. For example:
hr { border: 2px solid blue; width: 50%; }
<strong>, <em>, and <mark> that improve the look of your text and highlight important parts.