The HTML and CSS Blog:

What You Learn in This HTML Lesson

In the previous lesson you learned how to mark text as bold or italic with HTML. However it turns out there’s another set of codes for bold and italic. In this lesson you’ll learn when it’s best to use  <strong>  and when it’s best to use <b> . Likewise we’ll explain the difference between  <em>  and <i> .

Why Not Use <b> and <i> for Bold and Italics?

grumpy cat says no to misuse of italics tag

[Image via HuffPo]

Sometimes my students ask “why not just use <b> or <i> for bold and italics?” since that seems easier to remember and type, compared to <strong> and <em>. It’s usually better to use <strong> and <em>, here’s why:

Physical vs. Structural Tags

The leaning tower of Pisa made slanted by italics

Ah, that explains it. [image via Taringa]

The  <b> and  <i> HTML tags are physical tags. They do make content appear bold or italics, but they aren’t translated into anything meaningful for those without vision. If you are listening to text read out loud (maybe you have a vision problem , or you are busy making dinner), you’d want bolder things to sound louder. The  <strong> and  <em> (emphasis) HTML tags are structural tags, so they are meant to make something stronger no matter how you get the information (i. bold if you can see, loud if can hear) and  <em> for emphasis gets, well, emphasized.

To summarize: to make your emphasized content accessible to all, use HTML <strong> and <em> tags, and if it’s purely a visual treatment that doesn’t need to sound different, than change the font weight and style through CSS. If you want to draw attention to text, don’t use  <b>  or <i> !

Semantic Web is In

HTML vs. CSS Bold and Italics

Thinking about this distinction comes down to a renewed emphasis on the semantic web: tags should have meaning; in particular you should be using the tags to describe the structure and hierarchy of information. Use CSS to handle all formatting, design and visual presentation. If you don’t separate the design from the structure then it is really hard to change the design and it’s hard to use the information. Double-penalty.

EzineArticles Cartoon

So, think about why you are making something bold. Are you trying to emphasize it? Do you want it to be heard in a stronger, bolder voice than the rest of the text? Then use the <strong> html tag. If you aren’t really using bold for emphasis; if you just think it looks nice and it would be weird to hear it read louder; then you should use CSS properties to format the content as bold. You should be doing all your design in the CSS properties, and use HTML to indicate the structure (the semantics) of the content.

If this sounds abstract, here’s a concrete example. Often beginning bloggers (and sadly, even some amateur web designers) will mark section headings off with bold. Instead, headers should be emphasized with heading tags, not with bold. Proper use of headers are important for site navigation, and they tell the search engine how the page is set up. And if you want those headers to stand out, doing so with CSS can make it much easier if you want to change how they are styled later on.

And HTML5 Brings Back Appropriate Uses of <i>!

proper use of italics for emphasis

This image is barely on topic, but I couldn’t resist [image via ImgFave]

Wait,  <i>  is back in, with respect, in the newest HTML5 standards. It seems like we just established that we should either use  <em>  for emphasis, or CSS italic style for presentation. Web developers have been sneering at the  <i>  tag for years, thinking there is no valid use for it in HTML…so it’s a bit of a surprise to see HTML5, the latest and greatest iteration of HTML bring back the old  <i>  tag with a new semantic use.

There are in fact cases where italics are used for semantic reasons, i.e. where there is a tradition to a certain kind of content being italicized, but it’s not really being emphasized or meant to be heard differently. These are the editorial uses for the  <i>  tag, when being italicized is meaningful to the content: for example, there is a tradition to ship names, latin terms, and scientific terms being italicized. It would be appropriate to use the <i> tag to italicize a ship name, such as <i>The Titanic</i> , because the italics add meaning by helping us recognize it is a ship name.

There are actually plenty of semantic, in-context uses for <i> , beyond big old boats: the names of albums, novels, movies, and newspapers should all be emphasized visually but not vocally.

Just make sure you’re using  <i>  for editorial purposes, rather than for design purposes.

Italics is created with the em tag

Italics is created with the em tag when you are emphasizing text.

Wow, my brain hurts! Let’s summarize:

When to Use  <em>  Versus <i>

  • When using italics for grammatical purposes, like the name of a movie, book, or similar titles, use <i> .
  • When using italics for emphasis (and you want it to be accessible, sound different), use <em> .
  • When using italics because it just looks nice, use CSS to change the font style to italic.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.