PHASE 1Beginner ~25 min· topic 3 of 8

Topic 1.3

Text Formatting and Meaning

In one line

Text-level elements mark what a word means:  for importance,  for stress,  for highlights, <del>/<ins> for edits, / for small raised or lowered text, and a few more; the look comes free, but the meaning is the point.

Think of it like this

Reading a story out loud. When a word is important ("Do not touch the stove"), you say it seriously. When you stress a word to change the meaning ("I said *Tuesday*, not Monday"), your voice goes up on it. When you mention a ship's name or a foreign word, you just *say it a bit differently*. HTML has a separate element for each of these, so the page carries your voice too.

Words you'll meet

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

Semantics: What something means. A semantic element says what its content is, not only how it looks.
Text-level element: An element used inside a line of text, like  or , that doesn't start a new block.
Importance: What  marks: a word or phrase that is serious or urgent.
Stress emphasis: What  marks: the word you'd say louder, which changes the sentence's meaning.
Subscript / superscript: Text set lower () or higher () than the line, like H₂O or x².
Thematic break: A change of topic between paragraphs, marked with <hr>.
Word-break opportunity: A spot inside a long word where the browser may wrap the line if needed, marked with .
Default style: The look the browser gives an element before you write any CSS, like bold for .

Step by step

01Start with plain text

Here is a short notice with no formatting. Read it out loud: which words would you say differently?

index.htmlwhole filehtml

<p>Warning: the pool is closed on Monday. The new timings are 6am to 9pm.</p>

02Mark what is important

The warning is serious, so it gets . Screen readers do not always change voice for it, but the meaning is now in the HTML for every tool that reads it.

index.htmlwhole filehtml

<p><strong>Warning: the pool is closed on Monday.</strong> The new timings are 6am to 9pm.</p>

03Show what changed

The timings were updated. <del> shows the old value and <ins> the new one, with a datetime saying when the change was made.

index.htmlwhole filehtml

<p><strong>Warning: the pool is closed on Monday.</strong>
The new timings are <del datetime="2026-10-01">7am to 8pm</del>
<ins datetime="2026-10-01">6am to 9pm</ins>.</p>

04Add fine print and a break

A thematic break <hr> separates the notice from the small print, which goes in .

index.htmlwhole filehtml

<p><strong>Warning: the pool is closed on Monday.</strong> ...</p>
<hr>
<p><small>Timings may change during school holidays.</small></p>

05Pick by meaning, not by look

When unsure, ask the question in this diagram. If none fits, you may not need an element at all, or you want a  with CSS (Topic 2.1).

Pick by meaning, not by lookdiagram

Rendering diagram…

Try it yourself

1
Strong or b?
Write this sentence in the first example: The exam is on Friday. Bring a black pen. Decide which words are important () and which only need attention (). Explain your choice in one sentence.
2
Change the meaning with em
Write I never said she stole the money three times, putting  on a different word each time. Read each one aloud: the meaning changes.
3
Make wbr matter
In the wbr example, predict what happens if you change width: 160px to width: 400px. Run it and see which boxes still wrap.

Code & diagrams

Every text-level element in one place New tab

`strong` and `b` look the same, as do `em` and `i`. The difference is meaning, which you can't see but tools can.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

strong fontWeight 700
b fontWeight 700
em fontStyle italic
i fontStyle italic
mark backgroundColor rgb(255, 255, 0)
del textDecorationLine line-through
ins textDecorationLine underline

wbr: a long word in a narrow box New tab

The first box overflows: the browser has nowhere to break the word. The others wrap at the `` points. Widen the box to 600px and every `` does nothing.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Edits with dates New tab

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Removed: Room 4 on 2026-10-01
Added: Room 7 on 2026-10-01

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

Underline for emphasis

Write Please read the rules before you start. to make the phrase stand out.

terminal

$ user testing

── what you'll see ──

People click the underlined words, expecting a link, and nothing happens.

Break #2

Use sup to make text small and raised for decoration

Write NEW! next to a menu item to make it look like a badge.

terminal

$ the page shows

── what you'll see ──

The line height jumps: that line sits further from the line above than the others.

Myth vs fact

Myth

 and  are deprecated; always use  and .

Fact

Both are valid HTML with their own meanings:  for attention without importance,  for a different voice. Use each for its meaning.

Myth

Screen readers shout  and stress .

Fact

Most screen readers read them in the normal voice by default. Use them for the meaning anyway: search engines, reader modes, translation tools and future tools all read semantics.

Myth

 is for making text smaller.

Fact

 means side comments and fine print. To make text smaller for looks, use CSS font-size.

Pro corner

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

▸
Nesting increases importance: very is valid and means more important. Similarly, nested  means more stress. CSS font-weight: bolder in the default stylesheet is why nested bold can look heavier.
▸
<s> is not for edits; <del> is. <del> and <ins> can wrap whole blocks (several paragraphs) as well as words, and their datetime is exposed as the DOM property dateTime.
▸
 and <del>/<ins> are not announced by most screen readers by default. When the change matters (like a price drop), add visible words such as "was" and "now" so everyone gets it.
▸
 differs from the soft hyphen entity :  breaks without adding a hyphen,  shows a hyphen only when it breaks. For long URLs, CSS overflow-wrap: anywhere is often the better fix.

Remember this

1
 means strong importance, seriousness or urgency: warnings, key facts.  means draw attention without extra importance: keywords in a summary, a product name in a review. Both show in bold by default. Choose by meaning: if the sentence would still be fine read in a calm voice, it's ; if the word is a warning or key point, it's .
2
 means stress emphasis: the word you'd say louder, which changes the meaning of the sentence. "*I* didn't eat the cake" and "I didn't eat the *cake*" mean different things.  means a different voice or mood without stress: a technical term, a thought, a ship name, a word from another language (déjà vu). Both show in italics by default.
3
 highlights text that is relevant right now, like search matches on a results page or a line a teacher wants you to notice.  is for side comments and fine print: copyright lines, legal notes. It does not mean "make text smaller"; it means "this is small print".
4
 (subscript) lowers text, as in H2O;  (superscript) raises it, as in x2 or 1st. Use them only when the position is part of the meaning (chemistry, maths, footnote numbers), not to make text look fancy.
5
<del> marks text that was removed from a document and <ins> marks text that was added: a price change, a corrected article. Both can carry datetime and cite attributes saying when and why. <s> marks text that is no longer accurate or relevant but wasn't an edit, like an old price next to a sale price.  adds an underline for non-textual annotation, such as marking a spelling mistake. Avoid  otherwise: people expect underlined text to be a link.
6
Three void elements control lines:   forces a line break inside text. <hr> marks a thematic break, a change of topic between paragraphs, shown as a horizontal line.  is a word-break opportunity: it does nothing unless the line runs out of room, then the browser may break a long word or URL there.

Explain it without notes

Explain the difference between  and , and between  and .

When do you use <del>/<ins> and when <s>?

What do <hr> and  do?

Why not choose these elements for how they look?

Practice

Mark up: Caution: the floor is wet. The word café comes from French. Use the right element for the warning and for the French word.

Mark up a sale price: the old price ₹1,200 is crossed out because it's no longer valid, and the new price ₹900 is shown after it. Add a fine-print line underneath saying offers end Sunday.

Write the formula for the area of a circle, A = πr², using a superscript.

Trade-offs

↔
Semantic elements cost nothing extra and carry meaning; a  with CSS gives full visual control but no meaning, so use it only when no element fits.

Done when you can

I can choose between , ,  and  by meaning.
I can use , ,  and  correctly.
I can mark edits with <del>/<ins> and outdated text with <s>.
I know why  is rarely the right choice.
I can use  , <hr> and  and say what each does.

Command Palette

Words you'll meet

Step by step

01Start with plain text

02Mark what is important

03Show what changed

04Add fine print and a break

05Pick by meaning, not by look

Try it yourself

Strong or b?

Change the meaning with em

Make wbr matter

Code & diagrams

Break it on purpose

Underline for emphasis

Use sup to make text small and raised for decoration

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can