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

Question

What's the difference between `` and ``, `` and `` in HTML/XHTML? When should you use each?

Answer 1

HTML tags are much more than how browsers display them. For example, em, cite, 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 plain old emphasized text, you can--assuming you used the proper HTML tags.

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

Ian