Choosing semantic HTML mark-up for italic text, guided by Chicago Manual of Style
Tags: html, typography, webdev
Published: 2021-05-09 08:54:19

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](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-em-element) 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong#%3Cem%3E_vs._%3Cstrong%3E), 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](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-b-element) 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b#usage_notes), 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong#%3Cb%3E_vs._%3Cstrong%3E), 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](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-i-element):

> 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i), 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em#%3Ci%3E_vs._%3Cem%3E), 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](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-cite-element) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/::before#adding_quotation_marks) 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...)