Goal
You’ll be able to choose the correct semantic text element for a given situation, and understand why “how it looks” and “what it means” are genuinely different questions in HTML, even when the visual result looks identical.
Learn
HTML offers several elements for emphasizing or structuring text, and choosing between them is about meaning, not just visual appearance:
<h1>through<h6>— headings, in decreasing importance order.<h1>should be the single main heading of a page; using multiple<h1>elements, or skipping levels (like jumping from<h2>straight to<h4>), breaks the logical outline structure screen readers and search engines rely on.<strong>— marks text as genuinely important, seriously emphasized. Browsers render it bold by default, but the meaning is “important,” not just “bold.”<em>— marks text with stress emphasis, like how you’d naturally emphasize a word when speaking it aloud. Browsers render it italic by default, but again, the meaning is “emphasized,” not just “italic.”<b>and<i>— purely visual bold/italic, with no semantic meaning attached at all. These exist for cases where bold or italic styling is wanted with no implied importance or emphasis, like a stylistic product name.
Here’s the genuinely important distinction: a sighted user looking at a page can’t visually tell the difference between <strong> and <b> — both render bold by default. But a screen reader can, and does, treat them completely differently: it will often verbally emphasize <strong> content differently than plain <b> content, since one carries real semantic meaning and the other doesn’t. Search engines also weight <strong> content differently when assessing what a page is actually about.
Decision Task
You’re marking up a warning message that genuinely needs to stand out as important, versus a single word in a sentence you just want to stress naturally, like “I really mean it.” Before reading on: which HTML element fits each case?
Show Answer
The warning message: <strong> — it’s genuinely important content, not just a stylistic emphasis. The stressed word “really”: <em> — it’s natural spoken-style emphasis on one word within a sentence, not a standalone important statement.
Common Mistake
Using <h1> through <h6> purely for their default visual size, rather than their actual structural meaning — for example, using an <h3> somewhere just because its default size “looks right” for a particular piece of text, even though it breaks the logical heading order of the page. Heading size should always follow structural importance; if the default size looks wrong, that’s what CSS is for, not skipping to a different heading level.
Practice Questions
1. A page has one main <h1> title, then jumps straight to <h4> for a subsection heading. What’s wrong with this, structurally?
Show Answer
It skips heading levels (h2 and h3), breaking the logical outline order that screen readers and search engines rely on to understand the page’s structure — headings should generally descend one level at a time, not skip.
2. Why might a screen reader treat <strong>Sale ends today</strong> differently from <b>Sale ends today</b>, even though both look bold?
Show Answer
<strong> carries real semantic meaning (“this is important”), which some screen readers convey through vocal emphasis; <b> is purely visual with no semantic meaning, so it may be read in a completely flat, unemphasized tone.
3. A product name needs to always appear in italics as a stylistic brand choice, with no implied emphasis or importance. Which element fits: <em> or <i>?
Show Answer
<i> — since there’s no actual emphasis or importance being conveyed, just a stylistic visual choice, using <em> would misrepresent the actual meaning.
4. True or False: a page can have multiple <h1> elements as long as they’re visually styled to look different from each other.
Show Answer
False (as a strong best practice) — a page should generally have exactly one <h1> representing its single main topic, regardless of visual styling; multiple h1s confuse the page’s logical outline.
5. Explain the core difference in purpose between <strong>/<em> and <b>/<i>, in your own words.
Show Answer
<strong> and <em> carry real semantic meaning (importance and emphasis respectively) that assistive technology and search engines interpret; <b> and <i> are purely visual styling with no implied meaning at all.
Try It Yourself
Without looking back, mark up this sentence correctly: “Warning: this action cannot be undone.” — treating the whole warning as genuinely important, not just visually bold.
Show Answer
<strong>Warning: this action cannot be undone.</strong> — the whole phrase is genuinely important content, appropriately marked with strong rather than a purely visual b tag.
Quick Check
1. What visual style does <strong> render by default?
Show Answer
Bold.
2. What visual style does <em> render by default?
Show Answer
Italic.
3. Why is it a mistake to choose a heading level purely based on its default visual size?
Show Answer
Because it breaks the logical structural outline of the page, which screen readers and search engines rely on, independent of visual appearance which should be controlled by CSS instead.
4. What’s the key semantic difference between <b> and <strong>, even though both render bold?
Show Answer
<strong> carries real meaning (“this is important”) that assistive technology interprets differently; <b> is purely visual with no implied meaning.
5. How many <h1> elements should a typical page have?
Show Answer
Generally exactly one, representing the page’s single main topic.