The Misunderstood Tag: Unraveling the Mystery of Stress Emphasis
A Brief History of HTML Semantics
In the early days of HTML, the <em> tag was rarely used, despite being part of the specs since HTML 2.0 in 1995. Back then, no one thought much about semantics or separation of concerns. Italics were simply marked up with <i> tags, and we wouldn’t give it a second thought. But then, someone shouted “Semantics!” and everybody started to hate the poor little <i> tag. <em> became the new darling, touted as a more accessible and SEO-friendly alternative.
The Truth About : It’s Not for Emphasis
Fast forward to HTML5, and we discover that <em> is not for emphasis, but for stress emphasis. This subtle distinction has led to widespread confusion. The HTML 2, 3, and 4 specs were vague about the definition of “emphasis,” making it seem like a lesser version of <strong>. But HTML5 drew a clearer line, redefining <i> as a semantic tag that wraps most other use cases for italics.
What is Stress Emphasis?
Stress emphasis is the phonetic resource of changing pitch and/or dragging the word to denote a special meaning. It marks a word in a way that changes the meaning of the whole sentence. Native English speakers do this naturally, but non-native speakers often need to learn it explicitly.
Use Cases for
We can use stress emphasis to communicate higher importance, indicate sarcasm, correct or clarify information, or hint at implications. For example:
- “I’m interested in that.” (emphasis on “that”)
- “Oh, you’re going to love this.” (sarcastic tone)
- “Someone else needs to do something.” (implication)
When Not to Use
There are cases where italics represent something other than emphasis. In these cases, the correct tag is <i>. For instance, when marking an idiomatic phrase from another language, taxonomic nomenclature, technical terms, or fictional character voices.
The Importance of Accessibility
Using the wrong tag to italicize a word makes things complicated for screen readers, especially when nesting. If we use the right tags, speech synthesizers can easily make the right pitch corrections, making communication more natural.
Nested “Italics” Tags
Avoid resetting italics; instead, opt for adding bold weight to convey stress emphasis. For example:
- “Now that’s a change, she thought.” (better conveys stress)
Takeaways
- Think about why you’re using italics and choose the right tag.
- Read it aloud to ensure the inflection matches your intent.
- Use
<em>sparingly, as it’s meant for stress emphasis. - When nesting italics-producing tags, use bold weight instead of resetting italics.
By considering why we’re italicizing text and using the right tags, we can make our tools and the web better.