Session 2 — Text and semantic markup

You will turn plain prose into structured HTML using semantic elements: headings (h1–h6) that form the page outline, paragraphs, <em> for emphasis, <strong> for importance, block quotes, sup/sub, and HTML entities for special characters. The core habit: choose the element that says what the text means, not what it looks like. You will also learn the two families every element belongs to — block (stacked boxes) and inline (words inside text) — which underpins all later layout work.

Plan: ideas → worked markup → bridge → short drills → reveal.

Time: about 55–65 minutes if you annotate every phrase's meaning before choosing an element.

Session 2 — Text and semantic markup

The one-paragraph story

Text is the heart of most pages, and HTML gives it meaning through semantic elements: <h1>–<h6> for headings, <p> for paragraphs, <strong> for importance, <em> for emphasis, plus <blockquote>, <sup>, <sub>, and more. The key idea is that these elements describe what a phrase is, not what it looks like — the browser supplies the default look, and CSS can restyle any of them later. You will also meet the two families every element belongs to: block elements (which stack vertically and occupy a full line) and inline elements (which flow inside text). This session fills the Harbor Café pages with properly structured prose.

---

Headings: the page's outline

Six levels of heading exist, from <h1> (the page's main title) down to <h6>:

<h1>Harbor Café</h1>
<h2>Our Story</h2>
<h3>The roastery on the pier</h3>

Browsers draw h1 largest and h6 smallest by default, but that is just a default. The important habit is to use headings for structure, not size: one h1 per page for the page title, h2 for major sections, h3 for sub-sections. Search engines and screen readers use this outline to understand the page — so skipping levels (h1 straight to h3) makes the outline confusing, and picking an h2 just because "it looked smaller" is the same mistake wearing a different hat.

---

Paragraphs and line flow

A <p> is a block of prose. Several paragraphs stack vertically with space between them:

<p>We opened the Harbor Café in 2016 with a single espresso machine.</p>
<p>Today the roastery roasts twelve origin coffees a week.</p>

Whitespace collapses. In HTML, multiple spaces, tabs, and newlines inside text render as a single space. This is why you cannot fake layout with spacing — two blank lines in the source are still one space on screen. Line breaks must be intentional: a new paragraph, or the br element inside a paragraph (written as <br> only inside code examples).

---

Emphasis and importance

Two pairs of elements are easy to confuse because they look similar by default:

• <em> — emphasis: a word that would be stressed when read aloud. "I said the blue cup, not the red one."
• <strong> — importance: a word that matters a lot. "Warning: the pier is slippery."

<p>Order by <strong>noon</strong> for same-day pickup.</p>
<p>The coffee is <em>very</em> strong.</p>

em is for tone, strong is for weight. (Older HTML had <i> and <b> which were purely presentational — italics and bold — and they still work, but for meaning you want em and strong, which are what screen readers respond to.)

---

Quotations

A block quote is a longer quotation set off from the text:

<blockquote>
  <p>The sea, the beans, the morning — that is the whole recipe.</p>
</blockquote>

Browsers indent block quotes by default. A short, inline quotation uses the q element — write <q>Fresh daily</q> inside the paragraph: the sign reads "Fresh daily". (The q element's default quotes vary by browser and language, so many writers just type the quotation marks — both are fine; the element is the more meaningful choice.)

---

Subscripts, superscripts, and the details that matter

Small but precise: <sup> raises text (exponents, footnote numbers), <sub> lowers it (chemical formulas, indices):

<p>Water boils at 100&deg;C, written H<sub>2</sub>O.</p>
<p>Area is measured in m<sup>2</sup>.</p>

Note the HTML entities in the first line: ° renders as the degree sign °. Entities are the way to type characters that either are not on your keyboard or have a special meaning in HTML (the most famous being < for a literal less-than sign and & for a literal ampersand).

---

Block vs inline: the two families

Every element belongs to one of two families:

• Block elements start on a new line and take the full available width: headings, paragraphs, lists, block quotes. Think of them as boxes stacked vertically.
• Inline elements sit inside text and flow with it, taking only as much width as their content: em, strong, sup, sub, a (links, next session), img (images). Think of them as words inside a paragraph.

<p>A paragraph with <em>inline</em> emphasis.</p>
<h2>A block heading</h2>

This distinction matters enormously from Session 8 onward (layout), because the two families behave differently — block elements can hold inline elements and other blocks; inline elements should sit inside blocks, not wrap them. A block inside an inline element is a structural error that browsers patch up in unpredictable ways.

---

The semantic mindset

A useful rule for everything in this session: choose the element that says what the text means, not what it should look like. Default looks are replaceable with CSS; meaning is structural. When you write "Important!" you are choosing strong because it is important, not because you want bold. When a future session changes strong to render in red with no bold at all, the markup still makes sense.

---

Pitfalls to watch for

• Headings are structure, not sizes. One h1 per page; don't skip levels.
• Whitespace collapses — spacing in the source is not spacing on screen.
• em is emphasis, strong is importance — they are not interchangeable synonyms for "italic" and "bold".
• Block elements stack; inline elements flow. Don't put a heading inside a paragraph, and don't wrap a paragraph in an inline element.

Session 2 — Worked examples

Example A — An "Our Story" section with real structure

<h2>Our Story</h2>
<p>We opened the Harbor Café in 2016 with a single espresso machine and a
stack of mismatched mugs. The plan was simple: <em>good coffee, honestly made</em>.</p>
<p>By 2020 the roastery on the pier was roasting <strong>twelve</strong> origin
coffees a week, and the queue stretched past the bait shop.</p>

Read it element by element:

1. The h2 heading "Our Story" — a major section heading. The page already has an h1 ("Harbor Café"), so the section gets h2, not another h1.
2. First paragraph — notice the source has a newline inside the paragraph ("machine and a" then the rest). On screen that newline is a single space: whitespace collapse.
3. The em element wraps "good coffee, honestly made" — emphasis: the phrase would be stressed in speech.
4. Second paragraph — the strong element wraps "twelve" and carries importance: the count is the point.

---

Example B — Whitespace collapse in action

<p>One   two     three</p>
<p>Four
    five</p>

Both paragraphs render as ordinary sentences: "One two three" and "Four five". Tabs, runs of spaces, and newlines all became a single space. If you genuinely want a line break, you must write it (a new paragraph, or the br element).

---

Example C — Headings as an outline

<h1>Harbor Café</h1>
<h2>Our Story</h2>
<h2>Menu</h2>
<h3>Coffee</h3>
<h3>Pastries</h3>
<h2>Visit Us</h2>

The outline reads top to bottom: one page title, three major sections, and two sub-sections under "Menu". A screen reader user hears exactly this structure. If "Pastries" had been an h2, the outline would still be flat and usable — the rule is to keep levels consistent, not to obsess over which level.

---

Example D — Emphasis vs importance

<p>The <em>whole</em> city smelt of roasting beans.</p>
<p><strong>Do not</strong> park in the delivery zone.</p>

• em on "whole" — the stress falls there in speech: "the whole city".
• strong on "Do not" — the command's importance; a warning.

Both render bold-italic by default, but they mean different things. A screen reader can stress em differently from strong, and CSS can style them completely differently.

---

Example E — Block quotes

<blockquote>
  <p>The sea, the beans, the morning — that is the whole recipe.</p>
</blockquote>
<p>— the chalkboard by the register</p>

The quote sits indented as its own block. Note the inner <p>: a block quote is a container that holds a paragraph. (The short line after it, "— the chalkboard…", attributes the quote; attribution is ordinary prose, not part of the quote.)

---

Example F — Superscripts, subscripts, and entities

<p>The beans ship in 5&nbsp;kg sacks, and the store is 120 m<sup>2</sup>.</p>
<p>The blend is 60% arabica, 40% robusta — H<sub>2</sub>O is the only other ingredient.</p>
<p>Use <code>2 &lt; 3</code> in code, and write &amp; as &amp;amp; in HTML.</p>

• m<sup>2</sup> — square metres.
• H<sub>2</sub>O — water's formula.
• 5 kg — a non-breaking space keeps "5 kg" from splitting across lines.
• < renders <, & renders &. That is why the literal text & is written the way it is: to show a literal ampersand you must write the entity &.