HTML is designed to be as independent of medium and client as possible. While you interact with the majority of web pages visually via a screen, there are numerous other possibilities for how the content may be shown, such as print, text-to-speech readers, braille translators, and more.

For this reason, tags that format text in HTML are as broadly applicable as possible. <em>, for instance, emphasizes text. In most cases, visually rendered <em> content means it is italicized, but a text-to-speech tool will emphasize the text verbally, just as you would reading the text out loud.

<strong>, visually, bolds the content between the opening and closing <strong> tags, but again, the tag will have different meanings in different contexts.

Both tags are intended to be used on a short portion of text – a word or two, perhaps a sentence in a paragraph that is several sentences long. If you find yourself coding this:

<p><em> .. lots of content here .. </em></p>

… it is almost always a sign that you should not be using <em> or <strong> but CSS instead.

Similarly, <strong> makes little to no difference inside of heading elements. Use CSS instead.

HTML5 reintroduces the <b> and <i> tags, but I would recommend sticking with <strong> and <em>, as the latter have greater applicability and accessibility.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.