Home Blog Contact

Web Design Tutorial — Lesson 10 of 27 [ Updated: 04 Aug 2026 ]

HTML Paragraphs (<p>) – Displaying Text on a Web Page

Learning Objectives

After completing this tutorial, you will be able to:

  • Understand what the HTML <p> tag is.
  • Create paragraphs on a web page.
  • Know when to use paragraphs.
  • Follow professional HTML writing practices.
  • Avoid common beginner mistakes.

Table of Contents

  1. Introduction
  2. What Is the <p> Tag?
  3. Your First Paragraph
  4. Multiple Paragraphs
  5. When Should You Use Paragraphs?
  6. Best Practices
  7. Common Beginner Mistakes
  8. Practice Exercise
  9. Assignment
  10. Summary
  11. Frequently Asked Questions
  12. Next Tutorial

Introduction

Imagine reading a newspaper where every sentence is written as one long block of text.

It would quickly become difficult to read.

Web pages have the same problem.

If all your text is written without proper spacing and organization, visitors may lose interest before they finish reading.

That's why HTML provides the paragraph element.

The paragraph tag helps organize text into readable sections, making your content easier to understand for both visitors and search engines.

What Is the <p> Tag?

The <p> tag stands for Paragraph.

It is used to display a block of text on a web page.

Every paragraph begins with an opening tag and ends with a closing tag.

Basic syntax:

<p>Your text goes here.</p>

Everything between the opening <p> and closing </p> tags becomes part of the paragraph.

Your First Paragraph

Open your index.html file.

Replace the content inside the <body> with the following code.

<body>

<h1>Welcome to My Website</h1>

<p>Hello! My name is Alex, and I am learning HTML. This is my first paragraph on a web page.</p>

</body>

Save the file.

Refresh your browser.

You should now see a large heading followed by a paragraph underneath it.

Notice that the browser automatically places some space between the heading and the paragraph.

You didn't add any spacing yourself—the browser does this automatically.

Multiple Paragraphs

A web page can contain as many paragraphs as you need.

For example:

<h1>About Me</h1>

<p>I enjoy learning web design because it allows me to create beautiful and useful websites.</p>

<p>My goal is to become a professional web designer by practicing every day.</p>

<p>This course helps me understand HTML step by step.</p>

Each paragraph is displayed on its own line with space between them.

This makes your content much easier to read than writing everything inside a single paragraph.

When Should You Use Paragraphs?

Use a paragraph whenever you want to present a complete idea or piece of information.

Examples include:

  • An introduction.
  • A blog article.
  • A product description.
  • A company overview.
  • A personal biography.
  • News content.

Think of a paragraph as one complete thought.

When the topic changes, start a new paragraph.

This simple habit improves readability and creates a more professional webpage.

Best Practices

Professional web designers follow a few simple rules when writing paragraphs.

Keep paragraphs readable.

Instead of writing one very long paragraph, divide your content into smaller sections.

Visitors usually scan web pages before reading them carefully.

Shorter paragraphs are easier to read on both desktop and mobile devices.

Write meaningful content.

Instead of:

<p>Hello.</p>

Try writing something useful.

Example:

<p>Welcome to my portfolio website. Here you can explore my projects, skills, and contact information.</p>

Meaningful content provides a better experience for your visitors.

Use paragraphs for text only.

Do not use the <p> tag to create page titles.

Titles should use heading tags such as <h1> or <h2>.

Each HTML element has its own purpose.

Common Beginner Mistakes

Mistake 1

Using a paragraph as a heading.

❌ Incorrect

<p>My Portfolio</p>

✅ Better

<h1>My Portfolio</h1>

Mistake 2

Writing everything inside one very long paragraph.

Large blocks of text can be difficult to read.

Divide your content into multiple paragraphs whenever the topic changes.

Mistake 3

Forgetting the closing tag.

❌ Incorrect

<p>Welcome to my website.

✅ Correct

<p>Welcome to my website.</p>

Always remember to close your HTML elements properly.

Practice Exercise

Create the following webpage.

<h1>My Favorite Hobby</h1>

<p>Reading books helps me learn new ideas and improve my knowledge.</p>

<p>I enjoy reading technology articles because they teach me about modern web development.</p>

Save the file and refresh your browser.

Observe how the paragraphs appear below the heading.

Assignment

Create a simple webpage about yourself.

Requirements:

  • One <h1> heading.
  • Three paragraphs.

Suggested content:

  • Introduce yourself.
  • Explain why you want to learn web design.
  • Describe your future career goal.

Keep each paragraph between two and four sentences.

Summary

In this tutorial, you learned how to use the HTML <p> tag to display text on a webpage. You created single and multiple paragraphs, discovered when to use them, and learned professional writing practices that improve readability.

Paragraphs are one of the most frequently used HTML elements, and you'll use them in almost every webpage you build.

Frequently Asked Questions

Can I create multiple paragraphs?

Yes. A webpage can contain any number of paragraphs.

Can a paragraph contain a heading?

No. Headings and paragraphs are separate HTML elements and should be used for different purposes.

Does the browser automatically add space between paragraphs?

Yes. Browsers apply default spacing between paragraphs. Later in the course, you'll learn how to customize this spacing using CSS.

← Previous Next →