em and his buddy strong

Let’s talk about emphasis and italics and getting bold. There’s an extended family tree of HTML elements that can be used to format text as emphasized, italic or bold at our disposal. These HTML elements are not interchangable and each has a distinct position in the text formatting family.

First there’s <em>. Depending on the browser and the web page author’s style sheet, <em> can be rendered in several ways. Most often it’s visually rendered in italics, but not always. But there is one thing that’s always true of <em>. That one truth is that text marked up as <em> is always emphasized. <em> means emphasized. <em> is one of many self-describing HTML tags that tells you with its name exactly what it does to text. It emphasizes text. Maybe that emphasized text is rendered in italics, but may not. Semantically speaking, the italics aren’t the point. The emphasis is the point.

When you mark up text with <em>, do it because you intend to emphasize the text.

Then there’s <strong>. Using <strong> is a form of emphasis as well, but it differs semantically because it means strong emphasis. Depending on the browser and the web page author’s style sheet, <strong> is often rendered as bold, but not always. (On this blog, <strong> is rendered as both bold and with small caps.) The bold isn’t the point. The semantic point is that <strong> indicates strong emphasis.

When you mark up text with <strong>, do it because you intend strong emphasis.

Next we have <cite>. In the formatting world of self-describing semantic HTML, <cite> is used to mark up a citation. It most often is rendered as italic. Visually, you can’t tell a difference between <em> and <cite>. But the underlying meaning is different, the underlying semantic message is different. I can quote from Mastering Integrated HTML and CSS by using the <cite> element to indicate a book title. This element can also indicate a title of a web site or a blog.

Those are the semantic elements that may render as italic or bold.

There are two non-semantic HTML elements that render visually as italic or bold. These are <i> and <b>. If a user happens to be looking at your text, then they will see the visual cues to meaning that <i> and <b> provide. But not all users look at text. For text rendered by some means other than visual—say a screen reader or braille—there’s no meaning conveyed by <i> and <b> at all. It’s invisible. No hint of emphasis or clues to citations.  <i> and <b> are presentational HTML with no semantic underpinnings.

When you use <i> and <b>, do it for visual reasons only. Such reasons do exist. Perhaps you want to italicize the opening paragraph of a long essay for no other reason than appearance. Use <i>. Perhaps you want the links in your menu to look bold for visual reasons, but not be emphasized. Use <b>.

ADDENDUM 3/11/2010: The latest draft of HTML5, issued this week, defines the <strong> element as showing strong importance rather than strong emphasis. Presumably this semantic change will be rendered differently by a screen reader.