HTML – Paragraph


What is HTML paragraph tag?

HTML paragraph tag is used to define a paragraph in a webpage.

Its usually defined with the <p></p> tag.

This is most commonly used block-level element.

Why paragraph tag is used ?

Paragraph tag is used to create block of text separated from adjacent blocks by blank lines and/or first-line indentation.

Its used to create group of related content in the webpage.

How paragraph tag works ?

When <p> tag is defined, the browser itself adds an empty line before and after a paragraph.

Paragraph tag automatically adds space before and after any paragraph, These are margins added by the browser by default.

If we add multiple spaces, the browser reduces them it to a single space.

If we add multiple lines, the browser reduces them to a single line.

HTML coding link !!!

Click to Learn More about – HTML Tutorial for beginners

Syntax

 <p> Webpage Content </p>

<p></p> – Defines the Paragraph tag.

1. Simple Paragraph tag


Example :

<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>This is paragraph1, This paragraph tag is enclosed with in p tag</p>
                <p>This is paragraph2, This paragraph tag is enclosed with in p tag</p>
                <p>This is paragraph3, This paragraph tag is enclosed with in p tag</p>
                <p>This is paragraph4, This paragraph tag is enclosed with in p tag</p>
                <p>This is paragraph5, This paragraph tag is enclosed with in p tag</p>
        </body>
</html>

Output :

2. Simple paragraph tag with blank spaces.


Example :

<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>This is              paragraph1, This paragraph tag is enclosed with in p tag</p>
                <p>This is paragraph2, This              paragraph tag is enclosed with in p tag</p>
                <p>This is paragraph3, This paragraph tag is enclosed              with in p tag</p>
                <p>This is paragraph4, This              paragraph tag is enclosed with in p tag</p>
                <p>This is paragraph5, This paragraph tag is                enclosed with in p tag</p>
        </body>
</html>

Output :

3. Paragraph tag with class.

Example :

<html>
        <head>
                <title>My Webpage</title>
                <style>
                        .p1{
                        color:red;
                        }
                        .p2{
                        color:blue;
                        }
                        .p3{
                        color:brown;
                        }
                        .p4{
                        color:green;
                        }
                        .p5{
                        color:yellow;
                        }
                </style>
        </head>
        <body>
                <p class="p1">This is paragraph1, This paragraph tag is enclosed with in p tag</p>
                <p class="p2">This is paragraph2, This paragraph tag is enclosed with in p tag</p>
                <p class="p3">This is paragraph3, This paragraph tag is enclosed with in p tag</p>
                <p class="p4">This is paragraph4, This paragraph tag is enclosed with in p tag</p>
                <p class="p5">This is paragraph5, This paragraph tag is enclosed with in p tag</p>
        </body>
</html>

Output :

Learn HTML from basics !!!

Let Us Discover More About – HTML Tags

4. Paragraph tag with id.

Example :

<html>
        <head>
                <title>My Webpage</title>
                <style>
                        #p1{
                        color:red;
                        }
                        #p2{
                        color:blue;
                        }
                        #p3{
                        color:brown;
                        }
                        #p4{
                        color:green;
                        }
                        #p5{
                        color:yellow;
                        }
                </style>
        </head>
        <body>
                <p id="p1">This is paragraph1, This paragraph tag is enclosed with in p tag</p>
                <p id="p2">This is paragraph2, This paragraph tag is enclosed with in p tag</p>
                <p id="p3">This is paragraph3, This paragraph tag is enclosed with in p tag</p>
                <p id="p4">This is paragraph4, This paragraph tag is enclosed with in p tag</p>
                <p id="p5">This is paragraph5, This paragraph tag is enclosed with in p tag</p>
        </body>
</html>

Output :

Video Tutorial – Watch on Youtube