Text & Headings
Heading hierarchy, semantic emphasis, and why structure beats presentation.
Now that the skeleton is in place, let's fill the <body> with the most common content of all: text. You already met <p> for paragraphs and <h1> for the main heading. This lesson is about using the six heading levels correctly — because they do far more than change font size.
Six headings exist: <h1> through <h6>. Most pages only need two or three. The critical idea: headings create a document outline — an invisible table of contents that search engines and screen readers use to understand and navigate your page.
The rule is simple: one <h1> per page (the page's single main topic), then <h2> for major sections, <h3> for sub-sections. Never skip a level.
<h1>The Art of Bread Baking</h1>
<p>Bread is one of humanity's oldest foods — here is how to make a perfect loaf.</p>
<h2>Ingredients</h2>
<p>You need <strong>high-quality flour</strong> and <em>fresh yeast</em>.</p>
<h2>Technique</h2>
<h3>Kneading</h3>
<p>Knead for at least <strong>10 minutes</strong> until the dough is smooth.</p>The outline here reads: one main topic, two sections, one sub-section under the second. Clean and logical — exactly what Google indexes and what a screen reader user can jump through.
A page has an <h1> followed immediately by an <h3>, with no <h2> between them. What is the real problem?
- ASyntax error — the browser refuses to render
- BThe h3 looks too small
- CThe document outline has a gap — screen readers and Google cannot follow the content hierarchy
- DNo problem — heading levels are just font sizes
Inside your paragraphs you will often want to stress certain words. HTML gives you two semantic (meaning-carrying) elements for this:
<p>Never share your <strong>password</strong> with anyone.</p>
<p>This is <em>really</em> important.</p><strong>— marks text as important. Renders bold, and screen readers may say it with extra force.<em>— marks emphasis (the stress you'd put on a word when speaking). Renders italic.
There are also <b> (just bold) and <i> (just italic), but those only change appearance and carry no meaning. Prefer <strong> and <em> — they look the same and communicate intent to search engines and assistive tech.
What does this render?
<p>Hello <strong><em>World</em></strong></p>- AHello World (bold italic)
- BError — cannot nest strong and em
- CHello World (bold only)
- DHello World (italic only)
Mark the word "critical" as semantically important:
<p>This is a <___>critical</___> update.</p>How many <h1> elements should a typical page have?
- AAs many as you like
- BOne — the single main topic of the page
- CAt least two, for SEO
- DNone — use CSS classes instead
- Headings
<h1>–<h6>build a document outline that search engines and screen readers navigate - Use one
<h1>(the main topic), then<h2>for sections and<h3>for sub-sections — never skip levels - Heading level means structure, not font size — change size with CSS, not by picking a different level
<strong>marks important text and<em>marks emphasis — they carry meaning, unlike the purely visual<b>and<i>
Next up: a hands-on practice lesson where you'll assemble everything from this module into a real page.