HTML Paragraphs

Imagine opening a book where every page is one giant wall of words. No gaps, no breaks, nothing to rest your eyes on. You would probably close it after a few lines, right?

That is exactly why paragraphs exist. They chop your writing into small, friendly chunks so readers can breathe, follow your ideas, and keep going. In HTML, the tool for that job is the humble  tag, and it is one you will use in almost every page you ever build.

What You Will Learn

By the end of this lesson, you will be able to:

Write a paragraph with the  tag
Understand why your extra spaces and blank lines seem to "disappear"
Style paragraphs with CSS so they are comfortable to read
Avoid the mistakes almost every beginner makes at least once

Good news

This is one of the easiest lessons in the whole tutorial. If you can type a sentence, you can write a paragraph.

Your First Paragraph

A paragraph starts with  and ends with . Everything you put between the two tags becomes one paragraph.

HTML Code
Browser Output

index.html
<p>Hello! This is my very first paragraph.</p>
<p>And this is my second one. See how it starts on a new line?</p>

Notice two things. Each paragraph starts on its own line, and the browser adds a little space between them. You did not have to ask for that. The browser does it for you.

Paragraphs Are "Block" Elements

In HTML, a paragraph is a block-level element. Picture it as a rectangular box that stretches across the full width of its container. Because of that:

A paragraph always starts on a new line
It takes up the whole row, even if the text is short
The browser adds a margin above and below it (about 16px by default)

Think of paragraphs like boxes on a shelf. Each box gets its own row, and there is a small gap between rows.

Why Did My Spaces Disappear?

Here is something that surprises almost everyone at first. Look at this code.

HTML Code
Browser Output

spaces.html
<p>
  This     paragraph     has
  lots of    extra spaces


  and blank lines.
</p>

You typed a bunch of spaces and blank lines, but the browser shows one tidy line. That is not a bug. It is called whitespace collapsing. The browser squishes any run of spaces, tabs, and line breaks into a single space.

Why does it work this way? So you can format your code however you like, with indentation and line wraps, without changing what visitors see.

Want to keep your spacing?

If you truly need spaces and line breaks preserved, you have two options. Use   for a line break (next lesson), or use the <pre> tag for preformatted text.

Long Text? Break It Up

Compare these two versions of the same text. Which one would you rather read?

Wall of text
Easy to read

<p>
  HTML is the skeleton of every web page. It tells the browser what is a title,
  what is a paragraph, and what is a link. CSS then adds colors and layout, and
  JavaScript brings the page to life with interaction. Learning all three takes
  time, but starting with HTML gives you a strong base for everything else.
</p>

<p>
  HTML is the skeleton of every web page. It tells the browser what is a title,
  what is a paragraph, and what is a link.
</p>
<p>
  CSS then adds colors and layout, and JavaScript brings the page to life with
  interaction.
</p>
<p>
  Learning all three takes time, but starting with HTML gives you a strong base
  for everything else.
</p>

A good rule of thumb: one paragraph, one idea. When your idea changes, start a new paragraph.

Styling Paragraphs with CSS

The default look works, but a few small CSS tweaks can make your text much nicer to read.

HTML + CSS
Browser Output

styled-paragraph.html
<style>
  p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #334155;
    max-width: 60ch;
  }
</style>

<p>
  Comfortable text is not an accident. A little extra line height and a limited
  width make long paragraphs far easier on the eyes.
</p>

Here is what each property does:

CSS property	What it does	Friendly tip
`font-size`	Changes the text size	Keep body text at 16px or larger
`line-height`	Sets the space between lines	Try 1.5 to 1.8 for easy reading
`max-width`	Limits how wide the text can get	Around `60ch` to `75ch` works well
`color`	Sets the text color	Make sure it contrasts with the background
`text-align`	Aligns the text	Left-aligned is easiest for most readers
`margin`	Changes the gap between paragraphs	Use `margin-bottom` for even spacing

Mistakes Everyone Makes (and Easy Fixes)

Do not worry if you have already done these. Every developer has.

Mistake 1: Using empty paragraphs for spacing

<!-- Please don't -->
<p>First idea.</p>
<p></p>
<p></p>
<p>Second idea.</p>

Empty  tags add noise, not meaning. If you want more space, use CSS margin or padding instead.

Mistake 2: Putting one paragraph inside another

<!-- This does not work the way you expect -->
<p>
  Outer paragraph
  <p>Inner paragraph</p>
</p>

Paragraphs cannot contain other paragraphs. The browser will quietly close the first one as soon as it sees the second, and your layout will not match what you wrote.

Mistake 3: Putting block elements inside a paragraph

A  can hold text and inline elements like , , <a>, and <code>. It should not hold headings, lists, or <div> elements.

<!-- Fine -->
<p>This is <strong>important</strong> and this is <em>stressed</em>.</p>

<!-- Not fine -->
<p>
  <h2>A heading inside a paragraph</h2>
</p>

Mistake 4: Forgetting the closing tag

Browsers are forgiving and will often guess where a paragraph ends. Still, always write . It keeps your code clean and avoids strange surprises later.

Do not use paragraphs for everything

A paragraph is for a block of related sentences. If you need a title, use a heading. If you need a list of items, use a list element. Picking the right tag helps search engines and screen readers understand your page.

Paragraphs vs Line Breaks

Beginners often ask, "Should I press Enter or start a new paragraph?" Here is a simple way to decide.

Situation	Use
A new idea or topic	A new `<p>`
A line inside the same thought, like an address or a poem	`<br />` inside one `<p>`

We will look at line breaks properly in the next lesson.

Try It Yourself

Grab your editor and give this a go.

Create a file called about-me.html.
Write an <h1> with your name.
Add three paragraphs: who you are, what you are learning, and what you want to build.
Add a <style> block that sets line-height: 1.7 and max-width: 60ch on p.
Open the file in your browser and read it out loud. Does it feel comfortable?

If it does, you are already writing like a web developer. 🎉

Quick Recap

Click a question to check your answer.

1. Which tag creates a paragraph?

The  tag.

2. Why do extra spaces in my code not show up in the browser?

Browsers collapse whitespace. Any run of spaces, tabs, and line breaks turns into a single space.

3. Is a paragraph a block-level or inline element?

Block-level. It starts on a new line and stretches across the available width.

4. What should you use instead of empty paragraphs to add space?

CSS properties such as margin or padding.

5. Can you place a  inside another ?

No. The browser closes the first paragraph automatically, so nesting does not work.

Key Takeaways

Use  for blocks of text, and give each idea its own paragraph.
Paragraphs are block elements with default space above and below.
Browsers collapse extra spaces and blank lines, so use tags and CSS to control layout.
Do not use empty paragraphs for spacing, and do not nest one paragraph in another.
A little CSS, like line-height and max-width, makes text much nicer to read.

You have got the hang of paragraphs. Next up, learn how to break lines without starting a new paragraph in Line Breaks.

What You Will Learn​

Your First Paragraph​

Paragraphs Are "Block" Elements​

Why Did My Spaces Disappear?​

Long Text? Break It Up​

Styling Paragraphs with CSS​

Mistakes Everyone Makes (and Easy Fixes)​

Mistake 1: Using empty paragraphs for spacing​

Mistake 2: Putting one paragraph inside another​

Mistake 3: Putting block elements inside a paragraph​

Mistake 4: Forgetting the closing tag​

Paragraphs vs Line Breaks​

Try It Yourself​

Quick Recap​

Key Takeaways​