The HTML <p> tag is used to define a paragraph element on the browser.
This tutorial will help you to understand the following:
how to use the p tag
Here’s an example of how to use the <p> tag to wrap a text element:
<body>
<p>Hello, this is a paragraph created using p tag</p>
</body>
Most modern browsers will automatically style any <p> tag in your HTML page with blank lines (using margins) before and after the element so that the rendered element will look like a paragraph that you see in printed media.
Here’s the default styling for <p> tag in Google Chrome as I inspected it today (this value may change if you inspect it now):
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
Any text or media that you wrap inside a <p> tag will be rendered as a single paragraph.
When you need two paragraphs, then you need to create a second <p> tag under the first one:
<body>
<p>Hello, this is a paragraph created using p tag</p>
<p>Now this is a second paragraph</p>
</body>
Although you have two <p> tags in your HTML page, the top and bottom margins of a <p> tag that connects with another <p> tag will collapse as one.
This happens so that the margins between your paragraphs won’t grow twice in size.
Please remember not to use the <br> tag to create a new paragraph. The browser won’t add blank lines without the <p> tag.
Omitting the closing p tag
You can omit the closing </p> tag when writing multiple paragraphs as follows:
<body>
<p>Hello, this is a paragraph created using p tag
<p>Now this is a second paragraph
</body>
Most modern browsers will automatically insert the closing </p> tag when rendering your page.
But since omitting the closing tag is confusing for people, I’d recommend you add the closing tag (or your developer friends will slowly talk less with you 😉)
When to use the p tag
The most common use of <p> tag is to organize your content and display it with proper spacing.
Although the use of <p> tag for text media is intuitive, you can actually use the <p> tag for other types of media too, such as images or videos.
For example, you can use the <p> tag to wrap an <img> element in the middle of your paragraphs as follows:
<body>
<p>Hello, this is a paragraph created using p tag</p>
<p>
<img src="image.png" />
</p>
<p>Now this is a second paragraph</p>
</body>
Since HTML5 is released, the use of semantic elements like <article> and <section> tags are encouraged to clearly describe the intended use of each element presents on the browser page.
The use of <p> tag to wrap an <img> or <video> elements will let the browser and other web developers know that the <img> or <video> element should be rendered in the middle of other paragraphs.
The <p> tag creates a block-level element, which means you can add inline elements inside it such as:
<a>tag<span>tag<button>tag<input>tag
And also text modifier tags like <strong>, <em>, <sub>, and <sup>.
Using the p tag align attribute
You may see some old websites that use the <p> tag with the align attribute present as follows:
<p align="center">Hello, this is a paragraph created using p tag</p>
The align attribute is used to specify the alignment of a table element content. Although it can work for the <p> tag, it has been deprecated in favor of the CSS text-align property.
To center the <p> tag, you need to specify the text-align property as center:
<body>
<p style="text-align:center;">
Hello, this is a centered paragraph using text-align
</p>
</body>
I’d recommend you use internal or external css and create two classes for your <p> tags: the .center and .right classes.
p.center {
text-align: center;
}
p.right {
text-align: right;
}
This way, you only need to add the right class name to your <p> tag when you need to align your paragraph element.
Using the id attribute for p tags
Like other HTML tags, you can add the id attribute for your <p> tags.
However, I’d suggest you keep in mind the intention of adding an id attribute to your <p> tag. If you need the id attribute to style your <p> tag, then it’s better to use the class attribute.
The id attribute is usually reserved for elements that need to be queried using JavaScript selector methods.
Additionally, you may want to use the id attribute to add anchor links to the beginning and the end of your content:
<a href="#closing-paragraph">Jump to the closing paragraph</a>
<!-- long content omitted for clarity -->
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<!-- long content omitted for clarity -->
<p id="closing-paragraph">The closing paragraph</p>
Unless you have specific reasons to use the id attribute, then you should stick with the class attribute.
Now you’ve learned how the HTML <p> tag works. Great job! 👍
