HTML Paragraphs and Text

By /

A webpage is not made up of headings only. We also need normal text to explain things, show information, and tell a story. In HTML, we use the <p> tag to create paragraphs. We will also learn a few simple HTML tags that help us display and format text. Let’s begin with HTML paragraphs and text.

HTML Paragraphs

The <p> tag is used to create a paragraph.

Let’s see a complete example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Paragraphs</title>
</head>
<body>

    <h1>About Me</h1>

    <p>My name is Rahul.</p>

    <p>I am learning HTML and creating my first website.</p>

</body>
</html>

Output

About Me
My name is Rahul.
I am learning HTML and creating my first website.

Here:

  • <p> – Starts a paragraph.
  • </p> – Ends a paragraph.
  • The text between them is the paragraph content.

You can create as many paragraphs as you need.

Writing Multiple Paragraphs

Each paragraph should be placed inside its own <p> element.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>My Hobbies</title>
</head>
<body>

    <h1>My Hobbies</h1>

    <p>I enjoy playing cricket in my free time.</p>

    <p>I also like listening to music and watching movies.</p>

    <p>Sometimes, I spend time learning new things on my computer.</p>

</body>
</html>

The browser displays each <p> element as a separate paragraph.

How to Add a New Line

If you want to move text to the next line without creating a new paragraph. For this, HTML provides the <br> tag.

Here is a complete example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Line Break</title>
</head>
<body>

    <h1>My Information</h1>

    <p>
        Name: Rahul<br>
        Age: 14<br>
        City: Delhi
    </p>

</body>
</html>

Output

My Information
Name: Rahul
Age: 14
City: Delhi

Here, <br> – Moves the next text to a new line. You don’t write </br>. <br> is a void element, which means it does not need a closing tag.

<p> vs <br>

Both can create space between lines, but they are used for different purposes.

  • Use <p> when you have a new paragraph.
  • Use <br> when you only need a line break inside the same content.

Horizontal Line

Sometimes you may want to visually separate two parts of a webpage. HTML provides the <hr> tag for this.

<!DOCTYPE html>
<html>
<head>
    <title>Horizontal Line</title>
</head>
<body>

    <h1>About Me</h1>

    <p>My name is Rahul.</p>

    <hr>

    <h2>My Hobby</h2>

    <p>I enjoy playing cricket.</p>

</body>
</html>

The <hr> tag creates a horizontal line between the two sections. Like <br>, <hr> does not need a closing tag.

Formatting Text

When we want to make certain words bold, italic, highlighted, or smaller. HTML provides different tags for this. Let’s look at the useful ones.

Bold Text

The <strong> tag is used to show important text.

<!DOCTYPE html>
<html>
<head>
    <title>Bold Text</title>
</head>
<body>

    <h1>Learning HTML</h1>

    <p>HTML is <strong>very important</strong> for web development.</p>

</body>
</html>

The words very important will appear bold.

Bold Text with <b>

The <b> tag also makes text bold.

<!DOCTYPE html>
<html>
<head>
    <title>Bold Text</title>
</head>
<body>

    <h1>Text Formatting</h1>

    <p>This is <b>bold text</b> in a paragraph.</p>

</body>
</html>

<b> vs <strong>

Both normally look bold in the browser.

But they have a different meaning:

  • <b> – Makes text stand out visually.
  • <strong> – Shows that the text is important.

For important information, <strong> is usually the better choice.

Italic Text

The <em> tag is used to emphasize text.

<!DOCTYPE html>
<html>
<head>
    <title>Italic Text</title>
</head>
<body>

    <h1>Text Formatting</h1>

    <p>I am <em>really excited</em> to learn HTML.</p>

</body>
</html>

The emphasized text normally appears italic.

Italic Text with <i>

The <i> tag also displays text in italic style.

<!DOCTYPE html>
<html>
<head>
    <title>Italic Text</title>
</head>
<body>

    <h1>Text Formatting</h1>

    <p>This is <i>italic text</i>.</p>

</body>
</html>

<i> vs <em>

  • <i> – Makes text appear italic.
  • <em> – Gives the text emphasis.

For text that needs emphasis, <em> is generally more meaningful.

Highlighting Text

The <mark> tag is used to highlight text.

<!DOCTYPE html>
<html>
<head>
    <title>Highlighted Text</title>
</head>
<body>

    <h1>Important Topic</h1>

    <p>HTML is <mark>easy to learn</mark> with practice.</p>

</body>
</html>

The browser normally displays the marked text with a highlighted background.

Small Text

The <small> tag displays text smaller than the surrounding text.

<!DOCTYPE html>
<html>
<head>
    <title>Small Text</title>
</head>
<body>

    <h1>My Website</h1>

    <p>This is normal text.</p>

    <p><small>This is smaller text.</small></p>

</body>
</html>

It is often useful for small notes or additional information.

Deleted and Inserted Text

HTML also provides tags for showing that something was removed or added.

<del>

<del> shows text that has been deleted.

<!DOCTYPE html>
<html>
<head>
    <title>Deleted Text</title>
</head>
<body>

    <h1>Product Price</h1>

    <p>Old Price: <del>₹999</del></p>
    <p>New Price: ₹799</p>

</body>
</html>

The old price will normally appear with a line through it.

<ins>

<ins> shows text that has been added.

<!DOCTYPE html>
<html>
<head>
    <title>Inserted Text</title>
</head>
<body>

    <h1>Updated Information</h1>

    <p>The course duration is <del>3 months</del> <ins>6 months</ins>.</p>

</body>
</html>

Subscript and Superscript

Sometimes text needs to appear below or above the normal line.

<sub>

<sub> creates subscript text.

For example, in the chemical formula for water, the 2 appears below the normal text.

<!DOCTYPE html>
<html>
<head>
    <title>Subscript Example</title>
</head>
<body>

    <h1>Chemical Formula</h1>

    <p>Water is written as H<sub>2</sub>O.</p>

</body>
</html>

Output:

Chemical Formula
Water is written as H₂O.

<sup>

<sup> creates superscript text.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>Superscript Example</title>
</head>
<body>

    <h1>Mathematics</h1>

    <p>2<sup>2</sup> = 4</p>

</body>
</html>

Output:

Mathematics
2² = 4

Putting Text Formatting Together

Now let’s use several of these tags in one complete webpage. Try this example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Text Formatting</title>
</head>
<body>

    <h1>Learning HTML</h1>

    <p>HTML is <strong>important</strong> for creating webpages.</p>

    <p>I am <em>enjoying</em> learning HTML.</p>

    <p>This is <mark>important information</mark>.</p>

    <p>Old Price: <del>₹999</del> New Price: <ins>₹799</ins></p>

    <p>Water: H<sub>2</sub>O</p>

    <p>Square of 2: 2<sup>2</sup> = 4</p>

    <p><small>This is a small note.</small></p>

</body>
</html>

This example shows how different HTML text elements can be used together.

Quick Recap

  • <p> – Creates a paragraph.
  • <br> – Moves text to a new line.
  • <hr> – Adds a horizontal line.
  • <strong> – Shows important text.
  • <b> – Makes text bold.
  • <em> – Emphasizes text.
  • <i> – Makes text italic.
  • <mark> – Highlights text.
  • <small> – Displays smaller text.
  • <del> – Shows deleted text.
  • <ins> – Shows inserted text.
  • <sub> – Creates subscript text.
  • <sup> – Creates superscript text.

Frequently Asked Questions (FAQs)

Q1. What are HTML Paragraphs and Text?

HTML Paragraphs and Text are used to add and organize written content on a webpage. The <p> tag creates paragraphs, while other HTML tags can be used to format specific text.

Q2. How do you create a paragraph in HTML?

You can create a paragraph using the HTML paragraph tag, <p>. Write your text between the opening and closing tags, such as <p>This is my paragraph.</p>.

Q3. What is the difference between <p> and <br> in HTML?

The <p> tag creates a new paragraph, while the <br> tag creates a line break within the same content. Use <p> for separate paragraphs and <br> when you only need to move text to the next line.

Q4. What is HTML Text Formatting?

HTML Text Formatting means using HTML tags to give text a specific meaning or appearance. Common examples include <strong> for important text, <em> for emphasis, <mark> for highlighting, and <small> for smaller text.

Q5. What is the difference between <b> and <strong> in HTML?

Both <b> and <strong> normally display text in bold. However, <strong> indicates that the text is important, while <b> is mainly used to make text stand out visually.

Q6. What are <sub> and <sup> used for in HTML?

The <sub> tag creates subscript text, such as the 2 in H₂O. The <sup> tag creates superscript text, such as the 2 in 2².

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top