<p>

<p> represents a paragraph. It groups a related thought and accepts phrasing content such as text, links, emphasis, and inline images. It is not a general container for lists, headings, or sections.

Two thoughts, two paragraphs

The browser usually displays paragraphs as blocks with margins. The example changes line spacing through CSS without adding empty paragraphs or repeated line breaks.

<h1>Reading a layout</h1>
<p>
  Start with the <strong>content order</strong>. It should make sense before you
  add CSS.
</p>
<p>
  Then choose a layout. A grid can align related items across rows and columns.
</p>

p {
  line-height: 1.6;
  max-width: 42ch;
}

Parser behavior

Opening a div, heading, list, or another paragraph closes an open <p> in HTML parsing. Writing <p><div>…</div></p> does not produce the nested structure you intended; inspect the DOM to see the repaired result.

Use margin for spacing and line-height for the space between lines. Use br where line boundaries belong to the content, such as an address or poem, not to separate prose paragraphs.

Accessible reading

A normal paragraph needs no role, aria-label, or tab stop. Keep text readable when zoomed, avoid conveying meaning through color alone, and choose paragraph length for the idea rather than enforcing an arbitrary sentence count.

Try changing max-width to 30ch and observe how the text wraps. The paragraph’s meaning stays the same.

Sources and browser support

MDN: p describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.