✍️ Phase 2 · Text & Structure🟢 BeginnerModule 03

Paragraphs & Text

⏱ 18 min read📖 5 sections🧩 5-question quiz🏆 1 challenge

Course Progress23% complete

HTML text isn't just what you type — it's structured through elements that carry meaning. The humble  element does far more than wrap a paragraph; combined with inline elements like , , and , it lets you convey emphasis, importance, and context that plain text simply cannot.

Section 1

The Paragraph Element

The  element defines a block of text as a paragraph. Browsers automatically add margin above and below each paragraph to separate it visually. It is a block-level element — it starts on a new line and takes up the full available width.

HTMLParagraph basics

<p>This is the first paragraph. It contains a full thought
and may span many sentences on multiple lines in your code.</p>

<p>This second paragraph starts fresh. Browsers render each
<p> with top and bottom margin — no need for <br> to separate
paragraphs.</p>

<!-- Never nest paragraphs! This is invalid HTML -->
<p>Outer paragraph <p>inner paragraph</p></p> <!-- WRONG -->

Section 2

HTML Whitespace Rules

HTML collapses all consecutive whitespace (spaces, tabs, newlines) into a single space when rendering. This is called whitespace normalisation — your source formatting doesn't affect the output.

HTMLWhitespace normalisation

<!-- All these render identically: "Hello World" -->
<p>Hello World</p>
<p>Hello     World</p>   <!-- extra spaces collapsed -->
<p>Hello
   World</p>             <!-- newlines = one space -->

<!-- To preserve whitespace, use <pre> -->
<pre>
  This    preserves
       spacing and newlines exactly
</pre>

💡

Why whitespace collapses

HTML was designed so that developers could format their source code nicely (with indentation and line breaks) without it affecting the output. Only semantic HTML elements and CSS control how text is displayed.

Section 3

Line Breaks & Horizontal Rules

Two simple elements give you control over visual flow without creating new paragraph blocks:

HTMLbr and hr

<!-- <br> — single line break, self-closing -->
<p>
  123 Main Street<br>
  Apt 4B<br>
  New York, NY 10001
</p>

<!-- <hr> — horizontal rule / thematic break -->
<p>Chapter 1 content here.</p>
<hr>
<p>Chapter 2 starts after the divider.</p>

⚠️

Don't abuse

Using multiple   to create paragraph spacing is bad practice. Use separate  elements instead — they carry semantic meaning and are styleable with CSS. Reserve   for genuine line breaks within a block (like addresses and poetry).

Section 4

Inline Text Semantics

Inline elements live inside paragraphs and headings. Unlike block elements, they don't start on a new line — they flow with the surrounding text. Each carries a specific semantic meaning:

Important content

Strong importance — bold by default. Use for critical information.

Emphasised text

Stress emphasis — italic by default. Changes meaning in a sentence.

Highlighted text

Marked/highlighted for relevance. Often used in search results.

Fine print text

Side comments, disclaimers, copyright notices.

~~Old price £99~~ £49

Deleted and inserted text — for edits and revisions.

&

H₂O and E=mc²

Subscript (chemicals) and superscript (math, footnotes).

HTMLInline elements in context

<p>
  This is <strong>critical information</strong> you must read.
  This is <em>emphasised</em> for stress (like speaking aloud).
  Search results <mark>highlight</mark> the searched term.
  <small>Terms and conditions apply.</small>
</p>

<p>Water is H<sub>2</sub>O and Einstein's formula is E=mc<sup>2</sup>.</p>

<p>Sale price: <del>£99</del> <ins>£49</ins></p>

Section 5

Preformatted Text

The <pre> element preserves whitespace exactly as written in the HTML source — including spaces, tabs, and newlines. It's typically rendered in a monospace font. Perfect for code samples and ASCII art.

HTMLPreformatted text

<!-- <pre> preserves all whitespace -->
<pre>
function greet(name) {
    return `Hello, ${name}!`;
}
</pre>

<!-- <pre> + <code> is the standard combo for code blocks -->
<pre><code>
for i in range(10):
    print(i)
</code></pre>

Element	Use case	Whitespace
`<p>`	Regular paragraphs of text	Collapsed
`<br>`	Line break within a paragraph	N/A
`<hr>`	Thematic break between sections	N/A
`<pre>`	Preformatted text, code samples	Preserved
`<pre><code>`	Code blocks (semantic standard)	Preserved

🧩 Quick Check — Lesson 8

5 questions · instant feedback

1. What happens to multiple spaces in HTML source code?

2. What is the correct way to create two separate paragraphs?

3. Which element is appropriate for a postal address with line breaks?

4. What semantic meaning does carry?

5. Which element preserves whitespace and newlines exactly as typed?

🏆

Quiz Complete!

Text elements mastered! On to formatting tags.

🏆

Lesson 8 Challenge

Code exercise · 12 min

Write a rich text article using proper text elements.

Create a short article page about "The History of the Internet" that includes:

1. A  with a sentence containing  for the most important point
2. A  with  to emphasize a key term (first use = italicised by convention)
3. A  with a date using  (e.g., "the 21^st century")
4. A price comparison using <del> and <ins>
5. An address block using  with   between lines
6. A <pre><code> block containing a sample command or code snippet
7. An <hr> to separate the main article from a footer section

Show hints

and both render bold but strong has semantic meaning
and both render italic but em has semantic meaning
Always wrap code inside both <pre> and <code> for best semantics
<hr> is a self-closing element, no closing tag needed

← Headings

Lesson 8 of 35HTML Fundamentals

Formatting Tags →