Paragraphs & Formatting
Overview
The `<p>` tag is used to write standard text paragraphs. Every time you want a new block of text, use a new `<p>` tag. The browser will automatically add some space between paragraphs to make them easy to read.
But sometimes, plain text is boring. HTML gives us Text Formatting Tags to highlight, bold, italicize, or underline specific words inside our paragraphs to make them stand out.
1. The Paragraph Tag
Browsers completely ignore extra spaces or new lines that you press on your keyboard. To separate text, you MUST use paragraph tags.
<!-- ❌ Browser prints this as one single line! -->
<p>This is line 1.
This is line 2 with lots of spaces.</p>
<!-- ✅ Correct way to separate lines -->
<p>This is line 1.</p>
<p>This is line 2.</p>2. Formatting Tags
Use `<strong>` when a word is extremely important (it becomes bold). Use `<em>` (emphasis) to stress a word (it becomes italicized). These tags are preferred over the older `<b>` and `<i>` tags because they are better for accessibility.
<p>
Warning: <strong>Do NOT share your OTP!</strong>
</p>
<p>
I am <em>very</em> excited to get my first job.
</p>
<p>
The iPhone is on sale! <del>₹80,000</del> <ins>₹60,000</ins>
</p>
<p>
Use the <mark>highlighter tag</mark> to mark text.
</p>Syntax
Common Pitfalls
- Do NOT use `<br>` (line break) multiple times to create space between paragraphs. Always use CSS margins or separate `<p>` tags.
- Avoid using `<b>` and `<i>`. Always use `<strong>` and `<em>` instead because they have actual semantic meaning for search engines.
Real-World Example
An e-commerce product description using rich formatting:
<div>
<p>
The <strong>Sony WH-1000XM5</strong> headphones provide
<em>industry-leading</em> noise cancellation.
</p>
<p>
Special Offer: <mark>Free shipping ends at midnight!</mark>
</p>
</div>