3.4 Mean What You Say: A Discussion About the <em> Element of HTML

There are two HyperText Markup Language (HTML) elements related to italicized words, <em> and <i> . My focus for this article is on the <em> element because it relates to an italicized word I included in a previous blog post. But what is the <em> element, and why is it important?

I’ll start by explaining that I have little to no HTML experience. In fact, I used to think HTML was an abbreviation for Hotmail. Yeah, go ahead and laugh. There has been only one instance where I have changed HTML coding. I had to remove a URL link on a Blackboard discussion forum for my Texas Government class. To be clear, I had no concept of what I was doing. My husband helped me find the HTML code screen then told me to “delete everything starting at the less-than symbol next to the letter a, and stop when you get to the greater-than symbol.” Fast forward to my current class, Publishing for the Web, and I now understand the meaning of the acronym. What I also learned is that there are specific elements within HTML to help one express their content more clearly.

As I mentioned, my previous blog post, “Can You Find Your Way Home?,” included a sentence containing an italicized word. I typically do not place emphasized words in my writing, other than article or book titles. So, I was proud of myself for stepping outside the realm of my usual writing style, even though it was only for one sentence. The image below contains a screenshot of the sentence I’m referring to.

My purpose for italicizing the word can, was to express a bit of enthusiasm. I was excited to learn that usability testing was less complicated than I initially thought. Still, I was not excited enough to warrant the use of an exclamation point.

When viewing written content online, one can usually discern whether an italicized word is meant to express emotion or call attention to the title of literary works or websites. But what happens when someone uses assistive technology, such as a screen reader, to engage with your content? How can you be sure your end-user receives the intended meaning of your message? This is where the HTML element <em> comes into play.

Facundo Corradini, a front-end developer and CSS specialist, describes <em> as being “one of the most important text-level semantic tags.” Corradini’s article, “You’re using<em> wrong. And I am too. And so is everybody else,” published October 25, 2018, explains the significance of <em> and why it is often misused. He states that “<em> is for stress emphasis”, and he provides the following explanation: 

Stress emphasis is the phonetic resource of changing pitch and/or dragging the word to denote a special meaning to it. It marks a word in a way that changes the meaning of the whole sentence. It’s used for a correction, clarification, sarcasm, the key part of a counter-argument, etc.

In addition to the four uses described in his definition, Corradini also notes that stress emphasis can be used to “communicate the higher importance of a word.” His article provides a list of examples, showing the use of each of his suggestions.

Jen Simmons, a designer and developer advocate at Mozilla, also describes an example of <em> tag use in her 2020 LinkedIn Learning course, HTML Essential Training. Within the course, you can find her discussion of the <em> tag in the Bold and Italics segment of Section 2: Formatting Text. Simmons’s discussion piqued my curiosity about using the <em> element; I was interested to see if the sentence I wrote in my previous blog had the correct HTML markup.

When I initially typed the sentence, I italicized the word can by clicking the Italic button on WordPress’s block editor menu bar. So, I assumed the HTML markup would show an <i> element around the word instead of <em> . But, as you can see in the screenshot below, the HTML markup for my sentence is correct.

Although the HTML code is correct for this particular instance, the fact that WordPress chooses <em> over <i> is part of Facundo Corradini’s argument in “You’re using <em> wrong. And I am too. And so is everyone else.” WordPress uses <em> any time you click the Italic button in the block editor. Corradini explains that having no distinction between <em> and <i> removes the semantics from your content. When you ignore semantics, the exact meaning of our message may get lost somewhere along the way.

The <em> HTML element is certainly not the only code used to convey meaning within online content. I chose to focus on this particular element because it was relevant to something I had written. My goal of studying HTML, and web publishing in general, is to become a better communicator. Chances are, if you’re reading this blog, you share a similar goal. Corradini’s article provides serval examples of when you should and shouldn’t use <em>. I encourage you to review your own blog posts or online content. Does that content contain italicized words? If so, do those words have the correct HTML tag next to them? If not, consider making a change.