Swipe
SwipeSwipe
Swipe Apps

Paths

Motivation

Information

Headings & Paragraphs · Lesson 14 of 18

The Paragraph Element

A free lesson from Swipe Coding · HTML, level 2 · updated October 2026

By the Swipe team, founded by Colin · how we make lessons

The <p> element wraps a paragraph of text — a block of one or more sentences that belong together. It is the workhorse tag for ordinary body text: articles, descriptions, comments, anything that reads like prose rather than a heading or a list.

<h1>About This Site</h1>
<p>This site collects recipes tested in a home kitchen, not a professional one.</p>
<p>Every recipe here has been made at least three times before being posted.</p>
Two separate paragraphs, each in its own <p>.
🤖
Browsers add that gap between paragraphs automatically — no extra work needed. 📏

Browsers apply a default margin above and below every <p>, which is why paragraphs visually appear as separate blocks with breathing room between them, without you writing any CSS at all.

A common beginner habit is stacking several <br> tags to fake the gap between paragraphs instead of just starting a new <p>. It works visually, but it throws away the actual meaning — a screen reader or search engine has no way to tell that you meant to start a new paragraph, since as far as the HTML is concerned it's still all one block of text.

Quick check

What is the correct way to start a new paragraph of body text in HTML?

True or false

Browsers automatically add spacing above and below <p> elements by default.

Fill in the blank

The ____ element is used to wrap a block of ordinary body text, like a paragraph in an article.

Chapter quiz

Headings & Paragraphs

10 questions · pass with 60% — just like in the app.

Quick check

What is the actual purpose of heading levels like <h1> through <h6>?

Fill in the blank

The most important heading on a page, typically used once near the top, is ____.

True or false

You should choose a heading level based on how big or bold you want the text to appear.

Quick check

Why should a page normally have only one <h1>?

True or false

A browser will refuse to display a page that contains more than one <h1> element.

Quick check

Which of these heading sequences is correctly nested?

True or false

Jumping directly from an <h1> to an <h3>, with no <h2> in between, is good practice.

Fill in the blank

After using an <h3> for a subsection, starting a brand-new main section should go back ____ to <h2>, not stay at <h3>.

Quick check

What is the correct way to start a new paragraph of body text in HTML?

True or false

Browsers automatically add spacing above and below <p> elements by default.

Keep your streak going in Swipe Coding

Swipe through every level of HTML on your iPhone — with XP, stars, streaks, a personal advisor and the full track beyond these free levels.

Get the Swipe apps →