HTML Paragraphs

A paragraph always starts on a new line and is usually a block of text. Think of it like a chunk of writing on a topic.

HTML Paragraphs

The <p> tag defines a paragraph in HTML.

When you use a <p> tag, the browser automatically starts the text on a new line. It also adds some space above and below the paragraph. That space is called margin. Do not try to remove it with extra spaces or line breaks. You will learn CSS later to control that.

HTML Display Can Be Tricky

Here is something that confuses a lot of beginners. You cannot control how your text looks just by adding spaces or line breaks in your code. The browser ignores extra spaces and extra line breaks.

Why? Because HTML is about structure, not formatting. The browser decides how to display things based on the tags, not based on how you press the space bar or Enter key.

Watch what happens here. I wrote this paragraph with lots of line breaks in the code:

See? All those line breaks in my code did nothing. The browser squished everything into one line.

Same thing happens with spaces. If you add ten spaces between words, the browser shows only one:

So remember: Do not try to format your page by adding extra spaces or line breaks in your code. It will not work. Use the right HTML tags instead.

HTML Horizontal Rules (The hr Tag)

The <hr> tag creates a horizontal line across your page. It is used to separate different topics or sections. Think of it like a divider.

The <hr> tag is an empty tag. That means it has no closing tag. You just write <hr> by itself.

See those lines between sections? That is the <hr> tag at work.

HTML Line Breaks (The br Tag)

The <br> tag creates a line break. It moves the text to the next line without starting a whole new paragraph.

Like <hr>, the <br> tag is also an empty tag. No closing tag needed.

Notice the difference. When you use <br>, there is no extra space like there is between paragraphs. It is just a simple line break.

The Poem Problem

Now you understand the problem. Poems have line breaks and spaces. But as we saw, the browser ignores both. So a poem ends up looking like one long sentence.

Watch what happens with a normal <p> tag:

Ugly, right? All the line breaks and spaces are gone. The poem is just a blob of text.

The Solution: The pre Tag

The <pre> tag solves this problem. “Pre” stands for preformatted text. Anything inside a <pre> tag keeps its spaces and line breaks exactly as you wrote them.

The text also shows up in a fixed-width font (usually Courier). That means every letter takes up the same amount of space, like on an old typewriter.

Much better. Now the poem looks like a poem. Use <pre> anytime you need to preserve spaces and line breaks exactly as you typed them.

Quick Summary

• The <p> tag creates a paragraph. It starts on a new line and adds space above and below.
• Browsers ignore extra spaces and extra line breaks in your code.
• The <hr> tag creates a horizontal line to separate sections. It has no closing tag.
• The <br> tag creates a line break without starting a new paragraph. It has no closing tag.
• The <pre> tag keeps all your spaces and line breaks exactly as you wrote them.

What Just Happened? Let Me Explain

• Use <p> for normal paragraphs of text.
• Do not try to format your page with spaces or line breaks in your code. The browser will ignore them.
• Use <br> when you want to break a line inside a paragraph.
• Use <hr> when you want a visual separator between topics.
• Use <pre> when you need to keep exact formatting, like for poems or code examples.

HTML Tag Reference

Here are the tags we covered in this chapter: