Headings and Text

Headings and Text

Text is the heart of the web. Let's learn how to make headings and paragraphs.

Headings: h1 to h6

Headings are like titles in a book. There are six sizes:

• <h1>: the biggest, most important title (usually one per page)
• <h2>: section titles
• <h3>: sub-section titles
• ...all the way down to...
• <h6>: the smallest

<h1>My Story</h1>
<h2>Chapter One</h2>
<h3>Part One</h3>

Think of it like a family tree: h1 is the grandpa title, and each smaller heading is a child beneath it. Don't skip levels: go 1, 2, 3 in order!

Paragraphs: <p>

Paragraphs are for chunks of text. Browsers put a little space before and after each one.

<p>This is one paragraph.</p>
<p>This is another paragraph.</p>

Line breaks: <br>

<br> makes a new line without starting a new paragraph. It's like pressing Enter inside a sentence. It has no closing tag!

<p>First line<br>Second line</p>

Horizontal rule: <hr>

<hr> draws a straight line across the page. It's like a divider between sections.

<p>Part one</p>
<hr>
<p>Part two</p>

Whitespace

Here's a secret: HTML squashes extra spaces and newlines into one space. So:

<p>Hello      there!</p>

shows up as "Hello there!"

If you really want to keep spaces and line breaks, use <pre> (preformatted text): it keeps everything exactly as you type it, like a typewriter.

TL;DR

• <h1> to <h6> are headings, biggest to smallest.
• <p> is a paragraph.
• <br> makes a line break (no closing tag).
• <hr> makes a divider line.
• <pre> keeps spaces and line breaks.