HTML Paragraphs

Last Updated : 07 Nov, 2025

A paragraph in HTML is simply a block of text enclosed within the <p> tag. The <p> tag helps divide content into manageable, readable sections. It’s the go-to element for wrapping text in a web page that is meant to be displayed as a distinct paragraph.

Adds space before and after the paragraph to visually separate it from other content.
Breaks the text into a single block, creating an easy-to-read section.

HTML

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->

<!--<head>-->
<!--    <title>The p tag</title>-->
<!--</head>-->

<!--<body>-->
<!--need to comprase this-->
    <p>A Computer Science portal for geeks.</p>
    <p>It contains well written, well thought articles.</p>
<!--</body>-->

<!--</html>-->

Properties of the paragraph Tag

The browser reduces multiple spaces added by users to a single space.
If a user adds various lines, the browser compresses them into one line.
By default, the display of the paragraph element is set to "block," meaning each new paragraph is placed on a new line.

Note: This behaviour can be modified using CSS.

HTML

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->

<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" -->
<!--          content="width=device-width, initial-scale=1.0">-->
<!--    <title>HTML p tag</title>-->
<!--</head>-->

<!--<body>-->
<!--need to comprase this-->
    <p>
        This paragraph has multiple lines.
        But HTML reduces them to a single line,
        omitting the carriage return we have used.
    </p>
    <p>
        This paragraph has multiple spaces.
        But HTML reduces them all to a single
        space, omitting the extra spaces and 
          line we have used.
    </p>
<!--</body>-->

<!--</html>-->

Note: To Solve this problem, we use <Pre> Tag as an alternative of <p> tag.

The <br> tag

The HTML <br> tag element creates a line break, giving you a new line without starting a new paragraph. Use <br> when you want to move to the next line without beginning a whole new paragraph.

HTML

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->

<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" -->
<!--          content="width=device-width, initial-scale=1.0">-->
<!--    <title>HTML paragraph-->
<!--    </title>-->
<!--</head>-->

<!--<body>-->
<!--need to comprase this-->
    <p>
        This paragraph has multiple
        <br />lines. But HTML reduces them
        <br />to a single line, omitting
        <br />the carriage return we have used.
    </p>
<!--</body>-->

<!--</html>-->

The Horizontal Rules <hr> tag

The HTML <hr> tag is used to create a horizontal rule or line, visually separating content on a webpage. Use <hr> when you want to insert a horizontal line to signify a division between sections or elements, providing a clear visual break in the page.

HTML

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->

<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" -->
<!--          content="width=device-width, initial-scale=1.0">-->
<!--    <title>HTML Horizontal Rule Example</title>-->
<!--</head>-->

<!--<body>-->
<!--need to comprase this-->
    <h1>
        Welcome to My Website
    </h1>

    <p>
        GeeksforGeeks is a leading
        platform that provides computer
        science resources and coding challenges
    </p>

    <hr>

    <p>
        GeeksforGeeks is a leading platform
        that provides computer science resources
        and coding challenges
    </p>
<!--</body>-->

<!--</html>-->

Align attribute

The <p> tag specifically supports the alignment attribute and allows us to align our paragraphs in left, right, or center alignment.

Syntax:

<p align="value">

Note: The align attribute is deprecated in HTML5, and styles should be used via CSS for better practices.

HTML

<!--<!DOCTYPE html>-->
<!--<html lang="en">-->

<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" -->
<!--          content="width=device-width, initial-scale=1.0">-->
<!--    <title>HTML paragraph-->
<!--    </title>-->
<!--</head>-->

<!--<body>-->
<!--need to comprase this-->
    <p align="center">
        Welcome Geeks
    </p>
    <p align="left">
        A Computer Science portal for geeks.
    </p>
    <p align="right">
        It contains well written, well thought articles.
    </p>
<!--</body>-->


<!--</html>-->

Avoiding Common Mistakes with Paragraphs

Avoid Nested Paragraphs: You cannot nest paragraphs within one another. Each <p> tag should contain only the text for one block of content.
Avoid Using <p> for Non-Textual Content: The <p> tag is meant for text-based content. If you need to wrap images, tables, or other elements, use appropriate tags like <img>, <table>, or <div>.

HTML Paragraphs in Web Development

C

Improve

Article Tags :

Explore