p (HTML element)

Description

The p element is one of the most commonly used building blocks of HTML. When you use the p element to begin a new paragraph in HTML, it automatically creates some space above and below the content. This space is applied by the browser’s built-in style sheets, but you can override it as you see fit using CSS.

In XHTML, it’s necessary to wrap the contents of a paragraph in opening <p> and closing </p> tags, while in HTML 4 and earlier versions, it was enough to signify a new paragraph using the opening <p>—no closing tag was needed.

For example, this markup would be perfectly valid in HTML 3.2:

<p>So, having failed miserably to manage something as simple as
    "order a breakfast and pay for it," we set about our next task:
    submitting a visa application for our impending visit to
    Thailand. Heaven help us! We're not normally scatty like this,
    so we really must have needed that breakfast!
<p>Thankfully, the rest of the day was nothing like our poor start.
    We got the visa submitted and approved without a hitch, so
    that's one less task for us to do now.

The same markup would not be acceptable in XHTML, but this would:

<p>So, having failed miserably to manage something as simple as
    "order a breakfast and pay for it," we set about our next task:
    submitting a visa application for our impending visit to
    Thailand. Heaven help us! We're not normally scatty like this,
    so we really must have needed that breakfast!</p>
<p>Thankfully, the rest of the day was nothing like our poor start.
    We got the visa submitted and approved without a hitch, so
    that's one less task for us to do now.</p>

Importantly, while the first example would fail validation as XHTML, the second example will pass, and will also pass validation as HTML 3.2.

For the purposes of forwards-compatibility and general good coding practice, it’s advisable to use both the opening and closing tags even if you’re writing a document that uses an earlier, looser HTML DTD, such as 3.2 or 4.01—this approach supports completeness, rather than shortcuts.

Some developers perceive similarities between the p and the div elements, seeing them as being interchangeable, but this isn’t the case. The p element offers more semantic information (“this is a paragraph of text, a small collection of thoughts that are grouped together; the next paragraph outlines some different thoughts”), while the div element can be used to group almost any elements together. Indeed, it can contain almost any other element, unlike p, which can only contain inline elements.

Use This For …

This element may contain any text content, but it can’t include any block-level elements: only inline or phrase elements can be included.

Compatibility

It causes no compatibility issues, and has excellent support across all tested browsers.