The <p> element in HTML: what it is, what it's for, and how to use it correctly

The p element serves to add paragraphs in HTML to our web page; simply for that, a paragraph is a block of text that is composed of one or more lines and that are separated from other paragraphs by a white space; although it is a simple and basic tag to use, it has multiple ways in which we can employ it, both correct and incorrect.

When I started writing HTML—and I say it with total sincerity—the <p> tag was one of the first ones I used without thinking too much... until I realized that some browsers did "weird" things when I used it incorrectly. 

Since then I learned that this element, although basic, has clear rules, good practices, and small details that make your life easier if you know them well.
Here I tell you everything you need to know to use <p> like a professional.

… And it's very likely that the p tag is your first contact with web development… it's your Hello World.

What is the <p> element in HTML

Definition and function of the paragraph in HTML5

The <p> element represents a paragraph of text, an independent block within an HTML document.

It is a block-level element and is part of the flow content.

In practice, <p> is used to group ideas or fragments of text, exactly as you would when writing a normal document.

How browsers interpret it (default behavior)

Browsers:

• Add vertical spacing before and after the paragraph.
• Automatically wrap the line when the text no longer fits, without splitting words.
• Automatically close the <p> if they detect that another paragraph or an incompatible block element has been opened.

You will see later why this last point is important.

Basic syntax of the <p> tag

Simple usage examples

<p>This is an example text with the p tag.</p>

Simple, clear, and direct.

When I was working on my first examples, I used to test with long texts to confirm how the browser reacted, exactly like this:

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </p>

Examples of correct use of the p tag

As we indicated previously, the p tag is used for the creation of paragraphs, which is essentially content on our website; for example, the following text is an example of the above:

P tag with content

<p> This is an example text with the p tag. </p> 

You will get:

This is an example text with the p tag.

Line break

If you want to make a line break, simply use another paragraph:

<p> This is an example text; <p>and this is a nested text inside another. </p> </p> 

You will get:

This is an example text; 

and this is a nested text inside another. 

Lots of text

We can also add much more text, as you will see when no more text fits on one line, the content is automatically moved to the next line; the word is not broken as you can see:

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat NULLa pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> 

You will get:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat NULLa pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Consecutive paragraphs

Of course, nothing prevents us from placing multiple consecutive p tags; that is, we can have consecutive paragraphs like the following:

<p>This is an example text; <p> <p>and this is another paragraph.</p> 

This is an example text

and this is another paragraph

As you can see, when placing a new paragraph the first letter does NOT automatically become capitalized; for this we must apply a CSS rule like the following:

p:first-letter {text-transform:uppercase} 

This is an example text

and this is another paragraph

As you can see in the previous CSS rule, we are indicating that the first letter should be uppercase and we get the following result:

Events, attributes and style

As for attributes, we have align, although this attribute is deprecated or rather obsolete in HTML5 and its use is not recommended in modern versions since the CSS rule text-align exists for that purpose, which you can use instead; and this is because HTML5 attempts to establish as basic rules that everything related to design be processed directly by CSS and not attributes. As for events, it does not have any customized for this tag, and for CSS rules you can use everything that the CSS API supports without any problem, so you can apply colors, box sizes (width and length) of the text, and everything else like animations and transitions as we have shown in a multitude of posts on DesarrolloLibre.

For styles, we can also say that the most common ones have to do with text orientation and its formatting, as well as the typography.

Text alignments with CSS

We have 3 types of alignments: center, align text to the left or to the right, and justified:

p { text-align: center; } 
p { text-align: left; } 
p { text-align: right; } 
p { text-align: justify; } 

Here we have the examples for each case:

<style> p {    text-align: left; } </style> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat NULLa pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat NULLa pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

<style> p {    text-align: center; } </style> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat NULLa pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat NULLa pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

<style> p {    text-align: right; } </style> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat NULLa pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat NULLa pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

<style> p {    text-align: justify; } </style> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat NULLa pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat NULLa pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Summary examples, well-structured paragraph vs poorly structured

Correctly structured paragraphs:

<p>This is a paragraph with <strong>emphasis</strong> and a <a href="#">link</a>.</p> 
<p>Second totally independent paragraph.</p>

Corrected bad practices

❌ Incorrect:

<p>Text <div>Internal block</div></p>

✔️ Correct:

<p>Text</p> <div>Internal block</div>

Why align is obsolete in HTML5

Many guides still mentioned it, but today it is considered deprecated.

It should no longer be used:

<p align="center">Centered text (incorrect in HTML5)</p>

Modern alternatives with CSS

Use text-align:

p { text-align: center; }

As we showed before.

Styling paragraphs with CSS

Text alignment (text-align), in summary:

• left
• right
• center
• justify

Example:

p { text-align: justify; }

Weight and typography (font-weight, font-family):

p { font-weight: 400; font-family: Arial, sans-serif; }

Many times I use values like 700 or 900 to give more emphasis.

Spacing (margin, line-height):

p { margin-bottom: 1rem; line-height: 1.5; }

This greatly improves readability.

What happens when the text is very long

You don't need to insert line breaks because the browser does everything for you.

If the text does not fit on one line, it automatically continues on the next, respecting complete words.

Use of multiple consecutive paragraphs

You can place as many consecutive paragraphs as you want:

<p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p>

As we saw in the previous examples section.

If you want the first letter to be automatically capitalized, you can use this rule that I usually apply when I want a more editorial style:

p:first-letter { text-transform: uppercase; }

What content can go inside <p> (and what cannot)

Like everything in life, things should be used for what they were made for, and even tags as simple as p should be used correctly so that your site doesn't have strange behaviors or visualizations in some browsers; we should not include or embed certain tags inside others; for example, including tags like p, h1, a, etc. in the span tags because it is a bad practice, the same happens with the p tag, you should not include tags like address or blockquote.

Permitted content (phrasing content)

Inside <p> can go:

• Normal text
• Inline tags: <span>, <strong>, <em>, <a>, <img>, <code>, etc.
• Any element that is part of phrasing content.

Forbidden elements or those that generate automatic closing

This is crucial.

Elements like:

<div> <h1> to <h6> <ul> / <ol> / <li> <blockquote> <section> / <article>

CANNOT go inside <p>.

If you do, the browser will automatically close the <p> before inserting that element, causing unexpected structures.

Can a <p> be nested inside another <p>?

When I started, I thought so because it visually seemed to work.

But you can't.

HTML automatically closes the first paragraph before the second one.

<p>Text 1 <p>Text 2</p></p>

It is actually interpreted as:

<p>Text 1 </p> <p>Text 2</p>

Text in bold with CSS

Another common property to use is the one that allows you to indicate the thickness of the text:

p.normal { font-weight: normal; } p.thick { font-weight: bold; } p.thicker { font-weight: 900; }

For example, to indicate that a text should be bold, we would have the following:

Text in bold:

Text typography

Finally, we have the option to change the typography, which we talked a bit about in this article:

And these would be the most common rules that we can apply to our text.

Modern best practices with the <p> tag

<p> vs <div> vs <span>

• <p>: text structured in paragraphs.
• <div>: generic container without semantic meaning.
• <span>: inline container to mark parts of text.

If your content is a paragraph, use <p>; if you are only grouping sections without meaning, use <div>.

When to use a paragraph and when not to

Use <p> when:

• There is a complete idea.
• There is semantic intent.
• You are writing long text or editorial content.

Do not use it when:

• The content is a list.
• You want to position independent images.
• You want to separate elements only with style (use margin).

Basic accessibility applied to paragraphs

Screen readers interpret <p> as a natural pause between ideas, which is why it's important not to use <br> as a substitute for a paragraph.

Attributes of the <p> element

Most common global attributes

You can use:

• class
• id
• style
• title
• lang
• ARIA attributes

Common errors when using <p>

Inserting block elements inside <p>

Typical error:

<p>List of things: <ul>...</ul> </p>

• Result: Invalid HTML and automatic closing of <p>.
  • Overusing <p> when another element should be used
• Sometimes I see <p> around images, lists, or even headings.
  • Don't do it. It harms semantics and accessibility.
• Understanding the browser's automatic closing
  • If you open a <p> and then another one, the first one will close automatically.
    This was one of the things I discovered while messing with code and seeing unexpected behaviors.

Frequently asked questions about <p>

• What is the difference between <p> and <br>?
  • <p> creates a paragraph; <br> only generates a line break.
    Never use <br> as a substitute for a real paragraph.
• How to create responsive paragraphs?
  • Just use relative units (em, rem) and a good line-height.
• Why does a paragraph look different in each browser?
  • Each browser applies a different user agent stylesheet.
    That's why many developers apply a reset or normalize styles.

Conclusions

In this post, we learned a multitude of things about the p tag, which, as you can conclude, the sky is the limit; we can nest p tags within themselves, we also saw which tags we cannot nest inside the p tag in the bad usage section, and we saw some style examples that we can apply to the p tag, but remember that you can apply anything that is supported by the CSS API, such as animations and transitions, which are fundamental topics on our blog.

Although <p> seems like a trivial tag, it actually defines the basic structure of the text and has important rules: what content it accepts, which elements automatically close the paragraph, how to work with styles, and how to avoid common errors.

After having written many examples in real projects, believe me: mastering this element saves you surprises and makes your HTML cleaner, semantic, and accessible.