On the Misuse of Common HTML Tags
There are a number of HTML tags which are commonly misunderstood and misused. I've done it myself, with some frequency
over the years. I've argued that some of these are deprecated, when they weren't. And now I've come full circle, and I
had a full on argument with someone over the use of the <i> tag recently, and I wanted to talk about four specific and
oft misused tags: <i>, <b>, <em>, and <strong>.
The Worst Interpretation: <i> == <em>, <b> == <strong>
Here is the worst stance you can have.
<i>and<em>mean italic and are the same<b>and<strong>mean bold and are the same
There are a lot of people that still think this. It's wrong. These don't have the meanings that you think they do. <em>
does not mean italic. <i>does not mean italic (not anymore, anyways, though techetymologically that's where it came
from).
Better, but not Great: <i>-> em, b -> strong
I was in this group for a long time, but after I started reading spec for HTML a few years ago, I started to understand that it's incorrect:
<i>has been deprecated. Always use em instead.- b has been deprecated. Always use strong instead
Someone told me this and I listened, and went with it. I told other people this for years. I never really stopped to think about too hard, because I figured that better heads than mine had this figured out. The basic argument is that <i>and b have no meaning, but em and strong do have meaning. Well, that's crap. They're just tags; they only have the meaning that we attribute to them. Also, if we use this onto mapping, then strong and em have the exact same problems that b and <i>do, because they're the same elements. Changing the tag has no added benefit.
The Right Way: i, b, em, strong are all viable tags
Here's the right answer: i, b, em, and strong are all worthwhile and useful tags to use. That's right - you can use the <i>tag and the b tag for things in your code. You're absolutely right to do so! Just understand what each of them mean. Here are my interpretations of the HTML spec.
<i>
The <i>element is for text that is separate from normal prose, using a different voice, but with no particular emphasis. Some valid examples of this are technical jargon, taxonomies, transcriptions of altered states, or (very specifically) ship names in Western texts. These are items which are distinct from things that require emphasis; they are outside of the normal flow, and we do not necessarily want to attribute extra gravity to things inside of <i>tags.
For example, The Edmund Fitzgerald gets i-tagged if I were talking about the boat, but if I were talking about the song, I might emphasize The Wreck of The Edmund Fitzgerald.
If one were transcribing an experience that one had while under the influence of narcotics, one might put those in italics:
His eyes adjusted to the dimness after he put down his opium pipe. The walls took a deep breath and expelled it slowly. "This," thought the man, "is very good."
If one were to explain in writing to the captain, via blog post, that one was out of dilithium crystals for the
warp drive, one could use an <i> tag.
b
This is for use similarly; ascribing no extra emphasis, but without the need for a different voice. The best example for this is straight from the spec: text-driven adventure games where items are denoted, but have no particular emphasis on the items:
You enter a small room. Your sword glows brighter. A rat scurries past the corner wall.
em
Semantic markup for text that is emphasized for whatever reason - it attributes greater gravity to that section of the text.
You use this tag whenever something is quite important.
strong
Semantic markup for text with strong emphasis. This is text that has the greatest gravity.
Use this to emphasize things, not just to make them bold.
And that is probably more discussion that you've ever cared to read on those particular HTML tags!