Using the HTML Em and Strong Elements
The HTML 4.01 specification defines the “phrase” elements em and strong as indicators of emphasis and stronger emphasis, respectively. The XHTML specification doesn’t change this, it only demands the use of closing elements and proper nesting. These definitions, though, leave something to be desired. Is “stronger emphasis” an inflected inflection?! Is it used when you really, really mean it? Do you add two exclamation points just to get the point across? I don’t like any of those options.
A talented writer-friend once told me if an author uses proper punctuation, forms good sentences, and strings them together cohesively, readers should automatically apply emphasis to the words or phrases where the author intends, and that italicizing to show emphasis often isn’t necessary. In practice, readers will do this by speaking the word or phrase with inflection, raising their inner voice an octave. But he’s a print-purist. Most of us probably need to use this element if we want to show emphasis. Just to be safe.
If emphasis can be implied in writing, as my friend suggested, perhaps we should be at least moderate the use of these elements in our own writing. And if that is the case, is strong emphasis really needed? I think not, and apparently neither do others as reflected by the strong element’s new definition as stated in the HTML 5 Working Draft (also see the most current HTML 5 work). It’s no longer defined as “stronger emphasis” and instead takes on some importance. In their words:
The
strongelement representsstrongimportance for its contents.The relative level of importance of a piece of content is given by its number of ancestor
strongelements; eachstrongelement increases the importance of its contents.Changing the importance of a piece of text with the
strongelement does not change the meaning of the sentence. — W3C/WHATWG
This information was followed by an example of some warning text that contained nested strong elements to compound the importance of certain parts.
I feel using the strong element to denote importance is a much wiser use of the element. And with that being so, I suggest its immediate adoption: using it now when you think the word or phase is important. Why wait? There no need to delay the adoption of this sound practice because it is already well supported.
Well, mostly supported. Even though, to the best of my knowledge, all graphical browsers render the em element as italic text and strong as bold text, the top two screen readers provide no indication such as pitch or loudness change and neither element is identified or mappable so the user cannot initiate more thorough support.
But that’s now. If you support web accessibility, you know being progressive is good and considering forward-compatibility is just as important as backwards-compatibility. Remember, if screen readers don’t provide adequate support for these elements it’s not your fault and we should press on, doing the right thing, hopeful that improved support, especially in the area of aural style sheet support and element semantics conveyance, will someday be forthcoming. Until then, just be sure to write well.
As a quick recap, let’s take a summary look at these two seemingly interchangeable elements.
- Emphatic:
em - Use this element to convey emphasis to a word, string of words, or more if applicable. It is possible to emphasize an introduction. A typical use might be adding emphasis to a word that you really want the user to say with inflection.
- Important:
strong - Use this element to show text or phrase importance. Some typical uses might include warning text, error text, special notices, and keywords in instructional text. A step up from this and you’d use a heading.
Please note: em and strong element use is sometimes confused with the i (italic) and b (bold) elements. To get more details about those, I can offer a previously published article titled: Semantic Use of Bold and Italic Elements.
If you like double exclamation points and are really emphatic about things, you will be relieved to know you can use em elements within strong elements, to show a bit of important emphasis, or emphatic importance, depending on how you look at it, and vise-versa. But, please, do so only if you really mean it!!
Tommy Olsson responds:
Posted: March 7th, 2008 at 2:40 am →
I think you mean closing tags, not elements.
Even then, the sentence is misleading. The end tags for these two element types are required whether you use HTML or XHTML.
Andy responds:
Posted: March 7th, 2008 at 8:16 am →
Thanks Mike, as usual you bring clarity to an important but much neglected area of web semantics. I’m not too sure about nesting strong elements to indicate even greater importance and think for the odd occasion when this is necessary a combination of em and strong should suffice.
Mike Cherim responds:
Posted: March 7th, 2008 at 9:02 am →
@Tommy: Whoops. Right you are of course. I
del‘d that portion.@Andy: Thanks. I don’t see myself ever nesting them either.
Sarah Bourne responds:
Posted: March 7th, 2008 at 2:47 pm →
I’ve found that the hardest thing about these tags is that people are used to making things bold or italic, but without having studied the semantic reasons behind doing it. Back in the days of print only, you might use bold to indicate, say, a keyboard command, an abbreviation, or a word that is being defined, or use italics for a foreign word. HTML has tags for these, but they are not used as often as they should be (especially if there’s no handy buttons for them on the WYSIWYG!) (I’m trying very hard to forget or ignore how many people use them instead of heading tags.) The cases that are left are pretty tricky to describe - as you point out! What tends to happen is people think, “I want that in italics, so that means I should use
em.” In my experience, very few people are even inclined to wonder why they think it should be in italics to begin with. I try not to let it make me too sad.Jon Cram responds:
Posted: April 2nd, 2008 at 3:38 pm →
Incidentally, this reminds me that one of MS Office 2007’s default styles is named ’subtle emphasis’. It still makes me wonder …