<p> Paragraph
One paragraph of text.
A <p> marks a paragraph, a block of related text. Browsers put some space above and below it.
Spacing is a CSS margin job, so skip empty paragraphs and stacks of <br> tags. A paragraph cannot hold block elements like lists, tables or other paragraphs. Write a <ul> inside a <p> and the browser closes the paragraph early. Typing the closing </p> every time saves you from surprises.
Which elements automatically close an open paragraph is listed in the p element definition in the HTML standard (opens in a new tab). Practise it in the Paragraphs and Line Breaks lesson.
Syntax
<p>A paragraph of text.</p>When to use it
Prose goes in p elements, one per idea, from a single sentence under a photo to a long article. Paragraphs of two to four sentences read better on screens than one big block of text. On a phone the difference is obvious.
Plenty of things look like paragraphs and are not. Steps or features are a <ul> or <ol>. A quote from someone else is a <blockquote> that contains paragraphs. A label next to a form field is a <label>. Short text inside a button or a table cell needs no p at all.
Text pasted from a word processor or a chat app tends to arrive broken. Every visual line may become its own paragraph, or the whole thing turns into one paragraph full of line breaks. Either way the real structure is gone, and screen readers can no longer move from paragraph to paragraph sensibly. Rebuild it with one p per paragraph. The strong and em lesson shows how to add emphasis inside paragraphs.
Live example
Edit the code and watch the preview.
<p>HTML describes the structure of a page.</p>
<p>CSS describes how it looks.</p>More examples
Paragraphs with inline elements
Paragraphs can contain phrasing content: links, emphasis, strong importance, inline code and more. Here two short paragraphs explain a rule, with each inline element doing its own job. Block elements such as lists would have to go between the paragraphs instead.
<p>The <code>alt</code> attribute describes an image for people who cannot see it. It is <strong>required</strong> on every image.</p>
<p>Write what the image <em>shows</em>, not what it is. Read more in the <a href="images.html">images lesson</a>.</p>A lead paragraph
Many articles open with a larger introductory paragraph. It is still a normal p element; a class lets CSS make it bigger and softer in color. The following paragraphs keep the default style, so only the presentation differs.
<style>
.lead{font-size:1.25em;color:#444;line-height:1.4}
</style>
<h1>Why we bake at night</h1>
<p class="lead">Fresh bread at 7am means our ovens start long before sunrise.</p>
<p>The dough is mixed the evening before and rests overnight.</p>
<p>At 3am the first loaves go into the oven.</p>Tip: Space paragraphs with CSS margins, never empty p tags.
Browser support
The p element is one of the oldest parts of HTML and works in every browser. Its end tag is optional in the syntax: browsers close an open paragraph automatically when certain block elements start. This rule is written into the HTML parsing algorithm, so every modern browser handles it the same way.
Accessibility
Screen reader users can jump from paragraph to paragraph, but only between real p elements. Lines of text split up by br tags do not count. Why structure has to come from real elements is explained in the W3C note Understanding Info and Relationships (opens in a new tab).
Common mistakes
Wrong
<p>Intro</p>
<p></p>
<p></p>
<p>Next part</p>Right
<p>Intro</p>
<p class="spaced">Next part</p>Empty paragraphs are no way to make space. CSS margins are.
Wrong
<p>List:
<ul><li>One</li></ul>
</p>Right
<p>List:</p>
<ul><li>One</li></ul>A p cannot hold a list. The parser closes the paragraph before the ul.
Frequently asked questions
Can I put a div inside a p tag?
How do I add space between paragraphs in HTML?
With CSS. Empty paragraphs and <br> tags are the wrong tool. Each <p> gets a default top and bottom margin of about 1em, and a rule such as p{margin:0 0 1.5em} changes it. Prefer an indented first line? Use text-indent. With the spacing in CSS, one edit changes it across the whole site. Turning plain text into paragraphs? A text-to-HTML converter (opens in a new tab) wraps each block in p tags for you.
Practise it
- What HTML Is (Module 1: First Page)
- Tags and Elements (Module 1: First Page)
- Attributes (Module 1: First Page)
- Head and Body (Module 1: First Page)
- Project: Hello World Page (Module 1: First Page)
- Headings (Module 2: Text)