Skip to content
WANCODE
BM

Headings, Paragraphs & Text

12 minBeginnerHTML · CSS · JS

In this lesson

  • Build a sensible heading outline with one <h1> and no skipped levels
  • Know when to use a new <p> and when a <br> is right
  • Use <strong> and <em> to add meaning, and leave the looks to CSS

The big idea

HTML describes what text means, not how it looks. A heading is a heading because it introduces a section, not because it's big. Pick tags for meaning, then style them with CSS.

Headings are an outline

HTML has six heading levels, <h1> to <h6>. Together they work like the table of contents in a textbook: <h1> is the title of the whole page, <h2>s are its chapters, <h3>s are sections inside a chapter, and so on.

HTML
<h1>Malaysian Drinks</h1>        <!-- the page title: use one -->
  <h2>Hot drinks</h2>             <!-- a chapter -->
    <h3>Teh tarik</h3>            <!-- a section inside it -->
    <h3>Kopi O</h3>
  <h2>Cold drinks</h2>
    <h3>Sirap bandung</h3>

Indented here only to show the outline. In real files headings sit side by side.

  • Use one <h1> per page: the main topic.
  • Don't skip levels going down: an <h2> should be followed by <h3>, not <h5>.
  • Never choose a heading level because of its size. Want a smaller heading? That's a job for CSS.

Why it matters

Screen reader users often jump from heading to heading to skim a page, just like you skim with your eyes. Search engines also use headings to understand what your page is about. A messy outline makes your page harder for both.

Paragraphs and line breaks

Browsers squash all spaces and new lines in your HTML into a single space. Pressing Enter in the editor does nothing on the page. To start a new paragraph, use a new <p>. A <br> (a void element, no closing tag) forces a line break inside one block of text, which suits things where the line breaks are part of the content: an address, a poem, a signature.

Line breaks used as spacing

HTML
<p>First idea.<br><br>Second idea.<br><br>Third idea.</p>

Real paragraphs

HTML
<p>First idea.</p>
<p>Second idea.</p>
<p>Third idea.</p>

<br><br> looks similar, but it's one paragraph pretending to be three. Separate ideas deserve separate <p> elements, and CSS controls the gap between them.

Importance and emphasis

<strong>
Strong importance: warnings, key facts. Browsers show it bold by default.
<em>
Emphasis, the stress you'd put on a word when speaking ("I really mean it"). Shown in italics by default.
<b> / <i>
Bold and italic without extra meaning, e.g. a product name or a foreign word. Use them only when strong/em don't fit.
HTML
<p><strong>Warning:</strong> the tea is very hot.</p>
<p>Pull it <em>slowly</em> the first time.</p>

Meaning first, looks second. In the editor's style.css, strong is coloured red. You could make <em> bold and <h1> tiny with CSS; the meaning stays the same. That's the split you'll keep using: HTML says what it is, CSS says how it looks.

Whoever wrote this recipe picked heading levels by size. Fix the outline: the recipe name should be the page's only <h1>, and "What you need" and "Steps" should be <h2> chapters. Remember to change both the opening and closing tags.

Checks

  • The page has exactly one <h1>
  • There are at least two <h2> sections
  • The outline starts at <h1> and never skips a level

Check understanding

Q1

You want a section title to look smaller. What should you do?

Q2

Which of these is a good use of <br>?

Q3

What's the difference between <strong> and <b>?

What you learned

  • Headings form an outline: one <h1>, then <h2>, <h3>… without skipping levels.
  • Each idea gets its own <p>; <br> is only for line breaks that belong to the content.
  • <strong> means important, <em> means stressed. Both add meaning, not just style.
  • Choose tags for meaning; change how things look with CSS.
Preview

Console output from your code appears here.

Step 1 of 3