HTML’s <b>
vs <strong>
— And Why It Actually Matters
I once audited a university website that looked totally fine — until a blind student tried to use it. Critical warnings were wrapped in <b> tags instead of <strong>. Screen readers skipped right past them. It wasn’t a bug. It was a misunderstanding of HTML semantics — and it cost that student valuable information.
This stuff matters. Not because of aesthetics. But because of meaning.
So let’s talk about <b> and <strong>. Same boldness on screen, but very different messages behind the scenes.
1. What’s the Difference?
<b>
means: “make this visually bold” — but carries no meaning.<strong>
means: “this content is important” — and screen readers announce it with emphasis.
In short: <b>
is style. <strong>
is substance.
To a sighted user, they may look the same. But assistive tech treats them very differently.
2. Why It Matters in Practice
Let’s say you’re writing instructions or alerts. Would you use <b>
or <strong>
?
- ✔
<strong>
is perfect for warnings, system messages, and key actions like “Do not close this window.” - ❌
<b>
should be reserved for purely visual emphasis, like bolding a product name or highlighting a date — and even then, CSS is often the better tool.
Think of it this way: if your bolded text changes how someone understands the content — use <strong>
. If it’s just for looks, use <b>
(or better, style it with font-weight
in CSS).
3. But Doesn’t CSS Make This Obsolete?
Not quite. Yes, CSS gives us font-weight: bold;
— and that should be your go-to for styling. But HTML exists to express meaning, not just appearance.
Using <strong>
tells search engines, screen readers, and future collaborators: “This isn’t just bold — it’s important.”
That semantic signal can influence accessibility, SEO, and the developer experience downstream.
Metaphor Time
Using <b>
for something meaningful is like writing “WARNING” in giant neon text — but forgetting to mention what the warning is about. It may look loud, but it says nothing.
<strong>
gives your markup a voice, not just a look.
4. When I Use Each
- I use
<strong>
for alerts, required actions, and anything the user must not miss. - I almost never use
<b>
— unless I’m styling legacy content or want a quick visual effect in an internal doc (and even then, I usually reach for CSS).
5. What This Means for Your Next Project
If you’re working on a form, a modal, or even just some marketing copy, ask yourself: Does this text carry weight, or is it just dressed up?
- Use
<strong>
when the meaning matters. - Use
<b>
for purely stylistic bolding (rarely). - Use CSS for all the rest — especially when you need control over design.
Remember: good HTML isn’t just for now. It’s for the humans, devices, and bots that will interact with your code tomorrow.
Still unsure when to use what? Contact me here and I’ll help you think it through — or review your markup hands-on.