Search code examples
htmlsemantic-markup

Using `<i>` vs parentheses

When writing for the Web, should authors use the <i> element with a class, or should they use regular parentheses to indicate parenthetical phrases?

Example:

<p>I was walking to my car <i class="paren">on the other side of town</i>, when...</p>

<p>I was walking to my car (on the other side of town), when...</p>

Accompanied by:

.paren {
    font-style: normal;
    &::before {content: '(';}
    &::after {content: ')';}
}

Just wondering which is the more semantically appropriate method. Of course the easier choice would be to simply type shift + 9 instead of having to mark it up with HTML, but according to The Draft, the <i> element should be used to indicate a change in voice, which is exactly what parenthetical phrases are: typically preceded by a short pause and a lowering of the volume and pitch of one's voice.

The same question applies to phrases surrounded by em dashes—which serve a similar purpose as phrases in parentheses—although em dashes can be much more flexible.

Solution

  • Parentheses already have meaning in English and you could argue that they are "markup" for a phrase. Parentheses indicate the text's relationship to the enclosing sentence/paragraph and provide a presentation cue (how to read/speak the text). In other words, adding HTML markup doesn't give you much semantic value that isn't already present by virtue of the plain text.

    The extra markup serves a purpose if you want to differentiate the phrase from the rest of the paragraph or you need to add attributes that apply only to specific text. Putting tags around text allows you to work with that text in a clear fashion; you can style it, access it with script, parse it with a screen reader, etc. I would probably suggest a span instead of i; even though i has a broad potential usage, parenthesized text seems contrary to the common expectation.

    Even though you can set it apart, parenthesized text probably does not always need to be set apart.1

    Lastly, using CSS to provide the parentheses seems like excess work for the developer (and anyone reading it afterwards). It adds a level of indirection to a meaning that was already present.

    1: There are cases where punctuation does not provide enough structure and should be augmented with markup. A simple example is a telephone number, as described here in 3.3.2.