Whenever we as web developers encounter italic text, we should mark it up with <em>, not with <i>, because <em> is semantic while <i> is not...

Well, that's not correct, I've recently learned. Depending on the purpose of italicizing words, we should use <em>, <b>, <i>, or <cite>.

Surprised? Then read on.

Prerequisite: When should we use italics?

Before talking about HTML, we need to talk about when to use italics. According to the Chicago Manual of Style (2017 edition), the writing style bible for American English, there are at least six major purposes of italicizing words. (Let me know if I miss any.)

1. Emphasis
2. Key terms
3. Words in foreign languages
4. Words used as words (e.g., “The term word refers to a sequence of letters that has a particular meaning.”)
5. Letters used as letters (e.g., “The s is one of the most frequently used letters in English.”)
6. Titles of books, journals, movies, paintings, and other creative works

Let's see how each purpose dictates which HTML element to use.

1. Emphasis: use <em>

Section 7.50 of the Chicago Manual of Style mentions an example of

It was Leo!

to say that “the emphasis in this example depends on the italics”.

And this emphasis changes the meaning of a sentence. By italicizing the word was, it indicates that everyone else thinks it wasn't Leo. When you italicize Leo instead, for example, then it will suggest that everyone else thinks it was Bob, for example. The meaning of a sentence changes, if only slightly.

In this case, web developers should use <em>. As of May 7, 2021, HTML Living Standard §4.5.2 states:

The em element represents stress emphasis of its contents. ... The placement of stress emphasis changes the meaning of the sentence.

MDN on the <em> element, the version last modified on April 23, 2021, states the same with an example:

... <em> is meant to “change the meaning of a sentence as spoken emphasis does ("I love carrots" vs. "I love carrots")

That's easy. But it's not the whole story.

2. Key terms: use <b> (probably)

Section 7.56 of the Chicago Manual of Style states:

Key terms in a particular context are often italicized on their first occurrence. Thereafter they are best set in roman.

Occasionally, boldface may be used for key terms, as in a textbook or to highlight terms that also appear in a glossary; such usage should be noted in the text.

If you use boldface for another purpose, you may need to use italic for the purpose of indicating words as key terms.

For this use of italic text, it doesn't change the meaning of a sentence. So <em> doesn't appear to be appropriate.

Instead we should probably use <b>. HTML Living Standard § 4.5.21 states:

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

MDN on the <b> element, the version last updated on March 27, 2021, also states:

Use the <b> for cases like keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced (but not including any special importance).

MDN on the <strong> element, the version last updated on April 23, 2021, also states:

... the <b> element is used to draw attention to text without indicating that it's more important.

That's my best guess. Let me know if you disagree.

3. Words in foreign languages: use <i>

Section 7.53 of the Chicago Manual of Style states:

Use italics for isolated words and phrases from another language unless they appear in Webster’s or another standard English-language dictionary. ... If a word from another language becomes familiar through repeated use throughout a work, it need be italicized only on its first occurrence. If it appears only rarely, however, italics may be retained.

• Her love for fútbol and telenovelas set her apart from her bookish peers.
• The word he used, Kaffeetasse (coffee cup), was just accurate enough to gain the desired result.

It doesn't change the meaning of a sentence. It doesn't draw attention to it. It just indicates that it is not an English word.

For this use of italic text, web developers should go for <i> with the lang attribute indicating the language.

According to HTML Living Standard §4.5.20:

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.

Terms in languages different from the main text should be annotated with lang attributes.

(Boldface added by the author)

MDN on the <i> element, the version last updated on March 27, 2021, refers to these examples of usage and adds:

Historically, these have been presented using italicized type, which is the original source of the <i> naming of this element.

For this case, I'm pretty much sure that we should use <i>.

4. Words and phrases used as words: use <i>

Section 7.63 of the Chicago Manual of Style states:

When a word or term is not used functionally but is referred to as the word or term itself, it is either italicized or enclosed in quotation marks.

• The term critical mass is more often used metaphorically than literally.
• What is meant by neurobotics?

For this use of italic text, we should use <i>, judging from the following example in MDN on the <em> element, the version last updated on March 27, 2021:

Another example for <i> could be: "The word the is an article".

With the exact example mentioned in the documentation, I'm sure it is correct to use <i> in this case.

5. Letters as letters: use <i> (probably)

Section 7.64 of the Chicago Manual of Style states:

Individual letters and combinations of letters of the Latin alphabet are usually italicized.

• the letter q
• a lowercase n
• a capital W
• The plural is usually formed in English by adding s or es.
• He signed the document with an X.
• I need a word with two e’s and three s’s.

For this purpose of italic text, I cannot find any example mentioned in HTML Living Standard or MDN. But the <i> element is most likely to be appropriate given that it is a similar usage of italic to words as words. Let me know if you disagree.

6. Titles of books, journals, movies, paintings, etc.: use <cite>

Section 8.2 of the Chicago Manual of Style states:

Chicago prefers italics to set off the titles of major or freestanding works such as books, journals, movies, and paintings.

For this use of italic text, the appropriate HTML element is <cite>. HTML Living Standard §4.5.6 states:

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a computer program, etc).

Note that Section 8.163 of the Chicago Manual of Style mentions that quotation marks can also be a candidate for the title of a creative work:

The choice of italics or quotation marks for a title of a work cited in text or notes is determined by the type of work. Titles of books and periodicals are italicized ...; titles of articles, chapters, and other shorter works are set in roman and enclosed in quotation marks ... .

• Many editors use The Chicago Manual of Style.
• Refer to the article titled “A Comparison of MLA and APA Style.”

So the titles of articles, chapters, etc. should also be tagged with <cite>, but style it differently, possibly using the ::before and ::after pseudo elements to add quotation marks before and after the text content. (See MDN on the ::before pseudo element for an example CSS code to add quotation marks).

Closing thoughts

Semantic HTML is damn confusing. But I realize that it is easier to understand if I approach it from the writing style, as is done in this article. I want someone to write a book that combines the Chicago Manual of Style with semantic HTML practices. (Or maybe I should...)