LESSON 2.3

The Paragraph <p> and Break <br> Tags

The first tags you'll use in nearly every project

Learn how to add text to a webpage using the paragraph tag, and how the line break tag gives you control over where text starts a new line.

💡 The Concept

Paragraph Tags: <p>

The HTML paragraph tag is one of the first elements you will learn, and it appears on virtually every webpage ever built. The paragraph tag is probably the most frequently used element on the web. It wraps blocks of text and automatically adds spacing above and below. We’ll learn more about that spacing in future lessons.

Line Break Tag: <br>

Sometimes you need a line break within a block of content without starting a whole new paragraph. That’s where <br> comes in. The <br> tag to make a new line doesn’t add extra space like the <p> tags does. Note that this is a self-closing tag; it doesn’t have a closing tag because it doesn’t wrap any content.

The p tags add extra space around the paragraph

🎬 Video Demonstration

This video demonstrates how to use the <p> and <br> tags to achieve the look that you want.

Exercise: Try It Yourself

Either in JSFiddle or in template/index.html, try adding some paragraphys with <p> tags, and then try it with a line break. The screenshot below shows the result in JSFiddle.

JSFiddle example showing why it is necessary to use a break tag when coding an address.

Here is another example for you to try. When you make an address, it is necessary to use the <br> tags, otherwise you have too much space between each address line. As you can see, the <p> tags add extra margin at the top and bottom of each line, and that isn’t the right look for an address.

❓ Frequently Asked Questions

Do I have to wrap all my text in paragraph tags?

Yes. Text typed directly inside the body element without any tag is called bare text. It will show up in the browser, but it has no semantic meaning and no reliable styling. Every block of text needs to be inside a tag. For regular paragraphs, that tag is p.

Why does pressing Enter in my code not create a new line on the page?

HTML ignores whitespace in your code, including line breaks. Pressing Enter in your editor does nothing to what the browser displays. To move to the next line you need a br tag. To start a new paragraph with space above and below, you need p tags.

What is the difference between the p tag and the br tag?

The p tag creates a block with margin above and below. It signals a new paragraph. The br tag just moves to the next line with no extra spacing. Use p for separate thoughts, and br for things like addresses or poetry where lines belong together but need to break.

When should I use br instead of a new p tag?

Use br when content belongs in the same block but needs to wrap to the next line. Addresses are the classic example: each line belongs together, but using p tags would add too much space between them. Use p when you are starting a new thought that deserves its own breathing room.

★ Key Takeaways

Paragraphs and line breaks are the basics of putting text on a web page. This lesson covered the p tag for paragraphs and the br tag for adding a line break without starting a whole new paragraph. Next, you will learn about HTML headings, which go from h1 to h6. Headings organize your page and are important for both readability and search engines.

Next Lesson: HTML Headings: Organizing Content with h1 Through h6

← Back to HTML Fundamentals Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons