HTML Content Tags – em, strong, i & b
Why we edit fonts and typefaces
The environment we learn in influences the way we act in many ways, such as the accent we speak with, the order we write the date in and even where we store the ketchup. This also applies to how you edit the font of a typeface. If you’re a WordPress user, then you’ll be used to using <em> and <strong> tags for italicised and bold formatting respectively. However, if you first experienced text editing on, for example, an online forum, you may have used something called BBCode, which uses [i] and [b] tags for italic and bold. So which set is correct? Well, <i>, <em>, <b> and <strong> have all been standardised in HTML since version 2.0, so either set can be used to edit the font to the same effect. The inquisitive reader may now be asking what the difference between them is and which tags we should use. To answer this, I’ve had a look into the differences between the variations belo
Semantic meaning
Prior to HTML5, <i> and <b> were on their way to becoming redundant. <i> set the font to italic, which <em> also did, and <b> set the font to boldface, which again <strong> also did. However, <em> and <strong> also carried a semantic meaning of emphasis and strong emphasis respectively. For example, <em> tags would be used to show the emphasis on a word in the below discussion:
Speaker 1: Why did you turn the alarm off?
Speaker 2: Because you told me to.
Speaker 1: I told you not to turn it off.
The word “not” is highlighted by Speaker 1 as it is a negation, emphasising that they wanted the opposite of what Speaker 2 actually did. This is the way the sentence would be spoken aloud and the <em> tag allows that to be replicated on-screen. This is especially useful on screen readers, as the word can be pronounced in a different manner to those who can’t see the italic font.
However, <em> has its own problems. Certain words are required to be italicised in writing, such as technical terms and scientific names e.g. the homo sapiens genus. Using the <em> tag to do so will place emphasis on the word despite none being required, producing undesired results on a screen reader. Therefore, the <i> tag would be the better option and therefore still has a required use. The <strong> tag also faces the same issues, strongly emphasising words and phrases that need no emphasis.
Correct definitions for italic, emphasis and bold
Fortunately, HTML5 has addressed this issue and given a specific purpose to each element.
- The <i> tag continues to italicise the text within it, but now officially represents a “different quality of text” or an “alternative voice or mood”. This includes the aforementioned technical terms and scientific names, as well as other text that deviates from the rest of the prose, such as thoughts and foreign phrases.
- The <em> tag places stress on a word, which refers to the way it would be pronounced. This can highlight the importance of specific words, such as in the example discussion above, whilst also having other linguistic effects. For example, the sentence “yeah, dogs are really great” could be viewed as sarcasm.
- The <b> tag calls attention to important words but does not convey any semantic importance. Similarly to the <i> tag, this is for words that are outside of the flow of the text, but is limited to keywords, product names and article ledes.
- Finally, the <strong> tag denotes “strong importance”. Like the <b> tag, it draws attention to words, but also indicates importance, seriousness or urgency. It may, for example, be used to highlight the importance of a word, or a word within a document that needs more urgent attention. For example, product instructions may say “do not leave in sunlight”, with the bold word carrying significant importance.
Whilst these definitions are not free from ambiguity, it is generally clear where each tag should be used. The correct tag you require can be ascertained by whether the text has any semantic meaning; is the text more important or being spoken in a different manner than the rest? If not, then attention is instead being drawn to it for functional purposes, such as helping the reader identify a keyword that they are quickly looking for. Therefore, <i>, <em>, <b> and <strong> is not a preference, and both elements have their own specific uses.
