Command Palette

Search for a command to run...

Hectal
PHASE 1Beginner ~19 min· topic 2 of 8

Topic 1.2

Headings and Paragraphs

In one line

Headings <h1> to <h6> give a page its outline from most to least important, paragraphs <p> hold blocks of text, and the browser squeezes all spaces and line breaks in your code into single spaces.

0/8 · 0%

Think of it like this

A school textbook. The book title on the cover is the <h1>. Each chapter title is an <h2>, each section inside a chapter is an <h3>, and so on. The ordinary text under each title is made of paragraphs. You can find any section by flicking through the titles without reading every word.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Heading
A title for a page or section, written with <h1> to <h6>.
Heading level
The number in h1–h6: how important the heading is in the outline. 1 is the top.
Outline
The structure made by all the headings together, like a table of contents.
Screen reader
A program that reads a page out loud (or on a braille display) for people who can't see the screen.
Paragraph
A block of text about one idea, written with <p>.
Whitespace
Spaces, tabs and line breaks. The browser shrinks each run of them to one space.
Margin
Empty space outside an element. Paragraphs and headings get some by default.
Line break
Forcing the text to continue on the next line, done with <br>.

Step by step

01Give the page one main heading

Start with a single <h1> that names the whole page. It's the title of your book.

index.htmlwhole filehtml
<h1>Growing tomatoes</h1>

02Add sections with h2

Each main part of the page gets an <h2>, followed by its paragraphs.

index.htmlwhole filehtml
<h1>Growing tomatoes</h1>
<h2>Planting</h2>
<p>Plant seeds indoors six weeks before the last frost.</p>
<h2>Watering</h2>
<p>Water deeply twice a week.</p>

03Add a sub-section with h3

A sub-topic of Planting gets an <h3>, placed under the Planting <h2>. The levels now form a tree.

index.htmlwhole filehtml
<h1>Growing tomatoes</h1>
<h2>Planting</h2>
<p>Plant seeds indoors six weeks before the last frost.</p>
<h3>Choosing seeds</h3>
<p>Cherry tomatoes are the easiest to start with.</p>
<h2>Watering</h2>
<p>Water deeply twice a week.</p>
Add a sub-section with h3diagram
Rendering diagram…

04Watch whitespace collapse

Write a paragraph across several lines with extra spaces. On the page it shows as one line of text with single spaces, wrapping only where the window is too narrow.

index.htmlwhole filehtml
<p>Water      deeply
   twice
   a week.</p>
<!-- shows as: Water deeply twice a week. -->

05Break a line on purpose

For an address, each line is part of the meaning, so <br> is the right tool.

index.htmlwhole filehtml
<p>Green Garden Shop<br>
12 Park Road<br>
Pune 411001</p>

Try it yourself

  1. 1

    Change a level, not a size

    In the outline example, predict what changes in the console if you turn <h3>Choosing seeds</h3> into an <h2>. Run it: the outline now says Choosing seeds is a main section, not part of Planting.

  2. 2

    Add more spaces

    In the whitespace example, add twenty spaces and three Enter presses in the middle of the first paragraph. Predict the console line before you run it.

  3. 3

    Add a section

    In the outline example, add an <h2>Harvesting</h2> with a paragraph at the end, and an <h3>When to pick</h3> under it. Check the console outline.

Code & diagrams

Six heading levels and their default sizes New tab

These are only the browser's default sizes. Pick the level for the outline, then set the size in CSS.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

h1 32px
h2 24px
h3 18.72px
h4 16px
h5 13.28px
h6 10.72px
Whitespace collapses, br breaks New tab

`innerText` gives the text as the page shows it, after whitespace has collapsed.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Shown on the page: "This paragraph is written across several lines with extra spaces."
Line breaks in the poem: 3
List the page's outline New tab

This is roughly the heading list a screen reader user sees. Indentation shows the level.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

H1 Growing tomatoes
  H2 Planting
    H3 Choosing seeds
  H2 Watering

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Choose a heading for its size

Under an <h2>, use <h4> for a sub-section because <h3> looked too big.

terminal
$ screen reader heading list
── what you'll see ──
Heading level 2, Planting
Heading level 4, Choosing seeds

Break #2

Make space with empty paragraphs

Add <p></p><p></p><br><br> between two sections to push them apart.

terminal
$ the page shows
── what you'll see ──
The gap appears, but it changes size unpredictably, and screen readers may announce "blank" for the empty elements.

Myth vs fact

Myth

<h1> means big text.

Fact

<h1> means the top heading of the outline. The big default size is only the browser's stylesheet; CSS can make any heading any size.

Myth

Pressing Enter in my HTML makes a new line on the page.

Fact

Line breaks in the code collapse to a single space. Use a new <p> for a new paragraph or <br> for a meaningful line break.

Myth

A page must never have more than one <h1>.

Fact

The HTML standard allows several, but one <h1> per page that names its main topic is the clearest pattern for screen reader users and is what most guidance recommends.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

  • ▸

    The HTML standard once described an "outline algorithm" where <h1> inside each <section> would be ranked by nesting. No browser or screen reader ever implemented it, and it was removed from the standard in 2022. Heading levels are what assistive technology uses, so choose them explicitly (more in Topic 2.3).

  • ▸

    Browsers' default stylesheets used to shrink an <h1> nested inside <article>, <aside>, <nav> or <section>. Browsers began removing that rule in 2025, so give every heading an explicit size in your CSS instead of relying on defaults.

  • ▸

    Whitespace between elements can still matter: between two inline elements (like two <img> or <button> elements on separate lines), the collapsed space shows as a visible gap of about 4px. It's a classic CSS layout puzzle that flexbox and grid avoid.

  • ▸

    innerText is layout-aware (it reflects collapsed whitespace and hidden elements, and reading it can force a layout); textContent returns the raw text exactly as written and is faster.

Remember this

  1. 1

    HTML has six heading levels: <h1> (most important) down to <h6> (least important). The number is the rank in the outline, not a size. Browsers do show higher levels bigger by default (an <h1> is twice the normal text size), but you choose a level for its place in the structure and change the size with CSS.

  2. 2

    Headings make an outline, like a table of contents. A page usually has one <h1> saying what the whole page is about. Each <h2> starts a main section, an <h3> starts a sub-section of that <h2>, and so on. Go down one level at a time: don't jump from <h2> to <h4> because the <h4> looks the right size.

  3. 3

    Order matters because people and programs navigate by headings. Screen readers (programs that read the page aloud for blind and low-vision users) have a key that jumps from heading to heading and a list of all headings with their levels. Search engines read headings to understand the topics of a page. A skipped or mis-ordered level makes the outline confusing, like a book where chapter 3 sits inside chapter 1.

  4. 4

    A paragraph <p> is a block of text about one idea. The browser puts a blank gap (a margin, about one line high) above and below each paragraph. Use one <p> per paragraph: never use empty paragraphs or several <br> tags to make space; that's CSS's job.

  5. 5

    Whitespace collapses. Whitespace means spaces, tabs and line breaks in your code. The browser turns any run of whitespace inside text into one space, and drops whitespace at the start and end of a block. So pressing Enter in your code does not start a new line on the page, and ten spaces show as one. This lets you indent and wrap your code freely.

  6. 6

    To force a line break inside a paragraph, use the void element <br>. Use it only where the break is part of the content, like lines of a poem or an address. To keep the exact spaces and line breaks of your code, use <pre> (preformatted text, Topic 2.4) or the CSS white-space property (CSS course).

Explain it without notes

01

Why should heading levels follow the structure of the content and not their visual size?

02

What does the browser do with spaces, tabs and line breaks in your HTML text?

03

When is <br> the right choice, and when is it the wrong one?

Practice

01

Write the headings and paragraphs for a page called My pets with two sections, Dogs and Cats, and a sub-section Feeding inside Dogs. Each heading gets one short paragraph.

02

Write a paragraph containing a three-line address, so each part appears on its own line.

Trade-offs

  • ↔

    One <h1> per page gives the clearest outline; several <h1> elements are valid HTML but make it harder for screen reader users to find the main topic.

  • ↔

    <br> keeps meaningful line breaks in the content; CSS white-space keeps all whitespace but moves that meaning into the stylesheet, where it is lost if CSS fails to load.

Done when you can

  • I can use <h1>–<h6> to build an outline without skipping levels.

  • I can explain why heading levels matter to screen readers and search engines.

  • I can write paragraphs and know that spacing belongs in CSS.

  • I can predict how whitespace in my code will appear on the page.

  • I can use <br> for meaningful line breaks only.