Tutorials /HTML /HTML Paragraphs

HTML Paragraphs

HTML Paragraphs & Line Breaks

Understanding Paragraphs in HTML

A paragraph in HTML is defined using the <p> tag. Every time you use this tag, the text starts from a new line.

โœ… Browsers automatically add some space before and after each paragraph.

Basic Example

This is the first paragraph on the page.

This is the second paragraph that comes right after.

How HTML Displays Text

HTML doesn't care about how many spaces or new lines you add in your code. It will always display the text in a single block unless told otherwise.

Example with multiple lines and spaces:

This paragraph is written across many lines and has lots of spaces, but HTML will still render it as one line.

โ— Extra spaces and new lines are collapsed into a single space by the browser.

Using Horizontal Lines

You can separate content using a horizontal rule with the <hr> tag.

Example:

Introduction

This is some intro text.


Details

Here comes the detailed explanation.


๐Ÿ“ The <hr> tag is self-closing and doesn't need a closing tag.

Creating Line Breaks

Sometimes, you just want to break the line without starting a whole new paragraph. Use the <br> tag for that:

This is
a sentence
with line breaks.

๐Ÿ“Œ Like <hr>, the <br> tag is also self-closing.

Preserving Text Format (Poems, Code, etc.)

If you want to keep the exact spacing and line breaks as written, use the <pre> tag:

My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
  
๐ŸŽฏ The <pre> tag is perfect for poems, song lyrics, or displaying raw code.

The Coding Journey provides high-quality, beginner-friendly, and advanced web development tutorials. Learn React, Next.js, JavaScript, Tailwind CSS, and more with hands-on projects. Build faster, code smarter, and level up your skills! ๐Ÿš€

ยฉ 2025 All Rights Reserved | The coding journey