TEXT9 min20 XP

Paragraphs & Text

Learn Paragraphs & Text with live examples, interactive editor, and Shiv AI tutor.

Paragraphs and Text Formatting

After headings, paragraphs are the most-used HTML element. HTML also provides many text formatting tags: bold, italic, highlighted, subscript, superscript, deleted text, and more.

Paragraphs vs Line Breaks

Example 1 — p vs br — When to Use Each

<!-- p creates a full block with space before and after -->
<p>HTML is the foundation of every website.</p>
<p>CSS makes HTML beautiful with colors and fonts.</p>

<!-- br is a line break WITHIN a block -->
<p>
  First line of an address.<br/>
  Second line, same city.<br/>
  Pin code: 110001
</p>

HTML is the foundation of every website.

CSS makes HTML beautiful with colors and fonts.

First line of an address.
Second line, same city.
Pin code: 110001

Each gets automatic spacing above and below. Use only for line breaks within the same content block like addresses or poetry.

Text Formatting Tags

Example 2 — All Key Formatting Tags

<!-- strong = bold WITH semantic importance -->
<p>Always put <strong>charset=UTF-8</strong> first in head.</p>

<!-- em = italic WITH semantic emphasis -->
<p>The word <em>semantic</em> means "meaningful".</p>

<!-- mark = highlighted text -->
<p>The answer is <mark>HTML5</mark>.</p>

<!-- sub and sup: H2O and E=mc2 -->
<p>Water is H<sub>2</sub>O and E=mc<sup>2</sup></p>

<!-- del and ins: price updates -->
<p>Price: <del>Rs.500</del> <ins>Rs.299</ins></p>

<!-- code: inline code snippets -->
<p>Use <code>console.log()</code> to debug.</p>

Always put charset=UTF-8 first in head.

The word semantic means "meaningful".

The answer is HTML5.

Water is H₂O and E=mc²

Price: ~~Rs.500~~ Rs.299

Use console.log() to debug.

Use and for meaningful emphasis — they tell screen readers this text matters. Use and only for visual styling.

Blockquote and Pre

Example 3 — Quotes and Preformatted Text

<blockquote>
  The best time to start learning was yesterday.
  The second best time is right now.
  <footer>— Shiva Saini, CIWeb</footer>
</blockquote>

<pre>This    text
  preserves   spaces
    and line breaks exactly.</pre>

The best time to start learning was yesterday. The second best time is right now.
— Shiva Saini, CIWeb

This    text
  preserves   spaces
    and line breaks exactly.

<blockquote> is for quoting someone. <pre> preserves all whitespace — great for showing code examples.

strong vs b — Key Difference

has semantic meaning — screen readers announce it with added emphasis. Search engines treat it as important content. only adds visual boldness with zero semantic meaning. Always prefer when the text is genuinely important.

Why HTML Ignores Extra Spaces

HTML collapses all whitespace — multiple spaces and newlines become one space. This was intentional: write and indent HTML however you like without affecting the output. Use for line breaks and CSS for spacing.

Prev Next Lesson

Coding Infinite Report Bug Certificate

CIWeb HTML Course • 22 Lessons • Free

Explain with Analogies

Shiv AI explains this lesson using real-life analogies — no code at all.

Click the Explain tab to generate analogies.

index.html

Live Preview

Write code then click Deep Analyze

What is the difference between strong and b?

Explanationstrong carries semantic meaning — screen readers and search engines treat it as important content. b only makes text visually bold with no semantic meaning. Always prefer strong.

Build Challenge

Formatted Article

Write an article using strong, em, mark, sub/sup, del/ins, and blockquote.

Requirements (5 to pass)

paragraphs

strong or em

mark del or ins

blockquote or code

sub or sup

solution.html

Preview

Community Wall

Lesson 4

0/500

0/20 lines