TLDR;
- The
b
andi
tags are from HTML's past, focusing on appearance. - The
strong
andem
tags represent HTML's present and future, focusing on meaning.
As a web developer, you might have noticed something puzzling. There seem to be two sets of tags that do very similar things:
1 The b
tag makes text bold, and the i
tag makes it italic.
2 The strong
tag also makes text bold, and the em
tag makes it italic.
So why does HTML have both? Aren't they doing the same job? Well, not exactly. Let's uncover the story behind these seemingly redundant pairs.
A Brief History Lesson
To understand why we have both sets of tags, we need to take a quick trip back in time. When HTML was first created in the early 1990s, it included the b
and i
tags. These tags were straightforward: b
made text bold, and i
made it italic. Simple, right?
But as the web evolved, developers and designers realised something important: HTML shouldn't just be about how things look. It should also be about what things mean.
Enter Semantic HTML
This realisation led to the concept of "semantic HTML”. The word "semantic" refers to the meaning of something. In the context of HTML, it means using tags that describe what the content is, not just how it looks.
This is where strong
and em
come in. These tags were introduced to give meaning to the text, not just change its appearance:
-
strong
indicates that the text is important or urgent. -
em
(short for emphasis) suggests that the text should be stressed when read.
So, here's the big difference:
-
b
andi
are about appearance. They tell the browser, "Make this text bold" or "Make this text italic." -
strong
andem
are about meaning. They tell the browser, "This text is important" or "This text should be emphasised”.
Why Does It Matters
You might be thinking, "Okay, but they still look the same on the page. Why should I care?”.
Well, I see two main reasons why this distinction is important:
- Accessibility: Screen readers (software that reads web pages aloud for visually impaired users) can interpret
strong
andem
tags to add the right tone or emphasis when reading the text. They might just skip overb
andi
tags. - Search engines: Some search engines might give more weight to text within
strong
tags, considering it more important.
When to Use Which?
Let's look at an example to make this clearer:
The zoo's new panda, named Mei Lan, will make her
<strong>public debut next Tuesday, July 16</strong>.
Visitors are advised to arrive <em>early</em> as large
crowds are expected.
<b>Note:</b> Her favorite food is <i>bambusa vulgaris</i>,
a type of bamboo.
In this example:
-
strong
is used for the important information about the debut date. -
em
emphasises that visitors should arrive early. -
b
is used for a note that's visually distinct but not necessarily more important. -
i
is used for the scientific name of the bamboo species.
The Bottom Line
While b
/i
and strong
/em
might look the same on a webpage, they serve different purposes.
- The
b
andi
tags are from HTML's past, focusing on appearance. - The
strong
andem
tags represent HTML's present and future, focusing on meaning.
As a general rule, it's best to use strong
and em
in your HTML. They provide more information about your content's meaning and can improve accessibility and search engine optimisation.
However, b
and i
still have their places for purely visual styling or in specific situations where you don't want to imply extra importance or emphasis. That said, for simple visual styling, you can use a span
elements with CSS classes, as it offers more flexibility and maintains a clearer separation between content and presentation.
Good HTML isn't just about making pages look right — it's about making them mean right too ;)
Top comments (20)
Thanks for sharing this, I had same questions
What a great explanation!
Thank you!
Nice article. :) Very informative.
This is really useful. It love best practices knowledge gain. Thank you!
Thank you ! Glad to hear that
Informative. I didn't know the differences between them.
For a truely modern formatting, these tags are just small drops on a very hot stone. So we could also ask, why the very few tags the history of HTML provided for formatting should be used at all, while 99% of the formatting is done in CSS.
The article did say 1990's and some websites and search engines STILL use these today ... not everything is an app just yet.
*looking at you Japanese websites!!
Even writing on stone plates is not totally uncommon today...
The
b
andi
elements did get an updated meaning with what was called “HTML 5,” which is now the HTML living standard. The HTML spec explains the meanings of all elements and provides examples, includingb
andi
.The four elements are distinct and can be used (preferably according to their purpose).
There has been lots of confusion around these elements—therefore good to discuss them!—, but they do have a place.
Underrated information. Thanks for it!
Thanks for the article, I didn't know the difference. I have to say that for me semantically I understand better that b is from bold and i from italic and I like that they are less bytes, but it is also the habit of years and years using them, if I started today I would find it much better strong than b, although "em" to me is more confusing to relate it to italic than i...
Imagine having a paragraph quote, which is styled to be entirely italicised.
Inside that quote, you want to have a word or phrase emphasised, like the name of a book for example. With
<i>
, you're limited to turning italics on.If you then use CSS to say that, for example,
then it's pretty confusing to read. There's literally a rule saying, "make italic text not italic". If you take the visual wording away, then it's easier to read because there's no contradiction.
Got it! Good point
That's no longer true. These elements were updated in HTML5 and are described in the spec.
The
b
element:The
i
element:In fact, I would argue that the
i
element has far more use cases than theem
element. The latter is used only for stress emphasis:Your example showing usage of these elements is in-pair with what the specification says:
strong
to mark up the most important part of the text (the date of the debut).em
to correctly put stress emphasis the word "early".b
to bring attention to the "Note" word without marking it as more important than the rest of the content.i
to mark up a scientific term.Due to that, I'm quite confused because the example contradicts what you said about these elements.
The “b” and “i” elements did get an updated meaning with what was called “HTML 5.” (The HTML spec clarifies on the meanings and gives examples.)
The four elements are distinct and can be used (preferably according to their purpose).
The “b” and “i” elements did get an updated meaning with what was called “HTML 5.” (The HTML spec clarifies on the meanings and gives examples.)
The four elements are distinct and can be used (preferably according to their purpose).
Hi Mustapha Aouas,
Top, very nice and helpful !
Thanks for sharing.
Nice article, thanks for sharing.