HTML Emphasis Tags

This text is bold
A demonstration of the STRONG tag in action. J Kyrnin

One of the tags that you will learn early in your web design education is a pair of tags known as the "emphasis tags." Let's take a look at what these tags are and how they are used in web design today.

Back to XHTML

If you learned HTML years ago, well before the rise of HTML5, you probably used both the bold and italics tags. As you would expect, these tags turned elements into bold text or italicized text respectively.

The problem with these tags, and why they were pushed aside in favor of new elements (which we will look at shortly), is that they are not semantic elements. This is because they define how the text should look rather than information about the text. Remember, HTML (which is where these tags would be written) is all about structure, not visual style! Visuals are handled by CSS and web design best practices have long held that you should have a clear separation of style and structure in your web pages. This means not using elements that are non-semantic and which detail look rather than structure. This is why the bold and italics tags have been generally replaced by strong (for bold) and emphasis (for italics).

<strong> and <em>

The strong and emphasis elements add information to your text, detailing content that should be treated differently and emphasized when that content is spoken. You use these elements pretty much the same way you would have used bold and italics in the past.

 Simply surround your text with the opening and closing tags (<em> and </em> for emphasis and <strong> and </strong> for strong emphasis) and the enclosed text will be emphasized.

You can nest these tags and it doesn't matter which is the external tag. Here are some examples.

<em>This text is emphasized</em> and most browsers would display it as italics.
<strong>This text is strongly emphasized</strong> and most browsers would display it as bold type.

In both of these examples, we are not dictating visual look with the HTML. Yes, the default appearance of the <em> tag would be italics and the <strong> would be bold, but those looks could easily be changed in CSS.  This is the best of both worlds. You can leverage the default browser styles to get italicized or bold text in your document without actually crossing the line and mixing structure and style. Say you wanted that <strong> text to not only be bold, but to also be red, you could add this to the CSS

strong {
    color: red;
}

In this example, you do not need to add a property for the bold font-weight since that is the default. If you don't want to leave that to chance, however, you could always add it in:

strong {
   font-weight: bold;
   color: red;
}

Now you would be all but guaranteed to have a page with bold (and red) text wherever the <strong> tag is used.

Double Up on Emphasis

One thing I have noticed over the year is what happens if you try to double up on emphasis. For example:

This text should have both <strong><em>bolded and italicized</em></strong> text inside it.

You would think that this line would produce an area that has text that is bold AND italics.

Sometimes this does indeed happen, but I have seen some browsers only honor the second of the two emphasis styles, the one closest to the actual text in question, and only display this as italics. This is one of the reasons why I do not double up on emphasis tags. 

Another reason to avoid this "doubling up" is for stylistic purposes. One form of emphasis if usually enough to convey the tone you wish to set. You do not need to bold, italicize, color, enlarge, and underline text in order for it to stand out. That text, will all those different kinds of emphasis, would become garish. So be careful when using emphasis tags or CSS styles to provide emphasis and do not overdo it.

A Note on Bold and Italics

One final thought - while the bold (<b>) and italics (<i>) tags are no longer recommended to be used as emphasis elements, there are some web designers who use these tags to style inline areas of text.

Basically, they use it like a <span> element. This is nice because the tags are very short, but using these elements in this manner is not generally recommended. I mention in in case you see it out there on some sites being used not to create bold or italicized text, but to create a CSS hook for some other kind of visual styling.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 12/2/16.