HTML Paragraphs
In this page:
The Basic Paragraph Tag
The p tag is used to define a block of text. It is a block-level element, which means it will always start on a new line and take up the full width available to it, pushing subsequent content below it.
Note: Wrap all your body text in p tags instead of leaving it loose inside your body.
Warning: Paragraph tags automatically start on a new line, so do not use them for tiny inline text adjustments.
Example: The Basic Paragraph Tag
<p>This is the first paragraph.</p>
<p>This is the second paragraph, starting on a new line below the first.</p>How HTML Handles Whitespace
HTML has a unique rule: it collapses multiple spaces and line breaks into a single space. No matter how many times you press the Spacebar or Enter key inside your code editor, the browser will ignore the extra whitespace.
Note: Do not try to format text spacing by typing multiple spaces inside your code editor.
Warning: Extra spaces in your source code will be flattened, which can ruin custom text indentations.
Example: How HTML Handles Whitespace
<p>This text has multiple spaces
and a line break
but the browser displays it as one single space.</p>Creating Line Breaks with br
Sometimes you want to start a new line of text, but you do not want to start a brand-new paragraph with its large default spacing. The br tag acts like a manual line break that moves the text straight to the next line.
Note: The br tag is an empty element, meaning it has no closing tag.
Warning: Avoid using a chain of br tags to create empty vertical spaces; use CSS margins instead.
Example: Creating Line Breaks with br
<p>Roses are red<br>
Violets are blue</p>Preserving Formatting with pre
If you are displaying content like computer code, poetry, or text art, you need the browser to respect every space and line break. The pre tag instructs the browser to display the text exactly as it is typed, using a fixed-width font.
Note: Use the pre tag when displaying raw text layouts that depend on precise alignment.
Warning: Preformatted text does not automatically wrap, so it can run off the side of mobile screens if too long.
Example: Preserving Formatting with pre
<pre>
This text
keeps its spacing
and line breaks exactly.
</pre>Invalid Nesting Rules for Paragraphs
According to HTML standards, a paragraph tag is only meant to contain inline text and media. It cannot contain other block-level elements like headings, lists, or div tags. Nesting a block element inside a paragraph breaks your HTML validation.
Note: If you need a container for block elements, use a div tag instead of a paragraph tag.
Warning: If you put a heading inside a paragraph, modern browsers will forcibly close your paragraph and break your layout.
Example: Invalid Nesting Rules for Paragraphs
<p>
Some text before
<div>A div tag cannot go inside a paragraph</div>
</p>- Hitting enter in your code editor to create a visual line break inside a standard p tag.
- Stacking multiple br tags to create empty whitespace on your page.
- Nesting block elements like headings or lists inside paragraph tags.
- Paragraphs are block-level elements that automatically start on a new line with pre-set margins.
- The browser collapses multiple spaces and line breaks inside your HTML code into a single space.
- Use br for immediate line breaks and pre to display text exactly as typed with spaces intact.
Paragraph and line break elements are basic building blocks supported by all web browsers.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: