Definition and Usage

The <p> tag represents a paragraph.

It is mainly used to group text content into paragraphs, and it can also contain elements that are considered part of the paragraph, such as images or form input elements.

HTML provides various tags to express different meanings for text that appears in a paragraph.
For example, tags such as <ins> or <address> serve this purpose. Therefore, when representing a paragraph with a specific meaning, you should choose the tag that best fits that meaning.

The <p> tag is a block-level tag that defines a block. If another block-level tag is parsed before its closing tag </p>, the <p> tag will automatically close.
Refer to the Syntax of the <p> tag section below.

Basic Example

Here is an example of how to use the <p> tag.

HTML 
<p>
    This tag represents a paragraph.
</p>
<p>
    In addition, HTML provides various tags to express different meanings for text in a paragraph.
    For example, tags such as <code><ins></code> or <code><address></code> serve that purpose.
    Therefore, when representing a paragraph with a specific meaning,
    you should choose the tag that best fits that meaning.
</p>
Rendered Output

Line Breaks Inside the <p> Tag

Most browsers add spacing above and below the <p> tag.
This visual spacing helps users quickly scan content. If you need additional styling or spacing, you can apply it with CSS.

To create a line break inside a <p> tag, you can use the <br> tag.

There is a difference between using the <br> tag and using CSS for line breaks: using CSS only affects the visual presentation, whereas using the <br> tag indicates an actual line break in the text (breaking the flow of continuous text).

HTML Example — Using <br> Inside <p>
HTML To create a line break inside a paragraph, use the <br> tag. 
<p>
    This tag represents
    <br> <!-- Inserts a line break -->
    a paragraph.
</p>
Rendered Output
HTML Example — Line Break via CSS Instead of <br>
HTML It is also possible to create a line break using CSS instead of the <br> tag. 
<p>
    <span style="display: block;">This tag represents</span>
    a paragraph.
</p>
Rendered Output

Usage Notes

Do not use the <p> tag when a more specific tag is more appropriate.

As mentioned earlier, HTML provides various tags to express different meanings in what may visually appear as a paragraph.
Let's look at an example.

The following markup is technically correct:

HTML Example — Technically Correct Markup
HTML 
<section>
    ...
    <p>Last updated: 2023-04-23</p>
    <p>Author: author@example.com</p>
</section>

Code Explanation
The <section> tag represents a general section of a document or application. It is used to group content by topic from a logical perspective.

However, the following markup is more appropriate from a semantic perspective:

HTML Example — Semantically Better Markup
HTML 
<section>
    ...
    <footer>Last updated: 2023-04-23</footer>
    <address>Author: author@example.com</address>
</section>

<!-- or -->

<section>
    ...
    <footer>
        <p>Last updated: 2023-04-23</p>
        <address>Author: author@example.com</address>
    </footer>
</section>

Code Explanation
The <footer> tag represents the author information, copyright details, related documents, or the global footer commonly found at the bottom of a web page.

Code Explanation
The <address> tag represents contact information.

As shown in the examples above, HTML provides various tags to convey meaning in contexts that may appear visually similar to paragraphs.
The concept of a “paragraph” in HTML goes beyond what is represented by the <p> tag. The <p> tag is just one of several ways to represent a paragraph.

This is also explained in the specification regarding paragraphs.

Earlier, we explored the logical concept of a "paragraph" represented by the <p> tag.

Now, let's look at the structural rules associated with the <p> tag syntax. We will review this through an example.

Example paragraph

The following markup is incorrect:

Incorrect Markup 
<p>
    A well-written sentence may include the following bullet points:
    <ul>
        <li>Like snowflakes falling softly...</li>
        <li>Holding your hand quietly</li>
        <li>Looking into your eyes</li>
    </ul>
    We will describe this in more detail below.
</p>

The <p> tag is a block-level tag. If another block-level tag is encountered before the closing </p> tag, the browser automatically closes the paragraph. Therefore, when the <ul> tag appears in the example above, the <p> element is implicitly closed, resulting in invalid markup.

In HTML, the term "paragraph" includes both a logical concept and a structural concept. This is emphasized in the specification when describing the <p> tag.

List tags (<ol> and <ul>) cannot appear as children of the <p> tag.

A corrected version of the markup may look like this:

HTML 
<p>
    A well-written sentence may include the following bullet points:
</p>
<ul>
    <li>Like snowflakes falling softly...</li>
    <li>Holding your hand quietly</li>
    <li>Looking into your eyes</li>
</ul>
<p>
    We will describe this in more detail below.
</p>

<!-- or -->

<div>
    A well-written sentence may include the following bullet points:
    <ul>
        <li>Like snowflakes falling softly...</li>
        <li>Holding your hand quietly</li>
        <li>Looking into your eyes</li>
    </ul>
    We will describe this in more detail below.
</div>

Technical Syntax Summary

Technical Syntax Summary of the p tag
Permitted parents Any element that accepts flow content.
Permitted content Phrasing content.
Implicit ARIA role paragraph
Permitted ARIA roles Any

Browser compatibility

Browser compatibility for the p tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<p> 1 12 1 1

Specifications

Specification for the p tag
Specification
<p> HTML Standard
#the-p-element

References

See also