Essentially, there are two real reasons why you would want to style a particular word or phrase in bold or italic. You either want it to visually stand out as bold or italic, or to give the word or phrase additional meaning. Impact the way in which the reader reads that certain word.
In 2014, HTML5 was finalised and published by W3C (World Wide Web Consortium), the most recent revision of HTML since HTML 4 was standardised back in 1997. Our usage of HTML has come a long way in the last 19 years, and HTML5 allowed web designers and web developers to enrich the semantic content of a webpage using the markup language. As well as structural elements, such as <nav> and <footer>, new rules were defined for text-level semantics.
<strong> vs <b>
When should you use <strong>?
According to W3C recommendations for text-level semantics in HTML5:
“The strong element represents strong importance, seriousness, or urgency for its contents.”
W3C go on to explain that the strong element can be used:
- in a heading, caption, or paragraph to distinguish the part that really matters from other parts that might be more detailed, more jovial, or merely boilerplate. (Importance)
- to mark up a warning or caution notice. (Seriousness)
- to denote the contents that the user needs to see sooner than other parts of the document. (Urgency)
So what about <b>?
“The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.”
W3C’s HTML Language Reference states the difference between how the b element was used in previous versions of HTML and how the b element is to be used in HTML5:
“Although previous versions of HTML defined the b element only in presentational terms, the element has now been given the specific semantic purpose of representing text ‘offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is bold text’.”
So, if you just want to increase the font weight of a word, phrase or paragraph for presentation purposes only, then the <b> tag would be more suitable than <strong>.
<em> vs <i>
So when should you use <em>?
“The em element represents stress emphasis of its contents.”
Emphasis can be used to change the meaning of a sentence depending on where the emphasis is placed, transforming a general statements of fact to an emotional response or assertion.
W3C gives this sentence as an example: Cats are cute animals.
Using the em element, this sentence can imply different meanings:
- Cats are cute animals.
How one would add to a conversation about cute animals. - Cats are cute animals.
How one would respond to someone saying that cats aren’t cute animals. - Cats are cute animals.
How one would argue with someone who said that cats are ugly animals. - Cats are cute animals.
How one would correct someone suggesting that cats are cute vegetables.
If you’re not stressing emphasis on a particular word, then you would use <i>.
The i element is more appropriately used for presentational purposes, much like the b element.
“The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.”
For example, you could use <i> to mark up a dream sequence or a quotation – not to add emphasis to the entire phrase or paragraph, but to differentiate it or offset it from the main text.
Does it make a difference to SEO?
Whether you use <b> or <strong>, <i> or <em>, makes very little difference to SEO if any at all. That’s not to say that it won’t in future, but currently there has been no evidence that suggests to us that Google treats them any different. So use them naturally. You don’t need to stuff every mention or variation of your keyword within <strong> tags for Google. In fact, you don’t even really need to differentiate between your <b>s and <strong>s at all, if you don’t want to.
So even if now knowing changes nothing, at least you’ve somewhat satisfied your curiosity? You’ve achieved nothing by reading this but a small sense of interrupted satisfaction in getting the answer you were looking for. Welcome to the internet.
