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.