strong vs. em

<strong> vs. <em>

On the finer points of semantic markup

What makes a phrase strong?
When should text be emphasized instead?
Are <b> and <i> completely deprecated?

What makes a phrase strong?

While in HTML4, Strong simply indicated a stronger emphasis, in HTML5, the element is described as representing “strong importance for its contents.”

Mozilla Developer Network

Truth be told, I don’t find distinction between “stronger emphasis” and “strong importance” particularly helpful but the “for its contents” bit was a revelation.

Quite simply, phrases or words wrapped in <strong> tags are not pronounced differently and do not change the meaning of a sentence, as phrases or words wrapped in <em> tags can.

<strong> tags are 100% about the significance of their content.

To find out what kind of content merits that extra importance, I looked at the source code for the Web Accessibility Initiative‘s homepage and the W3C news page. There were three general types of usage here:

1. FOCUS: Draw attention to an action

Discover new resources for people with disabilities, policy makers, managers, and you!

2.  TITLE: Draw attention to a topic

A number of developers, W3C members, invited experts from Academia and Industry, and W3C team representatives will be present at this one-day event, which consists of three sessions: Core Web Technologies, Future of the Web and Web & Industry, involving the topics of Web design, WebAPP, Blockchain, Virtual Reality, Accessibility, Knowledge Graph, Web Payments, Web of Things, Web Automotive, Linked Data, etc.

3. DEADLINE: Draw attention to… well, you get the idea

Please send comments by 14 April 2016.

When should text be emphasized instead?

Great question. I have developed a highly scientific approach to <em> tags that I like to think of as The Chandler Rule*.

(*Notice the rule is wrapped in <strong> tags because it is important, not because it is pronounced differently. Although you are encouraged to pronounce it with a suitable amount of gravitas).

Basically, without emphasis, the world is a dull, unfunny place:

Phoebe: Could this report be any later?

Joey: Could I be wearing any more clothes?

Chandler: Ok, I don’t sound like that. That is so not true.

But with emphasis, it has a lot more personality:

Phoebe: Could this report be any later?

Joey: Could I be wearing any more clothes?

Chandler: Ok, I don’t sound like that. That is so not true.

Just be careful with those <em> tags because, in some cases, emphasis can completely change the meaning of a sentence.

For example, how would you read the following book title?

why-not

Depending on whether you put the emphasis on the “me” or the “not”, you get an entirely different tone.

“Why not me?”sounds self-pitying whereas “Why not me?” sounds confident.

Hopefully going forward, you will feel completely confident with your use of <strong> and <em>!

 

Are <b> and <i> completely deprecated?

Short answer: No.

Long answer: Yes and no.

<b> adds absolutely no semantic meaning whatsoever and you are not likely to use it.

<i> has been somewhat co-opted by icon fonts but can still prove useful when designating particular kinds of titles (books, movies, and the like). It would also be appropriate to mark a word in a foreign language or a technical term.

For further reading on this subject, check out HTML5Doctor’s article, The i, b, em &amp strong elements.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s