DEV Community

Cover image for Why HTML has both <b / i> and <strong / em>?
Mustapha Aouas
Mustapha Aouas

Posted on

71 2 4 4 8

Why HTML has both <b / i> and <strong / em>?

TLDR;

  • The b and i tags are from HTML's past, focusing on appearance.
  • The strong and em 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 and i are about appearance. They tell the browser, "Make this text bold" or "Make this text italic."
  • strong and em 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 and em tags to add the right tone or emphasis when reading the text. They might just skip over b and i 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.
Enter fullscreen mode Exit fullscreen mode

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 and i tags are from HTML's past, focusing on appearance.
  • The strong and em 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 ;)

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (23)

Collapse
 
nifty-little-me profile image
It's Just Nifty

What a great explanation!

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you!

Collapse
 
wizard798 profile image
Wizard

Thanks for sharing this, I had same questions

Collapse
 
ansara_costa profile image
Ansara Costa • Edited

Excelente. Nos cursos do Brasil os professores mostram as Tags "strong" e "em" mas não explicam corretamente o motivo de haver Tags parecidas. Realmente os conteúdos de tecnologia em Inglês é muito superior e melhor que os conteúdos em português. Obrigada pela explicação.

Collapse
 
best_codes profile image
Best Codes

Nice article. :) Very informative.

Collapse
 
anna_lapushner profile image
anna lapushner

This is really useful. It love best practices knowledge gain. Thank you!

Collapse
 
mustapha profile image
Mustapha Aouas

Thank you ! Glad to hear that

Collapse
 
thatoddshade profile image
thatoddshade

really well explained! will check what I use on my own website.

Collapse
 
komsenapati profile image
K Om Senapati

Informative. I didn't know the differences between them.

Collapse
 
laerciosant0s profile image
Laércio Santos

Underrated information. Thanks for it!

Collapse
 
j9t profile image
Jens Oliver Meiert • Edited

The b and i 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, including b and i.

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.

Collapse
 
efpage profile image
Eckehard

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.

Collapse
 
donjuantriumphant profile image
Billy Johnson

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!!

Collapse
 
efpage profile image
Eckehard • Edited

Even writing on stone plates is not totally uncommon today...

IE

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay