The p tag in HTML explained from scratch

The  element is used to add paragraphs in HTML to our webpage; simply for that. A paragraph is a block of text composed of one or more lines that is separated from other paragraphs by a blank space. Although it is a simple and basic tag to use, it has multiple ways of being used: both correct and incorrect.

When I started writing HTML—and I say this with total honesty—the  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, best 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  like a professional.

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

What is the `` element in HTML

Definition and function of the paragraph in HTML5

The  element represents a paragraph of text: an independent block within an HTML document. It is a block-level element (block-level) and is part of the flow content, which means it occupies all the available width of its container and generates a line break before and after itself.

In practice,  serves to group related ideas or text snippets, exactly as you would when writing a normal text document. This also has important semantic implications: search engines and screen readers understand each  as a unit of content with its own meaning.

How browsers interpret it (default behavior)

Browsers automatically apply the following rules when rendering a :

They add vertical spacing before and after the paragraph (default top and bottom margin).
They wrap lines automatically when the text no longer fits, without splitting words in half.
They close the  automatically if they detect that another paragraph or an incompatible block element has been opened.

Later on you will see why that automatic closing is important and why it can give you surprises if you do not take it into account.

Basic syntax of the `` tag

Simple usage examples

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

Simple, clear, and direct. You do not need any required attribute for it to work.

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

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

Examples of correct usage of the `` tag

As indicated above, the  tag is used to create paragraphs, which are essentially blocks of textual content on our site. Below you will see the most common cases:

p tag with content

<p>
Este es un texto de ejemplo con la etiqueta p.
</p>

You will get:

Este es un texto de ejemplo con la etiqueta p.

Line break between paragraphs

If you want to make a line break and separate ideas, the correct way is to use a new paragraph, not the   tag:

<p>Este es un texto de ejemplo.</p>
<p>Y este es otro párrafo independiente.</p>

You will get:

Este es un texto de ejemplo.
Y este es otro párrafo independiente.

Lots of text in a paragraph

We can also add a lot of text inside a single . When the content no longer fits on one line, the browser automatically moves it to the next one, without breaking words in half:

<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

Nothing stops us from placing multiple consecutive  tags; in fact, it is the most common practice when structuring editorial content:

<p>Este es el primer párrafo.</p>
<p>Y este es otro párrafo, completamente independiente.</p>

It is worth noting that when placing a new paragraph, the first letter is not automatically capitalized. If you need that typographic effect—commonly used in editorial styles—you can apply the following CSS rule:

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

This is an example text.

and this is another paragraph with the first letter in uppercase thanks to p:first-letter.

As you can see, the CSS rule :first-letter together with text-transform: uppercase automatically capitalizes the first letter of the paragraph, without needing to modify the HTML.

Events, attributes, and styling

As a specific attribute,  historically had align; however, this attribute is deprecated (obsolete) in HTML5 and its use is not recommended in modern versions. The reason is that HTML5 establishes as a principle that everything related to visual design should be managed by CSS, not by HTML attributes. Instead, you should use the text-align CSS property.

Regarding JavaScript events,  does not have any custom ones of its own; it inherits global DOM events like onclick, onmouseover, etc. And regarding styles, you can apply anything supported by the CSS API: colors, box sizes, typography, animations, and transitions, as we have shown in numerous posts on DesarrolloLibre.

The most common styles applied to  are related to text alignment, typographic formatting, and spacing.

Text alignments with CSS

We have four types of alignment available through the text-align property: center, left, right, and justify:

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>

<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>

<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>

Summary examples: well-structured vs poorly structured paragraph

Correctly structured paragraphs:

<p>Este es un párrafo con <strong>énfasis</strong> y un <a href="#">enlace</a>.</p>
<p>Segundo párrafo totalmente independiente.</p>

Bad practices corrected:

❌ Incorrect:

<p>Texto <div>Bloque interno</div></p>

✔️ Correct:

<p>Texto</p>
<div>Bloque interno</div>

Why `align` is obsolete in HTML5

Many old guides still mentioned it, but today align is considered deprecated and you should not use it in any modern project.

It should no longer be used:

<p align="center">Texto centrado (incorrecto en HTML5)</p>

The modern alternative is CSS. Use text-align:

p {
    text-align: center;
}

As we already showed in the previous examples, this approach is more maintainable, reusable, and respects the separation between structure (HTML) and presentation (CSS).

Styling paragraphs with CSS

Text alignment with text-align. The available values are:

left
right
center
justify

Example:

p {
    text-align: justify;
}

Weight and typography with font-weight and font-family:

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

Many times I use values like 700 or 900 in font-weight to give more visual weight and typographic emphasis to the text.

Spacing with margin and line-height:

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

This greatly improves readability, especially in long texts. A line-height between 1.4 and 1.6 is the most recommended range for body text on the web.

What happens when text is very long

You do not need to insert line breaks with   because the browser manages text flow for you. If the text does not fit on one line, it automatically continues on the next one, always respecting complete words. This is known as word wrap or line wrapping, and it is the default behavior of any block element in HTML.

And you can place as many paragraphs in a row as you need:

<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>
<p>Tercer párrafo.</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 `` (and what cannot)

Like everything in web development, tags should be used for what they were designed for. Even a tag as simple as  must be used correctly to avoid unexpected behaviors or renderings in some browsers. Specifically, you should not include block elements inside a paragraph; for example, nesting tags like <h1>, <div>, <address>, or <blockquote> inside  is a bad practice that can break the HTML.

Allowed content (phrasing content)

Inside , only phrasing content elements are allowed:

Normal text.
Inline tags: , , , <a>, <img>, <code>, etc.
Any element that is part of phrasing content according to the HTML5 specification.

Forbidden elements or elements that cause automatic closing

This is crucial and is one of the most frequent mistakes among those learning HTML. The following elements cannot go inside :

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

If you try to include them, the browser will automatically close the  before inserting that element, resulting in unexpected structures that can be very difficult to debug.

Can a `` be nested inside another ``?

When I started, I thought so because visually it seemed to work. But it is not possible: HTML automatically closes the first paragraph as soon as it encounters the start of the second.

If you write this:

<p>Texto 1 <p>Texto 2</p></p>

The browser actually interprets it as:

<p>Texto 1 </p>
<p>Texto 2</p>

This behavior can create subtle visual differences, but the resulting DOM is not what you wrote, and that can indeed cause issues with CSS selectors or JavaScript manipulations.

Bold text with CSS

Another very common property is font-weight, which allows controlling text thickness. The most commonly used values are:

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

For example, to indicate that text should be bold, we apply the bold value or its numerical equivalent 700:

Bold text:

Text typography

Finally, to change paragraph typography you can use the font-family property. In this article we talked a bit about it:

And these would be the most common CSS rules that you can apply to your paragraphs.

Modern best practices with the `` tag

A common question is when to use , <div>, or , since all three can contain text. The difference is semantic:

: text structured into paragraphs with editorial meaning.
<div>: generic container without semantic meaning, useful for grouping sections.
: inline container to mark specific parts of a text.

If your content is a paragraph of text, use ; if you are only grouping sections without semantic meaning of their own, use <div>.

When to use a paragraph and when not to

Use  when:

There is a complete idea that you want to express as a block of text.
There is a clear semantic intention: it is a paragraph of editorial content.
You are writing long text or content for an article, documentation, or blog.

Do not use it when:

The content is a list: use <ul>, <ol>, or <dl>.
You want to position standalone images: use <figure> or a container <div>.
You want to separate elements with visual space only: use it directly with margin in CSS.

Basic accessibility applied to paragraphs

Screen readers interpret  as a natural pause between ideas, which helps make content understandable for people using assistive technologies. That is why it is important not to overuse   as a replacement for a paragraph: a   only creates a visual break, but does not convey any real semantic separation to the screen reader.

Attributes of the `` element

The  element supports all global HTML attributes. The most common ones you will encounter on a daily basis are:

class: to apply CSS styles.
id: to uniquely identify the element.
style: for inline styles (although external CSS is preferred).
title: to add a descriptive tooltip on hover.
lang: to indicate the language of the paragraph's content.
ARIA attributes like aria-label or aria-hidden to improve accessibility.

Common mistakes when using ``

Inserting block elements inside  is one of the classic mistakes. Typical error:

<p>Lista de cosas:
 <ul>...</ul>
</p>

The result is invalid HTML: the browser automatically closes the  before inserting the list, generating a structure that does not correspond to what you wrote.
Overusing  to wrap images, lists, or headings. Sometimes I see this pattern in legacy code or WYSIWYG editors: do not do it, it hurts semantics, accessibility, and SEO.
Not understanding the browser's automatic closing. If you open a  and then another right after, the first one closes implicitly. This was one of the first things I discovered tinkering with code and observing unexpected behaviors in the DOM.

Frequently asked questions about ``

What is the difference between  and  ?
-  creates a semantic paragraph with automatic margins;   only generates a visual line break without any semantic meaning.
 Never use   as a replacement for a real paragraph.
How to create responsive paragraphs?
- It is enough to use relative units like em or rem for font sizes and a good line-height value. That way the text adapts to the container size without needing specific media queries for the text.
Why does a paragraph look different in each browser?
- Each browser applies its own user agent stylesheet with slightly different margins and font sizes.
  That is why many developers apply a CSS reset (such as normalize.css or a custom reset) to standardize base styles before starting to design.
How many characters should a paragraph have?
- There is no technical limit, but from a readability and UX perspective, it is recommended to keep lines between 60 and 80 characters wide. To achieve this you can use the CSS property max-width with the ch unit (for example, max-width: 70ch).

Conclusions

In this post we learned a lot of things about the  tag: we saw that the styling possibilities with CSS are practically unlimited, we reviewed which elements can be nested inside it and which cannot, and we explored practical examples of alignment, typography, and spacing. Remember that you can apply any CSS property to your paragraphs, including animations and transitions, which are topics we cover in depth on the blog.

Although  seems like a trivial tag, it actually defines the basic structure of text and has important rules: what content it accepts, what elements trigger its automatic closing, how to work with styles, and how to avoid common mistakes that can affect HTML as well as SEO and accessibility.

After writing countless examples in real projects, trust me: mastering this element saves you surprises and makes your HTML cleaner, more semantic, and accessible. Do not underestimate it; it is the foundation upon which all web textual content rests.

Learn now about the   tag in HTML

The p tag in HTML explained from scratch

What is the `<p>` element in HTML

Definition and function of the paragraph in HTML5

How browsers interpret it (default behavior)

Basic syntax of the `<p>` tag

Simple usage examples

Examples of correct usage of the `<p>` tag

p tag with content

Line break between paragraphs

Lots of text in a paragraph

Consecutive paragraphs

Events, attributes, and styling

Text alignments with CSS

Summary examples: well-structured vs poorly structured paragraph

Why `align` is obsolete in HTML5

Styling paragraphs with CSS

What happens when text is very long

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

Allowed content (phrasing content)

Forbidden elements or elements that cause automatic closing

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

Bold text with CSS

Text typography

Modern best practices with the `<p>` tag

When to use a paragraph and when not to

Basic accessibility applied to paragraphs

Attributes of the `<p>` element

Common mistakes when using `<p>`

Frequently asked questions about `<p>`

Conclusions

The p tag in HTML explained from scratch

What is the <p> element in HTML

Definition and function of the paragraph in HTML5

How browsers interpret it (default behavior)

Basic syntax of the <p> tag

Simple usage examples

Examples of correct usage of the <p> tag

p tag with content

Line break between paragraphs

Lots of text in a paragraph

Consecutive paragraphs

Events, attributes, and styling

Text alignments with CSS

Summary examples: well-structured vs poorly structured paragraph

Why align is obsolete in HTML5

Styling paragraphs with CSS

What happens when text is very long

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

Allowed content (phrasing content)

Forbidden elements or elements that cause automatic closing

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

Bold text with CSS

Text typography

Modern best practices with the <p> tag

When to use a paragraph and when not to

Basic accessibility applied to paragraphs

Attributes of the <p> element

Common mistakes when using <p>

Frequently asked questions about <p>

Conclusions

What is the `<p>` element in HTML

Basic syntax of the `<p>` tag

Examples of correct usage of the `<p>` tag

Why `align` is obsolete in HTML5

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

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

Modern best practices with the `<p>` tag

Attributes of the `<p>` element

Common mistakes when using `<p>`

Frequently asked questions about `<p>`