Ian Marshall logo

Ian Marshall

What's the difference between <b> and <strong>, <i> and <em>?

HTML tags are much more than how browsers display them. For example, <em>, <cite>, <dfn>, and <var> tags all are italicized by default, so there must be some reason they all exist. Each has its importance, and each can easily be changed with CSS to render as something other than italics. So, if you want to visually differentiate your citations from definitions from plain old emphasized text, you can—assuming you used the proper HTML tags.

Don't confuse semantics with styling.

So don't think of HTML tags as "this one bolds, this one italicizes…." Think of your HTML document as a self-contained data structure, and the tags as metadata describing each data portion in relation to the entire document. Let me explain.

When text is within <em> tags, that text should be considered as having more emphasis than the rest of the text in the document. Web crawlers, screen readers, and other machine HTML readers—which ignore CSS—will recognize <em> tags as providing emphasis. This is important for good SEO and accessibility. You can, of course, use CSS to visually change emphasis to giant, purple all-caps text if you wanted. It doesn't change the role the text plays in relation to the entire document: this bit has more emphasis.

<strong> implies urgency, or importance beyond mere emphasis. By default, <strong> text is displayed as bold but, of course, you can change its appearance with CSS.

Bottom line: don't confuse semantics with styling.

Before we had these excellent, semantic HTML tags, we did indeed think of tags as typesetters' marks. We used <i> for italics, <b> for bold, <u> for underline, etc. Computer science and the mammoth role HTML plays on the Internet has required we think bigger. And that means thinking semantically. To the point: don't use <i>, <b>, and <u> tags except as a last resort when no other tag is semantically appropriate. They don't mean anything to a machine reader and are easily changed to not italicize, bold, or underline, which would make them misleading at best.