HTML · Quick Reference

Lesson 8 — Paragraphs & Text Cheat Sheet

HTML

In one line: The <p> 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 eleme...

Key Ideas

1The Paragraph Element. The <p> 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-l...

2HTML Whitespace Rules. HTML collapses all consecutive whitespace (spaces, tabs, newlines) into a single space when rendering. This is called whitespace normalisation — your source formatting...

3Line Breaks & Horizontal Rules. Two simple elements give you control over visual flow without creating new paragraph blocks:

4Inline 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 specif...

5Preformatted 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....

Code Examples

<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 ...

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

<...

<!-- <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...