RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-paragraph/ below:

HTML Paragraphs - GeeksforGeeks

HTML Paragraphs

Last Updated : 05 Jun, 2025

A paragraph in HTML is simply a block of text enclosed within the  tag. The 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.

Syntax:

<p> Some Content... </p>

How HTML Paragraphs are Rendered?

In HTML, when you wrap text inside the  tag, it automatically:

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 Paragraph Code Example

Here’s an example showing two paragraphs in HTML:

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>-->

Output:

Multiple p Tags 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 behavior can be modified using CSS.)

For Example: Here we adding multiple lines in the HTML tag as below.

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>-->

Output:

p tag with multiple lines

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

The tag

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

Syntax:

 <br>

Example: This example explains the  tag inside the  tag to add the line-break.

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>-->

Output:

Use of br tag inside the p tag 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.

Syntax

 <hr>

Example: In this example we will use the <hr> tag with an example by using tag also.

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>-->

Output:

Output Align attribute

The 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.

Example: This example explains the align attribute to align the content in the tag.

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>-->

Output:

Use of align attribute in p tag Avoiding Common Mistakes with Paragraphs

Avoid Nested Paragraphs: You cannot nest paragraphs within one another. Each  tag should contain only the text for one block of content.
Avoid Using  for Non-Textual Content: The  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>.

Supported Browsers

Google Chrome: 1
Edge: 12
Firefox: 1
Opera: 15
Safari: 1

HTML Paragraphs in Web Development

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4