<p> Tag in HTML

Home/Reference/<p>

The <p> element

The <p> tag defines a paragraph of text. Browsers automatically add vertical spacing before and after each paragraph, making it the standard way to structure body copy into readable blocks.

Last updated: October 3, 2026

Quick facts

CategoryFlow content, palpable content
Content modelPhrasing content — text and inline elements only
Tag omissionThe end tag may be omitted if immediately followed by another block-level element, but writing it explicitly is best practice
Permitted parentsAny element that accepts flow content
DOM interfaceHTMLParagraphElement

Syntax

<p>Paragraph text.</p>

Live example

Edit the code below and watch the preview update instantly.

index.html
Preview
Open in Full Editor →

Attributes

AttributeDescription
—<p> has no attributes of its own — only the global attributes shared by every HTML element.

Common examples

Paragraph spacing with CSS

Browsers add a margin above and below each paragraph. Control that gap with CSS instead of empty paragraphs.

<p>First paragraph.</p> <p>Second paragraph.</p> <style> p { margin: 0 0 1.25em; line-height: 1.7; } </style>

A larger introduction paragraph

Give the opening paragraph a class to make it stand out, a common pattern on articles and landing pages.

<p class="lead">A short summary that tells readers what this page is about.</p> <p>The rest of the article continues here.</p> <style> .lead { font-size: 1.25rem; color: #444; } </style>

Comfortable line length

Lines of about 60–75 characters are easiest to read. Limit the width of text blocks with the ch unit.

<article class="text"> <p>Long text is easier to read when lines aren't too wide…</p> </article> <style> .text { max-width: 65ch; margin: 0 auto; } </style>

A drop cap on the first letter

Style the first letter of an article’s opening paragraph with the ::first-letter pseudo-element — no extra HTML needed.

<p class="intro">Once upon a time, every web page was plain text…</p> <style> .intro::first-letter { float: left; font-size: 3.2em; line-height: 0.9; margin-right: 0.08em; color: #7b61ff; } </style>

<p> vs <br>

A <p> starts a new paragraph — a separate block of text with space around it. A <br> only breaks the line inside the same paragraph, with no extra space.

Use separate paragraphs for separate ideas, which is almost always what you want. Use <br> only where the line break is part of the content itself, such as the lines of a postal address or a poem.

<p><br>
What it doesStarts a new paragraphBreaks the line
SpacingMargin above and belowNone
Use forSeparate ideasAddresses, poems

Common mistakes to avoid

  • Empty paragraphs for spacing. <p></p> or <p>&nbsp;</p> adds invisible clutter for screen readers. Use CSS margin.
  • Putting block elements inside a paragraph. A <div>, <ul> or heading inside a <p> makes the browser close the paragraph early, so your styles stop applying.
  • Using paragraphs as headings. Bold text in a <p> doesn’t create a section; use a heading.
  • Walls of text. One giant paragraph is hard to read on any screen. Break ideas into short paragraphs of a few sentences.

Accessibility & SEO tips

  • Short paragraphs and a comfortable line height (about 1.5–1.7) make text easier to read, especially on phones and for people with dyslexia.
  • Answer the main question in the first paragraph. Search engines and AI overviews often quote that opening paragraph directly.
  • Mark text in another language with the lang attribute, e.g. <p lang="es">, so screen readers pronounce it correctly.

Browser support

Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.

Tutorials: How to change the font, How to change text color

Related tags

<div> <h1>–<h6>

Frequently asked questions

Can I put a <div> inside a <p>?
No — <p> can only contain phrasing (inline) content, so block-level elements like <div>, <table>, or another <p> aren't allowed inside it and will cause the browser to auto-close the paragraph early.
How do I add a line break without starting a new paragraph?
Use <br> inside the paragraph for a single line break, rather than an empty <p></p>.
How do I add space between paragraphs?
Use CSS margin, for example p { margin-bottom: 1.5em; }. Avoid empty paragraphs or several <br> tags, which are harder to maintain and confusing for screen readers.
How do I indent the first line of a paragraph?
Use the CSS text-indent property, for example p { text-indent: 2em; }. Avoid typing spaces or &nbsp; at the start of the text.
Why is there space above my paragraph?
Browsers give paragraphs a default top and bottom margin of about one line. Remove it with p { margin-top: 0; }, or reset margins and add your own.
Can a paragraph contain links and images?
Yes. A <p> can hold any inline (phrasing) content: text, links, images, <strong>, <em>, <code>, <span> and so on. It can't hold block elements such as <div>, lists or headings.