Welcome to Day 7 of our HTML series!
We have spent the last few days building the structure of your page. We have headings, paragraphs, and margins. Now, we need to add Tone of Voice.
When you are speaking to a customer face-to-face, you use your voice to stress certain words.
- “You must sign the contract by Friday.”
- “I really didn’t mean to do that.”
In writing, we use Bold and Italics to convey this stress. In Microsoft Word, you just hit Ctrl+B or Ctrl+I, and it works, but in HTML, it isn’t that simple. There are two ways to make text bold, and two ways to make it italic.
<b>vs<strong><i>vs<em>
Visually, they look identical. Technically, they are completely different.
If you use the wrong one, you might be “shouting” at Google when you meant to whisper, or worse, your content might sound completely flat to a blind user using a screen reader.
Today, we are going to learn the semantics of emphasis. We will show you why “Bold” is dead, why “Strong” is king, and how to make your website inclusive for everyone.
The Analogy: The Neon Shirt vs. The Megaphone 📣
To understand the difference, we need to separate Style from Meaning.
1. The <b> Tag (Bold) = The Neon Shirt
Imagine a man walking down the street wearing a bright yellow neon shirt.
- Visual: He stands out. You look at him first.
- Audio: If you close your eyes, you can’t hear him. He isn’t making any noise. He is just visually distinct.
- Use Case: Highlighting keywords in a manual, or product names.
2. The <strong> Tag (Strong) = The Megaphone
Imagine a man walking down the street shouting through a megaphone.
- Visual: You look at him (because he’s loud).
- Audio: If you close your eyes, you definitely hear him. The urgency is undeniable.
- Use Case: Warnings, deadlines, and critical information.
The Business Impact:
Google is blind. It acts like a screen reader.
If you use <b>, Google sees “different looking text.”
If you use <strong>, Google hears “IMPORTANT TEXT.”
The Tags: <b> vs <strong> 🥊
For years, web designers used <b> because it was short.
Then HTML5 came along and said: “Stop worrying about how it looks. Tell us what it means.”
The Old Way: <b> (Bring Attention To)
Use this tag when you want text to stand out, but it isn’t necessarily “important.”
- Example: The lead sentence in a blog post (Lead-in).
- Code:
<b>Note:</b> The office is closed. - Screen Reader: Reads it in a normal voice.
The New Way: <strong> (Strong Importance)
Use this for text that implies seriousness or urgency.
- Example: A warning label.
- Code:
<strong>WARNING: High Voltage.</strong> - Screen Reader: Many screen readers will actually change the pitch or tone of the synthetic voice to sound more urgent.
The WordPress Default:
When you highlight text in the WordPress editor and click the “B” button, WordPress (smartly) inserts <strong> tags, not <b>. It assumes that if you bolded it, it’s important.
The Tags: <i> vs <em> 🇮🇹
The same battle happens with italics.
The Old Way: <i> (Alternate Voice)
Use this for text that is visually different but not stressed.
- Technical Terms: Homo sapiens.
- Foreign Words: The Zeitgeist of the era.
- Thoughts: I wonder if I left the oven on, she thought.
- Screen Reader: Reads it normally.
The New Way: <em> (Emphasised Stress)
This changes the meaning of the sentence.
- Sentence: “I didn’t steal the money.” (Neutral).
- Variation A: “<em>I</em> didn’t steal the money.” (Someone else did).
- Variation B: “I didn’t <em>steal</em> the money.” (I borrowed it).
- Screen Reader: Will stress the specific word, changing the audio meaning.
Why “Span” is the Worst of Both Worlds ❌
Some bad page builders ignore these tags entirely. To make text bold, they wrap it in a generic <span> tag and use CSS styling.
** The Code:**
<span style=”font-weight: bold;”>Important Warning</span>
The Problem:
- No Semantics: To Google, this is just plain text. It has zero extra value.
- No Accessibility: A blind user will miss the warning entirely because their device won’t announce it differently.
This is like writing “URGENT” on a post-it note but sticking it on the back of the envelope.
The Accessibility Case (The Law) ⚖️
In 2026, web accessibility isn’t just nice to have; it is a legal requirement for many businesses. Approximately 2 million people in the UK live with sight loss. Many use Screen Readers (software that reads websites out loud).
If you use <strong> correctly, a blind user can skim-read your page by jumping between important points.
If you use <b> or <span>, they have to listen to the entire page in a monotone robot voice to find the price.
The Business Benefit:
Accessible sites rank better. Google’s “Lighthouse” audit tool specifically checks for correct tag usage. Building correctly with tools like GenerateBlocks ensures you pass these tests automatically.
How to Check Your Site (The Audit) 🕵️♀️
You don’t need to rewrite your whole site today. Just check your key pages.
Step 1: The “Inspect” Test
- Go to your Homepage.
- Find some bold text.
- Right-click -> Inspect.
- Look at the code panel. Do you see
<strong>,<b>, or<span style...>?
Step 2: The Logic Check
If you see <strong>, ask yourself: “Is this actually important?”
- If it’s a heading that isn’t an H2,
<strong>is good. - If it’s just a decorative design element, consider using CSS instead to keep the HTML semantic.
Summary Checklist: Your Emphasis Strategy
- [ ] Action: Stop hitting
Ctrl+Bfor decoration. Only use it for importance. - [ ] Audit: Check if your page builder outputs
<strong>or<span>. (If it’s span, consider switching to GenerateBlocks). - [ ] Context: Use
<em>for stress (“I did call you”) and<i>for names/terms (Titanic). - [ ] SEO: Bold your main keyword once in the first paragraph using
<strong>to signal relevance to Google.
HTML is about meaning. By using the right tags, you ensure your message is heard loud and clear, whether your customer is reading with their eyes or listening with their ears.
📅 Coming Up Tomorrow…
We have mastered lists, headings, and emphasis. But lists are tricky.
Why do some lists have bullets, and some have numbers? And how do you make a “Listicle” that Google features at the top of search results?
Join us for The Listicle Secret: Using <ul>, <ol>, and <li> Correctly.