HTML Paragraph

Table of Contents +

We have learned about HTML headings, now we will learn about HTML paragraphs.

🏷️ What Are HTML Paragraphs?

HTML paragraphs are used to define block of text content. It groups related sentences together that makes it easier to read and understand.

🏗️ HTML <p> Tag

The HTML paragraph tag is <p> tag. It is a container tag that wraps around the text content. The syntax is as follows:

Example of HTML Paragraph Tag

<p>This is a paragraph of text.</p>

The output of the above code will look like this:

Output

This is a paragraph of text.

🏷️ Multiple Paragraphs

You can have multiple paragraphs in your HTML document. Each paragraph should be wrapped in its own <p> tag. For example:

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

The output of the above code will look like this:

Output

This is the first paragraph.

This is the second paragraph.

🏷️ Nested Paragraphs

We can nest paragraphs inside other paragraphs, but it is not recommended as it can lead to confusion. Instead, you should use other container elements like <div> or <section> to group related paragraphs together.

<div>
  <p>This is a nested paragraph inside a div.</p>
</div>

📝 Best Practices for Using Paragraphs

  • Keep paragraphs short: Aim for 2-4 sentences per paragraph to make it easier to read.
  • Use line breaks: Use <br> tag to create line breaks within a paragraph if needed, but don’t overuse it.

📝 Things to Remember for Paragraphs

  • Inside a paragraph, white spaces and line breaks are ignored by the browser. What does that mean is that if you add extra spaces or line breaks in your HTML code, they will not be displayed in the browser. For Example:
<p>This    is    a    paragraph    with    extra    spaces.</p>

The output will be:

Output

This is a paragraph with extra spaces.

  • Paragraphs are block level elements, which means once paragraph is ended, the next element will start on a new line. For Example:
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

The output will be:

Output

This is the first paragraph.

This is the second paragraph.

🔗 Other elements that can be used inside paragraphs

You can use other inline elements inside paragraphs to format the text. Some common inline elements are:

  • <strong>: this tag is used to make text bold
  • <em>: this tag is used to make text italic
  • <a>: this tag is used to create hyperlinks to other pages or websites
  • <br>: this tag is used to create line breaks within a paragraph
  • <img>: this tag is used to insert images into the paragraph
  • <span>: this tag is used as a generic inline container

Example of Using Inline Elements in Paragraphs

<p>This is a <strong>bold</strong> text and this is an <em>italic</em> text. You can also add a link like <a href="https://freecodingchool.com/courses/html">this</a>.</p>

The output of the above code will look like this:

Output

This is a bold text and this is an italic text. You can also add a link like this.

🛠️ Try it yourself!

You can practice using paragraphs by creating a simple HTML document. Please follow the steps below:

  1. Create a folder name elements,
  2. Create an HTML file name paragraphs.html,
  3. Add a code snippet as below
<!DOCTYPE html>
<html>
<head>
  <title>HTML Paragraph Example</title>
</head>
<body>
  <h1>Why Education Matters</h1>
  <p>Education helps us learn new things every day. It makes us smarter and helps us understand the world better.</p>


  <h2>Learning at School</h2>
  <p>At school, we learn to read, write, and do math. We also learn about science, history, and other subjects that help us grow.</p>


  <h3>Books Are Our Friends</h3>
  <p>Reading books gives us new ideas. Books can take us to different places and teach us about people from all over the world.</p>


  <h2>Teachers Help Us</h2>
  <p>Teachers show us how to solve problems. They answer our questions and help us when we don't understand something.</p>


  <h3>Why We Should Keep Learning</h3>
  <p>Learning never stops. Even grown-ups keep learning new things. This helps them do better jobs and live happy lives.</p>
</body>
</html>
  1. Open the file in a web browser to see the paragraphs displayed on the page.

🚀 What’s Next?

In the next section, we will explore HTML paragraphs and how to use them effectively to structure your content.

Previous HTML Headings Next HTML Lists

Share & Connect

Share on LinkedIn