The HTML <p> Element

Basic

An HTML paragraph represents a distinct unit of prose. The <p> element tells the browser that its content forms a paragraph, rather than leaving the meaning to visual spacing alone.

What a paragraph represents

Use <p> when several sentences form one related piece of prose. A paragraph can contain ordinary text and appropriate phrasing content such as links, emphasis, strong importance, and inline code.

<p>HTML gives this group of sentences a clear semantic boundary.</p>

Paragraphs are not line breaks

A new paragraph represents a new unit of prose. A <br> element instead creates a line break within the same flow of text. Choose the element according to the meaning of the content, not according to the amount of vertical space you want on screen.

A paragraph is not a general layout container

The <p> element has a specific meaning. If you need a generic container for grouping elements, choose an element whose semantics match the job instead of using a paragraph simply because it happens to be a convenient block.

What can go inside a paragraph?

The paragraph element accepts phrasing content. That means a paragraph can contain text and suitable inline elements, but it is not a place for arbitrary block-level structures. The HTML Standard defines the paragraph's content model as phrasing content.

Remember

• Use <p> for a distinct unit of prose.

• Use <br> for a meaningful line break inside the same flow of text, not for general spacing.

• Use CSS for visual spacing and layout.

What a paragraph actually is

<p> marks up one block of related sentences — the same unit a writer would call a paragraph in prose. It is a block-level element: browsers place it on its own line and user-agent stylesheets commonly give it vertical margins. It represents a paragraph; it is not merely a visual spacing mechanism.

A paragraph is not a general-purpose layout container. If the content is not actually prose forming a paragraph, use the element whose meaning matches the content instead. For generic grouping without a more specific meaning, <div> is the appropriate HTML container.

Basic syntax

A paragraph has an opening tag, its text, and a closing tag:

1
2
3

<p>This is a single paragraph of text.</p>

<p>This is a second, separate one.</p>

The closing tag is technically optional in HTML, because the parser can implicitly close a paragraph in specific situations. In practice, explicitly writing the closing tag keeps the source clear and avoids surprises when the surrounding markup changes.

Whitespace collapses

Extra spaces, tabs, and line breaks in ordinary HTML text are collapsed when the browser lays out the text. This is general HTML whitespace behavior, not a special rule of the <p> element.

1
2
3
4
5
6
7

<p>
   This     has   extra   spaces

   and a line break.
</p>

<!-- renders with collapsed whitespace -->

When source formatting itself must be preserved, choose a representation that communicates that intent, such as <pre> for preformatted content or an appropriate CSS white-space value. The semantic element and the presentation of whitespace are separate decisions.

Paragraphs vs. line breaks

Both can create visible separation, but they communicate different things. Use <p> for distinct paragraphs and <br> when a line break is part of the content itself, such as a postal address or a line of poetry.

What can't go inside

<p> can contain phrasing content such as text, links, strong emphasis, code, and other inline semantics. It cannot contain flow elements such as <div>, <ul>, <table>, headings, or another <p> element.

Common mistakes

• Empty paragraphs for spacing. Use presentation spacing rather than empty content elements.

• Putting flow content inside a paragraph. Split the prose and the flow element into separate blocks.

• Using paragraphs for non-prose labels. Choose a heading, label, or other semantic element that matches the content.

Accessibility notes

Want to go deeper? Read the deep dive into the HTML <p> element for the specification-level rules behind its content model and parsing behavior.

Advanced

The paragraph is a structural concept

The HTML Standard defines <p> as representing a paragraph. That sounds obvious until you separate the document structure from the way a browser happens to display it. A paragraph is not defined by a particular amount of vertical spacing, a blank line in the source, or a specific visual style. Those are presentation choices applied to a structural unit.

This distinction explains why replacing paragraphs with arbitrary containers and CSS margins can change the meaning of a document even when the screenshot looks similar. HTML describes what the content is; CSS decides how that structure is presented.

The content model is phrasing content

The paragraph element's content model is phrasing content. In practical terms, a paragraph can contain text and inline semantics such as links, emphasis, code, quotations, and other phrasing elements. It cannot simply contain arbitrary flow content.

This is why markup such as <p><div>...</div></p> does not describe a valid nesting relationship. A <div> belongs to flow content, while the paragraph's content model is phrasing content.

1

<p>Text with <a href="/docs">a link</a> and <code>inline code</code>.</p>

Why lists cannot be children of a paragraph

A common misconception is that a paragraph is a logical prose container that can hold every part of one thought. The HTML Standard takes a more structural view. A list cannot be a child of <p>. If a sentence leads into a list, the prose before the list and the prose after it are separate structural paragraphs.

1
2
3
4
5
6

<p>Choose one of these approaches:</p>
<ul>
  <li>Use the first approach.</li>
  <li>Use the second approach.</li>
</ul>
<p>Either approach can work.</p>

If you need to style a larger logical group containing several structural paragraphs and other flow content, use an element whose content model actually permits that grouping, such as <div> when no more specific semantic element applies.

The optional closing tag is a parsing rule, not a recommendation

HTML permits the closing </p> tag to be omitted in defined situations. The omission rule is precise: for example, the end tag can be omitted when the paragraph is immediately followed by certain flow elements, including another paragraph, a heading, a list, a div, or a section. It is therefore wrong to generalize the rule to “the closing tag is always optional.”

1
2
3

<p>First paragraph
<p>Second paragraph
<p>Third paragraph

Although this syntax can be conforming, explicit closing tags are usually the clearer authoring choice. They make the source boundaries obvious and reduce the chance that later edits will be misunderstood.

Whitespace does not create paragraphs

A blank line in an HTML source file does not create a new paragraph. Conversely, placing several sentences on separate source lines does not create several paragraphs. Paragraph boundaries come from the HTML elements and the parser's rules, not from source-code formatting.

1
2
3
4

<p>These sentences
are still one paragraph.</p>

<p>This is another paragraph.</p>

The browser's normal whitespace processing then determines how runs of ordinary whitespace are presented. Preserving source formatting and defining paragraph structure are separate concerns.

When <p> is not the right element

The HTML Standard explicitly advises authors not to use <p> when a more specific element is appropriate. A timestamp, an author address, a quotation, a list, and a generic grouping each have different semantics. The correct choice is the element that describes the content, not the element that happens to produce the desired spacing.

• Use <p> for actual paragraphs of prose.

• Use <br> when a line break is itself meaningful to the content.

• Use a more specific semantic element when one exists.

• Use <div> for generic grouping only when no more specific semantic element applies.

A useful mental model

Think of <p> as a structural boundary around one HTML paragraph, not as a styling primitive. Once you make that distinction, several rules become easier to remember: inline content belongs inside it, flow-level structures do not, whitespace in the source does not create paragraphs, and visual spacing should not determine semantic markup.