HTML Reference
<p> — The Paragraph Element
The element that carries the written web. Body text, descriptions, and articles.
Last updated: October 2026
Definition: The <p> element defines a paragraph of text. It is a block-level element that browsers automatically separate from surrounding content with vertical spacing.
🎬 Live Example
Two paragraphs — the browser adds space between them automatically.
This is the first paragraph. Notice how the browser adds space above and below it. You do not need to add any margin or padding yourself.
This is the second paragraph. It sits cleanly below the first with an automatic gap. This is the entire purpose of the paragraph element — the browser handles the spacing.
💡 Without the <p> element, this text would collapse into a single line with no visual separation.
Basic Syntax
<p>This is a paragraph of text.</p>
<p>This is another paragraph. The browser puts space between them.</p>Paragraphs are block-level. Each one sits on its own line with automatic margin.
⚙️ Global Attributes
The <p> element has no specific attributes. It uses the standard global attributes:
| Attribute | Purpose |
|---|---|
id | Unique identifier. |
class | Class names for styling. |
style | Inline CSS. |
title | Tooltip on hover. |
lang | Language of the paragraph content. |
dir | Text direction: ltr, rtl, auto. |
aria-* | ARIA attributes for accessibility. |
Multiple Paragraphs
The natural rhythm of any article or blog post.
<p>This is the opening paragraph.</p>
<p>This is the second paragraph.</p>
<p>And the third paragraph.</p>Inline Elements Inside Paragraphs
Paragraphs can contain any inline element — links, emphasis, code, spans.
<p>
This is a <strong>bold word</strong> and
an <em>emphasized word</em>. Here is a
<a href="/about">link</a> and some
<code>inline code</code>.
</p>Non-Breaking Space
HTML collapses multiple spaces into one. To force a space, use the entity.
<p>Multiple spaces stay.</p>
<p>Regular spaces collapse.</p>💡 Warning: is only for forcing spaces in small snippets (like "5 kg"). Do not use it for layout spacing — that's what CSS is for.
Styling Paragraphs
Common CSS patterns for readable paragraph text.
p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 1rem;
max-width: 65ch; /* readable line length */
color: #cbd5e1;
}
/* Drop cap on the first letter */
p:first-of-type::first-letter {
font-size: 3rem;
font-weight: 900;
float: left;
margin-right: 0.25rem;
}Poetry or Address Line Breaks
Use <br> only for semantic line breaks within a single thought.
<p>
Roses are red,<br>
Violets are blue,<br>
HTML paragraphs have margins,<br>
And so do you.
</p>
<p>
123 Main Street<br>
Springfield, USA 12345
</p>Do not use <br><br> for spacing between paragraphs. Use separate <p> elements instead. <br> is for line breaks within a single block of text.
🎯 What Can Go Inside <p>
| Allowed | Not allowed |
|---|---|
<a> | <div> |
<span> | <p> (nested) |
<strong>, <em> | <h1>–<h6> |
<code>, <kbd> | <ul>, <ol> |
<br> | <section>, <article> |
<img> (inline) | <form>, <table> |
<mark>, <time> | <video>, <audio> |
💡 Rule: If the element represents a block of content (headers, sections, lists), it cannot go inside a <p>. Only inline content is allowed.
⚠️ Common Mistakes
- Using
<br><br>instead of separate paragraphs. This is bad practice. Use two<p>elements with CSS margins instead. - Putting block elements inside
<p>. The browser closes the paragraph early, breaking the DOM structure. Use<div>if you need block content. - Using
<p>for layout. Paragraphs are for text. Use<div>for structural blocks. - Nesting
<p>inside<p>. This is invalid HTML. The browser will close the outer paragraph and start a new one. - Using
for indentation. Use CSStext-indentinstead. Multiple non-breaking spaces are bad practice. - Forgetting that paragraphs have default margins. If your spacing looks off, the browser's default
margin: 1em 0on<p>is likely the cause.
♿ Accessibility Notes
- Paragraphs are announced by screen readers as distinct blocks. This creates natural reading rhythm for users.
- Keep paragraphs short. 3–5 sentences is ideal. Long paragraphs are harder to follow for users with cognitive disabilities.
- Avoid all-caps. Screen readers spell out all-caps words letter-by-letter. Use CSS text-transform if you need the visual effect.
- Use
<strong>and<em>, not<b>and<i>, when the emphasis is meaningful. Screen readers announce the semantic difference. - Do not use
<p>for non-text content. If it's a label, use<label>. If it's an interactive element, use a button. - Left-align paragraphs by default. Full-width justified text creates irregular spacing that's hard to read for users with dyslexia.
❓ Frequently Asked Questions
What is the HTML <p> tag?
The <p> tag defines a paragraph of text. It is a block-level element that automatically adds spacing above and below itself. It is the most-used element for body content on the web.
Does <p> add line breaks?
Yes. <p> is a block-level element, so browsers automatically add a blank line above and below it. Use CSS margin if you need to change this spacing.
Can <p> contain other block elements?
No. <p> can only contain inline content: text, <span>, <a>, <strong>, <em>, <code>, <br>, and similar inline elements. Block elements like <div>, <h1>, or another <p> will close the paragraph early.
How do I add multiple spaces in a paragraph?
HTML collapses multiple spaces into one. To force spaces, use (non-breaking space) or use CSS white-space: pre-wrap. For long blocks of pre-formatted content, use <pre> instead.
Should I use <br> inside a paragraph?
Only for semantic line breaks, like poetry or addresses. For visual spacing between paragraphs, use separate <p> elements with CSS margins. Using <br> for spacing is bad practice.