<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.”
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?
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 & strong elements.
accessibilitymattersblog 