DEV Community

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

Mustapha Aouas on September 16, 2024

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, focus...

Read full post

Best Codes • Sep 16

Nice article. :) Very informative.

Wizard • Sep 16

Thanks for sharing this, I had same questions

It's Just Nifty • Sep 16

What a great explanation!

Mustapha Aouas • Sep 17

Thank you!

Ansara Costa • Oct 15 • 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.

anna lapushner • Sep 24

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

Mustapha Aouas • Sep 25

Thank you ! Glad to hear that

K Om Senapati • Sep 17

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

Jens Oliver Meiert • Sep 28 • 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.

Laércio Santos • Sep 27

Underrated information. Thanks for it!

Eckehard • Sep 16

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.

Billy Johnson • Sep 20

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

Eckehard • Sep 20 • Edited

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

Tomasz Jakut • Oct 2

b and i are about appearance. They tell the browser, "Make this text bold" or "Make this text italic."

That's no longer true. These elements were updated in HTML5 and are described in the spec.

The b element:

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

The i element:

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

In fact, I would argue that the i element has far more use cases than the em element. The latter is used only for stress emphasis:

The em element represents stress emphasis of its contents.

Your example showing usage of these elements is in-pair with what the specification says:

You used strong to mark up the most important part of the text (the date of the debut).
You used em to correctly put stress emphasis the word "early".
You used b to bring attention to the "Note" word without marking it as more important than the rest of the content.
You used i to mark up a scientific term.

Due to that, I'm quite confused because the example contradicts what you said about these elements.

Aral Roca • Sep 24

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

Ben Sinclair • Sep 25

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,

blockquote {
  font-style: italic;
}

blockquote i {
  font-style: normal; 
}

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.