HTML Paragraphs
A paragraph always starts on a new line and is usually a block of text.
The p Element
The <p> tag defines a paragraph. Browsers add some space (a margin) before and after it.
Example
<!DOCTYPE html>
<html>
<body>
<p>Ayesha runs a small bakery in Gulshan.</p>
<p>Her chocolate cake is famous in the whole street.</p>
</body>
</html>Spaces and New Lines Are Ignored
In your code you can press Enter or add many spaces, but the browser collapses them. Extra spaces become one space, and new lines become a space.
Example
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
has many spaces
and new lines in the code.
</p>
</body>
</html>This paragraph has many spaces and new lines in the code.
You cannot be sure how text will wrap on every screen. A phone is narrow and a laptop is wide, so the browser decides where each line ends.
Line Breaks with br
When you really need a new line inside one paragraph, such as an address or a poem, use <br>.
Example
<!DOCTYPE html>
<html>
<body>
<p>Ayesha's Bakery<br>
Block 7, Gulshan-e-Iqbal<br>
Karachi</p>
</body>
</html>Ayesha's Bakery Block 7, Gulshan-e-Iqbal Karachi
Horizontal Rules with hr
The <hr> element draws a line across the page. Use it to separate two topics.
Example
<p>Cakes are made fresh every morning.</p>
<hr>
<p>Home delivery is available after 4 pm.</p>Keeping Spaces with pre
The <pre> element shows text exactly as you typed it, with every space and new line. It uses a fixed-width font, which is useful for small tables of text or code.
Example
<!DOCTYPE html>
<html>
<body>
<pre>
Item Price
Cake Rs 1500
Cupcake Rs 150
Cookies Rs 400
</pre>
</body>
</html>Quick Comparison
| Tag | What it does | Has end tag? |
|---|---|---|
<p> | Starts a new paragraph | Yes |
<br> | New line inside a paragraph | No |
<hr> | A line between topics | No |
<pre> | Keeps spaces and new lines | Yes |
Common Mistakes
- Using many
<br>tags to make space between paragraphs. Use separate<p>elements and CSS margins instead. - Putting a heading or another paragraph inside a
<p>. A paragraph can contain text and small inline elements like<strong>or<a>, but not other blocks.
Exercise
Exercise
In your code you typed five spaces between two words inside a <p>. How many spaces does the browser show?