HTML Tutorial: HTML Paragraphs
Text structure + spacing + colorful input & output examples
The HTML Paragraph is defined using the <p> tag.
Paragraphs are used to display text content on a webpage.
1️⃣ Basic Paragraph Example
INPUT (Colored Code):
<p>
This is my first paragraph.
</p>
<p>
This is another paragraph.
</p>
OUTPUT (Browser Result):
This is my first paragraph.
This is another paragraph.
✔️ Each <p> starts on a new line
✔️ Browsers automatically add space between paragraphs
2️⃣ Line Breaks (br Tag)
To break a line without starting a new paragraph, use: <br>
INPUT:
<p>
Hello
<br>
World
</p>
OUTPUT:
Hello
World
✔️ <br> creates a line break
✔️ It is an empty element (no closing tag)
3️⃣ Horizontal Line (hr Tag)
INPUT:
<p>
First Section
</p>
<hr>
<p>
Second Section
</p>
OUTPUT:
First Section
Second Section
✔️ <hr> adds a horizontal line
✔️ Used to separate content
4️⃣ Extra Spaces in HTML
HTML ignores extra spaces.
INPUT:
<p>
This has many spaces.
</p>
OUTPUT:
This has many spaces.
✔️ Browser shows only one space ✔️ HTML removes extra spacing automatically
5️⃣ Preformatted Text (pre Tag)
To keep spaces and line breaks exactly as written, use: <pre>
INPUT:
<pre>
Line 1
Line 2 (indented)
Line 3
</pre>
OUTPUT:
Line 1
Line 2 (indented)
Line 3
✔️ <pre> keeps original formatting
✔️ Useful for code display
🎯 Important Notes
- Use <p> for text blocks
- Use <br> for small line breaks
- Use <hr> to separate content
- Use <pre> to preserve formatting
🚀 What’s Next?
👉 HTML Styles
Next, you will learn how to:
- Change text color
- Change background color
- Change font size
- Style your webpage beautifully
Paragraphs make your content readable. Structure your text properly.