Using `<i>` vs parentheses [closed]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 8 years ago.

Improve this question

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.

Answer 1

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.¹

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.}

Answer 2

http://www.w3schools.com/tags/tag_i.asp

I think this is pretty much correct. For accessibility reasons (such as software that reads out text), along with others, if parenthesis indicate a change in tone in text then i tag is the element that is appropriate. As a side note, as the original poster would seem to know : it no longer means "italics"in html5.

Just to beat this to death: most text readers that can handle the i tag probably don't make a sound that sounds like de-emphasis or whatever you might be trying to indicate with parenthesis, so if it's really important to get it just right, i'd suggest creating a class called de-emphsis that does not create parethesis and using parenthesis as well. Sounds like overkill but here's the reasoning.

De-emphasis can be used without parenthesis in other places.

The i tag probably does not sound like de-empahsis to text readers.

Visually impaired users might want to know actual parenthesis are there.

So, the crazy suggestion I'll make is this:

    <p>I was walking to my car (<i class="de-emphasis">on the other side of town</i>), when...</p>

I do not have enough reputation to comment or I would have commented, so my final recommendation is an opinion, not a fact or anything like that. Just try to keep accessibility in mind when you make decisions about this kind of stuff.