Paragraphs and Text Content in HTML
When you open a web page and read an article, you’re really just looking at text that has been structured with HTML. In this guide, you’ll learn how to create paragraphs, add line breaks, and format text so your pages are easy to read.
You don’t need any coding experience. We’ll go step-by-step, write some real HTML, and you’ll see exactly what it looks like in a browser.
What you’ll need
You only need two things:
- A web browser – like Chrome, Firefox, or Edge.
- A text editor – like Notepad (Windows), TextEdit (Mac in plain-text mode), or VS Code.
We’ll create a simple HTML file on your computer and open it in your browser.
First step: Your very first HTML page
Let’s start with a tiny HTML page and then focus on paragraphs.
Create a new file called paragraphs.html and paste this code inside it:
<!-- A very simple HTML page -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My First Paragraphs</title>
</head>
<body>
<!-- We will add our paragraphs here -->
</body>
</html>
Save the file, then double-click it. It should open in your browser with a blank page.
Now you’re ready to add text content.
What is a paragraph in HTML?
In HTML, a paragraph is created with the <p> tag.
A “tag” is a word inside angle brackets that tells the browser what the text means.
A paragraph has an opening tag <p> and a closing tag </p>.
Anything between those tags is treated as one paragraph.
Example 1: Your first paragraphs
Add this inside the <body> section of your file (between <body> and </body>):
<!-- Example: two simple paragraphs -->
<p>This is my very first paragraph in HTML!</p>
<p>Here is a second paragraph with some more text.</p>
Your full file should now look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My First Paragraphs</title>
</head>
<body>
<!-- Example: two simple paragraphs -->
<p>This is my very first paragraph in HTML!</p>
<p>Here is a second paragraph with some more text.</p>
</body>
</html>
Save the file and refresh the page in your browser.
What you should see:
- Two lines of text
- A bit of vertical space between them
That space is automatic. Browsers add some margin (extra space) before and after each paragraph so the text is easier to read.
Line breaks vs. new paragraphs
Sometimes you don’t want a new paragraph. You just want to break the line, like writing an address or a short poem.
For that, HTML gives you the <br> tag, which means “line break.”
It does not create extra space like a paragraph; it just moves to the next line.
Example 2: Line breaks with <br>
Replace the content inside <body> with this:
<body>
<!-- A paragraph with line breaks inside -->
<p>
My favorite fruits are:<br />
Apples<br />
Bananas<br />
Strawberries
</p>
</body>
What this does:
- The whole block is still one paragraph
- Each
<br />forces the text after it to start on a new line
What you should see:
My favorite fruits are:
Apples
Bananas
Strawberries
All as one group, with no extra blank space between the lines.
When to use <p> vs <br>
- Use
<p>for normal text blocks, like sentences and paragraphs in an article. - Use
<br>for small, controlled line breaks, like addresses, poems, or short lists.
If you’re ever unsure, a new idea or topic usually means a new paragraph.
Formatting text inside paragraphs
Plain text works fine, but sometimes you want to emphasize or highlight certain words. HTML gives you simple tags for that, such as:
<strong>– makes text important (usually bold)<em>– emphasizes text (usually italic)
You can use these inside your <p> paragraphs.
Example 3: Emphasizing text
Update your <body> to this:
<body>
<!-- A paragraph with emphasized text -->
<p>
Learning <strong>HTML</strong> is a great first step into web development.
</p>
<!-- Another paragraph using italics/emphasis -->
<p>
Don’t worry if it feels confusing at first.
With <em>practice and patience</em>, it will make more sense.
</p>
</body>
What this does:
<strong>HTML</strong>will appear bold<em>practice and patience</em>will appear italic
These tags add meaning as well as style. They tell search engines and screen readers (for visually impaired users) which words are important.
Combining paragraphs, line breaks, and formatting
Now let’s mix what you’ve learned into a small “mini article.” This will show you how real content might look.
Example 4: A mini article section
Replace everything inside <body> with this longer example:
<body>
<!-- A heading for our section -->
<h1>Welcome to My First Web Page</h1>
<!-- Intro paragraph -->
<p>
This page is my first experiment with HTML paragraphs and text formatting.
I am learning how to structure content so it is <strong>clear</strong> and
<strong>easy to read</strong>.
</p>
<!-- Paragraph with a line break and emphasis -->
<p>
Here is my daily learning plan:<br />
<em>Day 1:</em> Learn about paragraphs and line breaks<br />
<em>Day 2:</em> Practice with headings and lists<br />
<em>Day 3:</em> Build a small personal page
</p>
<!-- Closing paragraph -->
<p>
I know that learning to code can feel overwhelming at first, but I will
keep going one small step at a time.
Every new tag I learn is a little victory.
</p>
</body>
What you should see:
- A big heading at the top (“Welcome to My First Web Page”)
- A clear intro paragraph
- A “plan” paragraph with line breaks and italic labels
- A final encouraging paragraph
You’ve now used:
<h1>for a heading<p>for paragraphs<br />for line breaks<strong>and<em>for formatting
This is already enough to create simple, readable pages.
Try it yourself: Experiment and explore
Now it’s your turn to play. Here are some ideas you can try in your file:
- Add another paragraph at the bottom describing why you want to learn HTML.
- Use
<strong>on a sentence that feels most important to you. - Use
<em>to highlight a word that shows how you feel (excited, curious, nervous, etc.). - Add a short list-like block using
<br />for line breaks.
Example to guide you:
<p>
My goals for this month are:<br />
Learn basic <strong>HTML</strong><br />
Practice <em>every day</em><br />
Build a simple personal homepage
</p>
After each change, save the file and refresh your browser. Watching the page change as you edit is one of the most satisfying parts of learning HTML.
Common beginner questions
1. Can I write multiple sentences in one <p> tag?
Yes.
A paragraph can contain one sentence or many.
Break into a new <p> when you start a new idea or section.
2. Do spaces and blank lines in my code matter?
Extra spaces and blank lines in your HTML file usually don’t show up in the browser.
The browser mostly treats them as a single space.
To force a visible break, use <br /> or a new <p>.
3. Why do we close tags like </p> and </strong>?
Closing tags tell the browser where the effect ends.
Without them, the browser might think the paragraph or formatting continues forever, which can break your layout.
Quick recap and what’s next
You’ve just learned how to:
- Create paragraphs with
<p> ... </p> - Add simple line breaks with
<br /> - Emphasize and highlight text using
<strong>and<em> - Combine these tools to build a small, readable “mini article”
These are the building blocks of most web pages. With just these few tags, you can already write blog posts, notes, and simple articles on your own pages.
From here, a great next step is to learn about headings (<h1> to <h6>) and lists (<ul>, <ol>, <li>).
Those will give your text even more structure and make your pages look more professional.
For now, celebrate what you’ve done: you’ve written real HTML, created paragraphs, and shaped text on a web page. That’s a big step—keep going one tag at a time!
