HTML Paragraphs — p, br and hr Tags
Learn the HTML paragraph tag <p>, line break <br>, horizontal rule <hr>, and text alignment — with live examples, browser previews, and SEO tips.
- What are Paragraphs?
- The <p> Tag
- Line Break <br>
- Horizontal Rule <hr>
- Text Alignment
- Whitespace in HTML
- Styling Paragraphs
- Related Lessons
- Try It Yourself
- FAQ
What are HTML Paragraphs?
In HTML, text content is organized into paragraphs using the <p> tag. A paragraph is a block-level element — it always starts on a new line and browsers automatically add some spacing above and below it.
Paragraphs are one of the most commonly used elements in HTML. Every article, blog post, and webpage uses them to organize readable text content. You learned about HTML Elements in Lesson 4 — the paragraph tag is one of the most important elements you'll use daily.
The <p> Tag
The <p> tag defines a paragraph of text. It is a non-void element — it needs both an opening <p> and a closing </p> tag. Browsers automatically add a margin before and after each paragraph.
<!DOCTYPE html> <html lang="en"> <body> <p>This is the first paragraph. HTML paragraphs start on a new line.</p> <p>This is the second paragraph. Notice the automatic spacing between them.</p> <p>This is the third paragraph. Each starts fresh on its own line.</p> </body> </html>
This is the first paragraph. HTML paragraphs start on a new line.
This is the second paragraph. Notice the automatic spacing between them.
This is the third paragraph. Each starts fresh on its own line.
The <br> Line Break Tag
The <br> tag inserts a single line break inside content. Unlike <p>, it does NOT add extra spacing — it just moves to the next line within the same paragraph. It is a void element — no closing tag needed.
Use <br> when you need a new line within a paragraph, like in a poem, address, or a short list of items.
<p> TipsInLearning<br> Himachal Pradesh, India<br> Web Development Tutorials </p> <!-- Great for poems too --> <p> Roses are red,<br> Violets are blue,<br> HTML is fun,<br> And so are you! </p>
TipsInLearning
Himachal Pradesh, India
Web Development Tutorials
Roses are red,
Violets are blue,
HTML is fun,
And so are you!
p vs br — when to use which? Use <p> for new paragraphs of text (with spacing). Use <br> only when you need to break a line within the same block of content — like addresses or poems.
The <hr> Horizontal Rule Tag
The <hr> tag draws a horizontal line across the full width of the page. It is used to visually separate different sections of content. Like <br>, it is a void element — no closing tag needed.
In HTML5, <hr> represents a thematic break — a change in topic, scene, or section in a document.
<h2>Chapter 1: Introduction</h2> <p>This is the first chapter of the story.</p> <hr> <!-- Divides chapter 1 from chapter 2 --> <h2>Chapter 2: The Journey</h2> <p>The second chapter begins here.</p> <!-- Custom styled hr with CSS --> <hr style="border: 2px solid #7c3aed; border-radius: 4px;">
Chapter 1: Introduction
This is the first chapter of the story.
Chapter 2: The Journey
The second chapter begins here.
↑ Styled purple hr
Text Alignment
You can align paragraph text using the CSS text-align property. In older HTML, the align attribute was used, but it is deprecated in HTML5 — always use CSS instead.
Deprecated: <p align="center"> is old HTML and no longer recommended. Use style="text-align: center;" or a CSS class instead.
<p style="text-align: left;">Left aligned text</p> <p style="text-align: center;">Centered text</p> <p style="text-align: right;">Right aligned text</p> <p style="text-align: justify;">Justified text that stretches to fill the full width.</p> <!-- Better: use CSS class --> <style> .center { text-align: center; } </style> <p class="center">This paragraph is centered using a CSS class.</p>
How HTML Handles Whitespace
One common confusion for beginners is that extra spaces and blank lines in your HTML code are ignored by the browser. No matter how many blank lines or spaces you type in your code, the browser will display them as a single space.
<!-- Extra spaces and blank lines are IGNORED --> <p>This text has many spaces.</p> <p>But it will display as a single line.</p> <!-- Use br or p tags to control spacing --> <p>Use <br> to break lines.<br> Or use <p> for new paragraphs.</p>
Special character for space: If you need to force an extra space, use the HTML entity (non-breaking space). Example: Hello World forces 3 spaces.
Styling Paragraphs with CSS
You can fully customize how paragraphs look using CSS properties. You'll learn CSS in depth in Lesson 8: HTML Styles — but here's a preview of the most useful paragraph styling properties:
<style> p { font-size: 16px; /* text size */ color: #334155; /* text color */ line-height: 1.8; /* space between lines */ font-family: Arial, sans-serif; /* font */ max-width: 700px; /* max width for readability */ margin: 0 auto 1rem; /* centered with bottom spacing */ text-indent: 2rem; /* indent first line */ letter-spacing: 0.5px; /* space between letters */ } hr { border: none; height: 2px; background: linear-gradient(to right, #7c3aed, #3b82f6); margin: 2rem 0; } </style>
Related HTML Lessons
Paragraphs are the backbone of every webpage. These related lessons will help you apply what you've just learned:
Try It Yourself
Questions Beginners Ask
Real questions we get from people starting HTML for the first time:
No. HTML is not a programming language — it is a markup language. You do not need any programming knowledge to start learning HTML. It is the perfect first step for anyone entering web development, and our course starts from absolute zero.
Make sure your file is saved with the .html extension (e.g. index.html), not .txt. Then open it in a browser by double-clicking or dragging the file into your browser window. You can also use an editor like VS Code with the Live Server extension for instant previews.
The <p> tag creates a new paragraph with automatic spacing above and below. The <br> tag creates a line break within the same paragraph, with no extra spacing. Use <p> for new text blocks and <br> for line breaks inside a block — like in a poem or postal address.
The <!DOCTYPE html> declaration tells the browser which version of HTML the page uses. For HTML5, place it at the very top of every file. Without it, browsers may render the page in quirks mode — causing layout inconsistencies and unexpected styling bugs. Always include it.
You can learn the basics of HTML in 1–2 weeks with consistent daily practice. Our full 22-lesson HTML course covers everything from Introduction to Semantic Elements. Completing all lessons takes about 3–5 hours of study total.
HTML provides the structure and content of a webpage — headings, paragraphs, links, images. CSS controls the visual styling — colors, fonts, and layout. JavaScript adds interactivity and dynamic behavior. Every modern website uses all three together, and HTML is always the foundation you start with.