HTML <p> Tag
The <p> tag defines a paragraph or a text paragraph. Tag description, attributes and using examples.
The HTML <p> tag is a block-level element that defines a paragraph of text on a web page. As a block-level element, it starts on a new line and takes up the full width of its parent container.
This page covers how to write paragraphs, the default spacing browsers apply to them, when you should not use a <p>, and how to style paragraphs with CSS.
This semantic tag is commonly used to structure text content, such as articles, blog posts, or product descriptions. You can place inline tags such as <strong> or <em> inside a <p> to emphasize or format specific words or phrases within the paragraph.
Properly structuring your text content with the <p> tag matters for accessibility and usability. Screen readers and other assistive technologies rely on semantic tags like <p> to accurately interpret and present content to users.
Syntax
The <p> tag comes in pairs. The content is written between the opening (<p>) and closing (</p>) tags. If the closing tag is omitted, it is considered that the end of the paragraph matches with the start of the next block-level element.
Spaces between the opening <p> tag and its content are ignored by the browser. In order to set an indent, use the CSS text-indent property .
The <p> tag cannot contain tables and other block-level elements.
Example of the HTML <p> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>Default paragraph spacing (the box model)
Browsers don't render paragraphs flush against each other. By default they apply a top and bottom margin of about 1em to every <p> element, which is what creates the visible gap between paragraphs. The default user-agent style is roughly:
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
}This is why two adjacent paragraphs are spaced apart even when you write no CSS. If you want paragraphs to sit closer together (or remove the gap entirely), reset the margin yourself:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin-top: 0;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<p>This paragraph has a smaller gap below it.</p>
<p>And this one sits closer to the paragraph above.</p>
</body>
</html>A common reset is margin: 0 on p, then adding the spacing back with margin-bottom only. This keeps the first paragraph from pushing its container down with an unwanted top margin.
When NOT to use <p>
A <p> element may only contain phrasing content — text and inline elements such as <strong>, <em>, <a>, <span>, or <img>. It cannot contain block-level elements.
If you nest a block-level element inside a <p>, the browser silently auto-closes the paragraph before that element. This is one of the most common beginner bugs, because the page still renders but the DOM is not what you wrote. Avoid putting these inside a <p>:
<div>(use the<div>tag as a wrapper around paragraphs instead)- Lists such as
<ul>,<ol>,<li> - Headings (
<h1>–<h6>) - Tables (
<table>) - Another
<p>(paragraphs cannot be nested)
<!-- WRONG: the <p> is auto-closed before the <div>,
so the second sentence ends up outside the paragraph -->
<p>
First sentence.
<div>Block content</div>
Second sentence.
</p>To group block-level content, wrap your paragraphs in a <div> rather than the other way around. For grouping inline content, use the <span> tag.
Using CSS
To align text in a paragraph, instead of the obsolete align attribute, use the CSS text-align property.
Example of the HTML <p> tag used with the CSS text-align property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.paragraph {
text-align: center;
}
</style>
</head>
<body>
<h1>Title of the document</h1>
<div class="paragraph">
<p>The text alignment to the center is set with CSS property text-align</p>
</div>
</body>
</html>Line breaks inside a paragraph
To break a line within a paragraph without starting a new one, use the <br> tag. Unlike a new <p>, a <br> does not add the default paragraph margin — it only moves the following text to the next line.
Example of the HTML <p> tag used with the <br> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> Inside the paragraph, we can put the tag <br />, <br /> to transfer a part of the text to another line if necessary.</p>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. <br /> The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Attributes
| Attribute | Value | Description |
|---|---|---|
| align | left, right, center, justify | Defines the text alignment. Deprecated — not supported in HTML5; use the CSS text-align property instead |
The <p> tag also supports the Global Attributes and the Event Attributes.
How to style an HTML <p> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
color: blue;
font-size: 18px;
text-align: justify;
}
</style>
</head>
<body>
<p>This paragraph is styled with CSS.</p>
</body>
</html>