Welcome! Have you ever written a document in a word processor like Microsoft Word or Google Docs? When you press "Enter," you create a new paragraph. That's exactly what we're going to learn how to do on a webpage.
In this lesson, you will move beyond the headings from our previous lesson and learn how to add the main content · the actual sentences and words that tell your story. By the end of this lesson, you will be able to take any block of text, like a poem, a news article, or a story, and make it look clean and organized on a real website.
What you'll learn today:
- How to create basic paragraphs.
- Why the web browser ignores your "Enter" key (and how to fix it).
- How to draw a line across the page to separate topics.
- How to make text keep its exact spacing (crucial for poems and code).
Let's get started!
Before we start building with text, we need to make sure we know three tiny building blocks. If you've seen the previous lesson on Headings, you're already familiar with these. If not, here is a 30-second refresher.
1. What is an HTML Tag? Think of a tag as a container instruction. It's a word wrapped in angle brackets < >. It tells the browser: "Hey, I'm starting a piece of content here."
2. What is an HTML Element? This is the container with the stuff inside. It has three parts:
- Opening Tag:
<p> - Content:
This is my text. - Closing Tag:
</p>
All together: <p>This is my text.</p>
3. Why do we need these tags? Computers are not smart like humans. We see a space between blocks of text and understand it's a new section. A browser only sees a long string of letters. Tags are the only way we can tell the browser what each piece of text is supposed to be.
We are going to learn about four specific tools today. Let's understand why they exist before we use them.
1. The <p> Tag: The Paragraph Block
- What it is: A block of related sentences.
- Real-world Analogy: A standard paragraph in a book or essay.
- What it does: It automatically puts a blank line (margin) above and below the text to separate it from other content. It also forces the text to start on a new line.
2. The <br> Tag: The Line Break
- What it is: A single "Enter" key press inside a paragraph.
- Real-world Analogy: Pressing
Shift + Enterin Microsoft Word. It drops you to the next line but stays in the same paragraph. - Important Note: This tag is empty. It doesn't have a closing tag. It just sits there like a marker:
<br>.
3. The <hr> Tag: The Thematic Break
- What it is: A visual separator (usually a gray line).
- Real-world Analogy: The three asterisks
*you sometimes see in a novel when the scene changes or time passes. - Important Note: This is also an empty tag. You write it as
<hr>.
4. The <pre> Tag: The Keeper of Formatting
- What it is: Preformatted text.
- The Problem it Solves: Normally, the browser is a neat freak. It ignores your extra spaces and "Enter" presses. It collapses everything into one flowing paragraph.
- The Solution: The
<pre>tag tells the browser: "Stop cleaning up! Show this text exactly as I typed it." - Visual Cue: Text inside
<pre>looks different · it usually uses a font where every letter is the same width (like a typewriter font calledCourier).
Let's look at each tool in isolation. For every example, imagine this is the code you put inside the <body> of your HTML page.
1. Basic Paragraphs (<p>)
Input (Code):
<p>Hello. My name is Alex. I am learning to build websites.</p>
<p>This is my second paragraph. Notice how it is separated from the first one.</p>Expected Output (How it looks in browser):
Hello. My name is Alex. I am learning to build websites.
This is my second paragraph. Notice how it is separated from the first one.
Explanation:
- Line 1:
<p>opens the container.</p>closes it. - Line 2: A new
<p>tag forces a new block with space above it.
2. The Browser Ignoring You (The Collapse Problem)
Input (Code):
<p>
This is line one in the code.
This is line two in the code.
This is line three in the code.
</p>Expected Output (How it looks in browser):
This is line one in the code. This is line two in the code. This is line three in the code.
Why did this happen? Even though you pressed "Enter" in the code, the browser said: "Nope, you didn't use a <br> tag, so I'm going to smoosh all these words into one long sentence."
3. Forcing a Break (<br>)
Let's fix the problem from Example 2.
Input (Code):
<p>
This is line one in the code.<br>
This is line two in the code.<br>
This is line three in the code.
</p>Expected Output (How it looks in browser):
This is line one in the code. This is line two in the code. This is line three in the code.
Line-by-Line Teaching:
This is line one...: We write the text.<br>: Break! Go to the next line immediately.This is line two...: This text now appears directly under line one.<br>: Break again!This is line three...: Appears under line two.
Think about it: What would happen if we put TWO <br> tags next to each other? <br><br> (You would get a blank line between the text!)
4. Drawing a Line (<hr>)
Input (Code):
<p>Section 1: Introduction to Cats.</p>
<p>Cats are fuzzy and independent.</p>
<hr>
<p>Section 2: Introduction to Dogs.</p>
<p>Dogs are loyal and energetic.</p>Expected Output (How it looks in browser):
Section 1: Introduction to Cats. Cats are fuzzy and independent. · (This is a horizontal gray line across the page) Section 2: Introduction to Dogs. Dogs are loyal and energetic.
Why use <hr>? It tells the reader: "We are changing the subject now." It's much cleaner than typing · · · · - yourself, because the line will automatically stretch to fit any screen size.
5. The Poem Fix (<pre>)
Remember the "Poem Problem"? We want to write a poem with specific spaces.
Input (Code - The Wrong Way):
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
</p>Output: My Bonnie lies over the ocean. My Bonnie lies over the sea. (Spaces and lines vanished.)
Input (Code - The Correct Way with <pre>):
<pre>
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.
</pre>Expected Output (How it looks in browser):
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.
Key Detail: Notice the spaces before "My" are preserved! And the font looks like a typewriter. That's <pre> doing its job.
Scenario: You are creating a simple webpage for a school poetry club. You need to display the club rules and a short poem.
Exercise 1: The Announcement Board
Objective: Use <p> and <hr> to structure information.
Steps:
- Open your HTML editor (or use the TryIt Editor on W3Schools).
- Create a main heading:
<h2>Poetry Club Rules</h2> - Write a paragraph explaining the first rule:
No talking while someone is reciting. - Write a second paragraph explaining the second rule:
Always bring a pencil. - After the rules section, add a
<hr>. - Add a new heading:
<h3>Poem of the Week</h3>
Expected Code:
<h2>Poetry Club Rules</h2>
<p>Rule 1: No talking while someone is reciting. It disturbs the rhythm.</p>
<p>Rule 2: Always bring a pencil. You might want to write down a beautiful line.</p>
<hr>
<h3>Poem of the Week</h3>Expected Output: You should see the heading "Poetry Club Rules", two separated paragraphs, a solid line across the screen, and then "Poem of the Week".
Self-Check Question: Did you remember to close the <p> tags? (If you forget </p>, the browser might think the rest of the page is part of that paragraph!)
Exercise 2: Formatting a Quote
Scenario: You want to quote a famous speech exactly as it was said, with specific line breaks for dramatic effect.
Quote Text: "I have a dream that one day this nation will rise up."
Objective: Use <p> and <br> to control the flow.
Steps:
- Wrap the entire quote in a
<p>tag. - After "I have a dream", insert
<br>. - After "that one day", insert
<br>.
Expected Code:
<p>I have a dream<br>
that one day<br>
this nation will rise up.</p>Why not three separate <p> tags? If you used three <p> tags:
<p>I have a dream</p>
<p>that one day</p>
<p>this nation will rise up.</p>You would get big gaps between the lines, like separate blocks. That ruins the flow of the speech. <br> keeps the lines close together, like lines in a poem.
Mistake #1: The Missing Semicolon Illusion The Wrong Code: <p>Hello World<p> The Problem: You forgot the slash / in the closing tag. The Result: The browser thinks you are starting a new paragraph inside the first one, which can create weird, unpredictable spacing. The Fix: Always check for the /. <p>Hello World</p>
Mistake #2: Using <br> for Big Spaces The Wrong Code: <br><br><br><br> The Problem: You want to push content down the page, so you spam line breaks. Why it's bad: It works on your screen, but on a mobile phone screen, the spacing will look completely different and messy. The Fix: Use Margins (we will learn this in CSS later). For now, just use one <br> if you need one line break inside text.
Mistake #3: Thinking <hr> Needs a Closing Tag The Wrong Code: <hr>Content</hr> The Problem: <hr> is an empty element. It doesn't wrap around content; it just stands alone. The Fix: Use it by itself. <p>Top Section</p> <hr> <p>Bottom Section</p>
Mistake #4: Forgetting <pre> Changes the Font The Problem: Beginners use <pre> to fix spacing but then panic because the text looks like old computer code. Why it happens: That is the default style of <pre>. The Fix: Understand that <pre> means "Preserve Formatting." For now, that includes a special font. It's not broken; it's working as intended.
Let's build the exact page from the W3Schools challenge. This combines everything you learned into a real, working webpage.
Stage 1: Setup Create a new HTML file with the basic structure.
<!DOCTYPE html>
<html>
<body>
<h1>A Short Poem</h1>
</body>
</html>Lesson 06 complete! 🎉
You covered:
- ✅ Lesson Introduction
- ✅ Prerequisite Concepts
- ✅ Conceptual Understanding: The Four Tools for Text Layout
- ✅ Simple Standalone Examples
- ✅ Guided Practice Exercises
- ✅ Common Beginner Mistakes (and How to Fix Them)