iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

HTML Paragraphs

The <p> element marks up a paragraph of text. The browser automatically adds whitespace above and below it.

Whitespace collapsing

HTML doesn't care about how you format whitespace in the source. Multiple spaces, tabs, and line breaks are all collapsed into a single space when rendered.

Source: <p>Hello, world! This is a paragraph.</p> Rendered: Hello, world! This is a paragraph.
Fig 1. Newlines and extra spaces in the source collapse to one space.

Related text elements

ElementPurposeNotes
<p>A paragraph.Default vertical margin top and bottom.
<br>A single line break.Use sparingly — for addresses, poetry, etc.
<hr>A thematic break between sections.Renders as a horizontal rule by default.
<pre>Preformatted text.Preserves whitespace and line breaks exactly.
Tip: If you need to keep formatting (ASCII art, code), wrap the text in <pre>. It's the simplest way to bypass whitespace collapsing.

Example

Example
<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
Try it Yourself »

Exercise

Add an element that forces a single line break inside the paragraph.

<p>Line one Line two</p>

Test yourself

Q1. Which element marks up a paragraph?
Q2. What happens to multiple spaces in HTML source by default?
Q3. Which element preserves whitespace exactly as written?

Discussion

Loading…