HTML Paragraphs
The paragraph tag, written as p, is the workhorse of text on the web. It wraps a block of normal text and tells the browser to treat it as one paragraph. Articles, descriptions, captions, nearly all body text lives inside p tags. It is the tag you will type more than any other.
The browser adds space above and below each paragraph on its own. That automatic margin is what separates one paragraph from the next, and it keeps a page readable without any styling. Stack five paragraphs in a row and you get five clear blocks of text with gaps between them.
Here is a surprise most beginners hit: HTML collapses extra spaces and line breaks. Press enter five times inside a paragraph and the page shows one space. Ten spaces become one space. Vertical gaps come from new paragraphs or CSS, never from pressing enter.
Whitespace collapses
The browser treats any run of spaces, tabs, and line breaks inside a paragraph as a single space. That is why your source code can be formatted freely without changing the page. To split text where you really want a break, use the br tag or start a new paragraph.
<p>One space and
several blank lines all become one space.</p>Spacing and alignment
The gap between paragraphs is a margin set by the browser. CSS can change it with the margin property, and it can also align the text or change its color and size. Those changes live in the style, not in the tag, so the paragraph keeps its meaning no matter how it looks.
<p style="margin-bottom: 30px;">A paragraph with extra space below.</p>Syntax
<p>This is a paragraph of text on your page.</p><p> Can't Hold <div>: Browser Auto-Closes It and Breaks Layout
The <p> content model is phrasing content only. Putting a div, ul, table, or even another p inside forces the parser to close <p> before the block, creating a stray </p> and phantom margins. Stack Overflow 'p tag not wrapping div' has 500+ dupes. Fix: never nest blocks in p, close p first.
<!-- BAD --><p><div>block</div></p> // becomes <p></p><div>...</div><p></p>Good to know
- The p tag holds one block of plain text.
- Browsers add spacing between paragraphs automatically.
- Extra spaces and enters inside a paragraph collapse to one space.
- Use CSS margins to control gaps, not empty paragraphs.