Home 〉 HTML Tutorials 〉 HTML Paragraph Tag Explained Learn How to Use p Tag with Examples
HTML Paragraph Tag Explained | Learn How to Use '<p>' Tag with Examples !
HTML Paragraph Tag Explained | Learn How to Use '<p>' Tag with Examples !
Introduction
The HTML '<p>' tag is one of the most commonly used elements for structuring text content. It defines a paragraph in HTML and is used to group sentences or text blocks together.
In this tutorial, we'll cover:
- What is the HTML '<p>' tag?
- How to use the '<p>' tag in HTML
- Attributes of the '<p>' tag
- Block-level vs Inline elements
- Example of using '<p>' tag
- Frequently Asked Questions (FAQs)
What is the HTML '<p>' Tag?
The '<p>' tag in HTML stands for "paragraph." It is used to enclose a block of text, creating a paragraph. The content inside the '<p>' tag is separated from the rest of the content by a space above and below the paragraph.
Syntax:
html syntax ✍
<p>This is a paragraph of text.</p>
Important: The '<p>' tag automatically adds space before and after the paragraph, but not inside the text itself.
Opening and Closing Tags
The '<p>' tag always requires both an opening and a closing tag.
Example:
html code 📝 
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>
output 📌
This is a paragraph.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- The 'opening tag' is '<p>'.
- The 'closing tag' is '</p>'.
The closing tag is mandatory in HTML5, though in some cases, browsers might render content even without it (e.g., in cases of improper nesting). The '<p>' tag is a 'block-level element'.
Example of Block Element:
html code 📝
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph. It takes up the full width of the container and starts a new line.</p>
</body>
</html>
output 📌
This is a paragraph. It takes up the full width of the container and starts a new line.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
In the example above, the paragraph will start on a new line and expand to the full width of the container.
Attributes of the '<p>' Tag
The '<p>' tag has a few attributes that help in styling or controlling its behavior, but they are used sparingly. Here's a breakdown:
align (Deprecated)
This attribute was used to align the text within the paragraph.
html code 📝
<!DOCTYPE html>
<html>
<body>
<p align="left">This text is left aligned.</p>
<p align="center">This text is centered.</p>
<p align="right">This text is right aligned.</p>
</body>
</html>
output 📌
This text is left aligned.
This text is centered.
This text is right aligned.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Note: The 'align' attribute is deprecated in HTML5. Use CSS to align text instead.
class
The 'class' attribute is used to apply CSS styles to the paragraph.
html code 📝
<!DOCTYPE html>
<html>
<body>
<p class="highlight">This paragraph has a class applied for styling.</p>
</body>
</html>
output 📌
This paragraph has a class applied for styling.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
id
The 'id' attribute is used to uniquely identify the paragraph element for CSS styling or JavaScript manipulation.
html code 📝
<!DOCTYPE html>
<html>
<body>
<p id="intro">This paragraph has a unique id.</p>
</body>
</html>
output 📌
This paragraph has a unique id.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
style
The 'style' attribute allows you to apply inline CSS directly to the '<p>' tag.
html code 📝
<!DOCTYPE html>
<html>
<body>
<p style="color: blue;">This paragraph text is blue.</p>
</body>
</html>
output 📌
This paragraph text is blue.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
> 'Note:' It's better to use external CSS instead of inline styles for maintainability.
Example Code (HTML)
Here's a practical example of how to use the '<p>' tag in HTML:
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a normal paragraph of text.</p>
<p class="highlight">This paragraph has a class applied, making it bold and red.</p>
<p id="unique" style="font-size: 18px;">This paragraph has a unique id and inline styling.</p>
</body>
</html>
output 📌
This is a normal paragraph of text.
This paragraph has a class applied, making it bold and red.
This paragraph has a unique id and inline styling.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
In this example:
- The first paragraph is normal.
- The second paragraph uses a CSS class called 'highlight' to style the text.
- The third paragraph uses both an inline style and an 'id' for further customization.
Conclusion
The '<p>' tag in HTML is essential for structuring your content and making it readable. It’s easy to use, but understanding its behavior as a block-level element and how to use attributes effectively will help you create well-structured, clean web pages.
Now, you can confidently use the '<p>' tag and its attributes in your HTML projects!
Suggested Topics:
- Complete Guide to HTML Attributes with Examples and Syntax
- HTML Block, Inline, and Empty Elements Explained with Examples
- HTML Class & ID Attribute Explained with Examples | Use Multiple Classes and IDs in One Tag
- CSS color Property Tutorial with Examples - Learn Text Color in CSS
- CSS Font Properties Tutorial with Examples | font-family, font-size, font-style
Related Topics:
- HTML '<br>' Tag - Line Break Tag with Syntax, and Examples
- HTML Heading Tag Tutorial with Examples | H1 to H6 Tags Explained
- HTML Semantic Elements - Complete Guide with Examples & Syntax
- HTML Text Formatting Tags Explained with Examples - Complete Guide
- CSS Text Formatting Properties Explained with Examples | Master Text Styles in CSS
Frequently Asked Questions (FAQs)
What is the purpose of the '<p>' tag in HTML?
The '<p>' tag is used to define a paragraph of text content on a webpage.
Is the '<p>' tag block-level or inline-level?
It is a block-level element that starts on a new line and spans the full width.
Can I style a '<p>' tag using CSS?
Yes, you can use internal, external, or inline CSS to style it.
Can a '<p>' tag contain other block-level elements?
No, it should not contain other block-level tags like '<div>' or '<p>'.
How does the '<p>' tag affect SEO?
Proper use of paragraphs improves content readability and user experience, helping your page rank better.