The Paragraph Tag
<p>This is a paragraph. It is a block element — it takes the full width
and has top and bottom margin automatically added by the browser.</p>
<p>This is a second paragraph. The browser adds space between them.
No matter how many blank lines you add in the HTML, the browser
renders one paragraph below the other with standard spacing.</p>
<!-- To add a line break WITHIN a paragraph: -->
<p>
Line one<br>
Line two (same paragraph, different line)<br>
Line three
</p>Emphasis: strong and em
<!-- strong = important (renders bold, means "strong importance") -->
<p>This is <strong>very important</strong> information.</p>
<!-- em = emphasis (renders italic, means "stressed emphasis") -->
<p>She did <em>not</em> say that.</p>
<!-- b = bold without semantic meaning (purely visual) -->
<p>The product name is <b>SuperWidget Pro</b>.</p>
<!-- i = italic without semantic meaning (foreign words, technical terms) -->
<p>The term <i>in situ</i> means "in the original place".</p>| Tag | Meaning | Default visual | Use for |
|---|---|---|---|
<strong> | Strong importance | Bold | Critical information, warnings |
<em> | Stressed emphasis | Italic | Words that change meaning when stressed |
<b> | Bold (no semantic weight) | Bold | Keywords, product names, no importance |
<i> | Italic (no semantic weight) | Italic | Foreign terms, technical terms, titles |
More Inline Text Elements
<!-- mark: highlighted text -->
<p>Search result: <mark>HTML tutorial</mark> for beginners.</p>
<!-- del / ins: deleted and inserted content (edits) -->
<p>Price: <del>£99</del> <ins>£49</ins></p>
<!-- small: fine print, disclaimers -->
<p><small>*Terms and conditions apply.</small></p>
<!-- sup / sub: superscript and subscript -->
<p>E = mc<sup>2</sup></p>
<p>H<sub>2</sub>O is water.</p>
<!-- code: inline code snippet -->
<p>Use the <code>console.log()</code> method to debug.</p>
<!-- abbr: abbreviation with tooltip -->
<p><abbr title="HyperText Markup Language">HTML</abbr> is easy.</p>Block Text Elements
<!-- blockquote: a quoted section from an external source -->
<blockquote cite="https://www.w3.org/">
<p>The Web is for everyone.</p>
<footer>— Tim Berners-Lee</footer>
</blockquote>
<!-- pre: preformatted text — preserves spaces and line breaks -->
<pre>
function greet(name) {
return "Hello, " + name + "!";
}
</pre>
<!-- hr: thematic break (a horizontal rule) -->
<p>End of section.</p>
<hr>
<p>Start of next section.</p>
<!-- address: contact information for author/document owner -->
<address>
Written by Jane Smith.<br>
Contact: <a href="mailto:jane@example.com">jane@example.com</a>
</address>Paragraphs and Text: Structure vs Appearance
The <p> element marks a paragraph — a block of text. The key lesson is that HTML defines structure and meaning, while CSS controls appearance. Beginners constantly reach for HTML to fix spacing, which is CSS's job.
<p>First paragraph.</p>
<p>Second paragraph.</p> <!-- ✅ two paragraphs = two <p> -->
<p>Line one<br>line two</p> <!-- <br> = a line break WITHIN a paragraph -->
<!-- ❌ don't use empty paragraphs for spacing -->
<p></p><p></p> <!-- use CSS margin instead -->| Element | Meaning |
|---|---|
<p> | a paragraph (block) |
<br> | a forced line break (poems, addresses) |
<strong> / <em> | importance / emphasis (semantic) |
<b> / <i> | bold / italic (visual only) |
The structure-vs-style rule: whitespace and blank lines in your HTML source collapse to a single space when rendered — the browser ignores your formatting. To add space between paragraphs, use CSS margin, never empty <p></p> tags or multiple <br>s. Semantic vs visual emphasis: use <strong> (this matters) and <em> (stressed emphasis) — they carry meaning that screen readers convey — rather than <b>/<i>, which only look bold/italic with no meaning. <br> is for line breaks inside a block where the break is part of the content (addresses, poems), not for separating paragraphs — that's what <p> is for.
🏋️ Practical Exercise
- Write two separate paragraphs using
<p>tags. - Add a line break inside a paragraph with
<br>. - Make one word bold with
<strong>and another italic with<em>. - Add a horizontal rule
<hr>between two paragraphs. - Type several spaces between two words and confirm the browser collapses them to one.
🔥 Challenge Exercise
Write a three-paragraph "About Me" section. In the first paragraph, emphasize your name with <strong>. In the second, use <br> to format a short address on multiple lines. Separate the third paragraph with an <hr>. Confirm that extra whitespace and newlines in your source code do not change the rendered output.
📋 Summary
<p>— standard paragraph block. Use<br>for a line break within a paragraph.<strong>= important (bold).<em>= emphasised (italic). Both carry semantic meaning.<b>and<i>are visual only — no semantic weight.- Inline:
<mark>,<del>,<ins>,<small>,<sup>,<sub>,<code>,<abbr>. - Block:
<blockquote>,<pre>,<hr>,<address>.
Interview Questions
- How does the browser handle multiple spaces and line breaks in HTML source?
- What is the difference between
<br>and starting a new<p>? - What is the semantic difference between
<strong>and<b>(and<em>vs<i>)? - What does the
<hr>element represent? - Is
<p>a block-level or an inline element?
Related Topics
FAQ
HTML collapses source whitespace and newlines. Use <p> for paragraphs or <br> for a single line break to control the rendered spacing.
No. Use separate <p> elements and control spacing with CSS margins. <br> is for line breaks within content like addresses or poems, not for layout.