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