Use <I> or <SPAN> or what?

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
jayaitch
Rank II - Novice
Posts: 20
Joined: Fri Mar 30, 2012 3:14 pm

Use <I> or <SPAN> or what?

Post by jayaitch »

BACKGROUND: I am working on a site where back when `<I>` became deprecated, all these were changed to `<EM>`, emphasis or not. Apparently `<CITE>` lacked support then or what. Anyway, fixing these brought me down to about 3.5K remainers, including obvious emphasis, but also lots of cases in the range below.

Given how involved the current HTML5 definition for `<I>` is, I suppose this will draw more opinion than fact, but nevertheless I want to ask. Also, I have read to some profit a couple threads on StackExchange, as on other sites, too.

I have no issue with ship names, (foreign) idiomatic expressions or foreign co-designations/names/titles in contexts where the title would not be wrapped in `<CITE>`, but when it comes to the following I get lost:

-- referencing designations in a map or print (da Gama Land, I. Nouvelles); e.g. in the NE still with the fabulous <em>da Gama Land</em>
-- (proverbial) designations (Seven Wonders of Louvain, turnaround [German: Die Wende; 1989], Mazarin Bible)
-- name of an institution (eg National Gallery, Louvre, Hamburger Kunsthalle, Pinakothek, Mauritshuis, Depot des Cartes et Plans de la Marine)
-- name of an association (Association Danse Macabre) or company (Holland-Amerika Lijn, Manufacture Royale des Meubles de la Couronne)
-- name of an inn, pub, villa, place (The Red Bull, Trenton House, Casa Loma, Trafalgar Square)
-- name of an event (Last Night of the Proms, Arthur Weinberg Rennen, Pride's Purge)
-- titles of office (Paymaster of the Forces, Lord Chancellor, Capitano del Rei, First Painter to the King)
-- nicknames
-- motto of a book, picture, order (could be Latin, but also English, French), just quoted as part of an item description, not to convey extra meaning to the surounding text

IMHO setting these in italics is a typographic convention to set them off of the surrounding text, without emphasis (thus no `<EM>`, that's clear), but would they really be spoken/read in a "different tone or mood"? I fail to hear/see that. Where italics are not available often quotes are used, which is a context different from an inline quotation `<Q>` though. Thus using the latter with redefined CSS rules is not a solution. Browsers even might still add quotation marks anyway.

So should I use a class with `<SPAN>`? Or would `<I>` still be fine? Someone indeed wrote he thought of `<I>` and `<B>` having become just another `<SPAN>`.

And then there are a few cases which are purely presentational, w/o any apparent further intent, like these reproducing a contents listing from a printed book:

Code: Select all

The Victory. <em>First Rate.</em> 104 G<sup>s</sup>
Dutch Boats. <em>Tacking</em> (Margate)
Seems hard to create a useful generic class for these...except "italic"...

Thanks for your insight.

JayAitch
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: Use <I> or <SPAN> or what?

Post by Albert Wiersch »

Hello,

It sounds like you've done a lot of research on this! I'll throw my opinions out there.

I would not use "i" or any element if it were just for presentation (where CSS would be more appropriate).

But if it's a gray area or it's questionable then I think "i" would be fine and so would <span>, so whichever is easiest to implement.

Same for "em". If it's a questionable use then I think "em" or a span would both be good... so use whichever is easier.

MDN (https://developer.mozilla.org/en-US/doc ... /Element/i) says this for the "i" element:
The HTML <i> element represents a range of text that is set off from the normal text for some reason. Some examples include technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type.
...and for the "em" element (https://developer.mozilla.org/en-US/doc ... Element/em):
The HTML <em> element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.
Also keep in mind that if a screen reader is reading the page then it might emphasis anything marked up with "em", so consider that.... but in many cases it probably wouldn't be problematic to emphasis many of those things you listed.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
jayaitch
Rank II - Novice
Posts: 20
Joined: Fri Mar 30, 2012 3:14 pm

Re: Use <I> or <SPAN> or what?

Post by jayaitch »

Hello Albert,

probably more than it's worth it, however, with 18K <EM> on hand I did not want to fall into the same trap as back then with the <I> deprecation. Fortunately a big chunk were <CITE> cases. Taxonomic/idiomatic names/phrases being in second. Meanwhile I'm down to 2.3K remaining.

Apparently I missed (or failed to give proper consideration) the MDN definition which sounds more liberal than the one at W3C https://html.spec.whatwg.org/multipage/ ... -i-element which I already stretched to some extent:
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.
Also the usage remark for `<I>` at MDN is helpful, albeit with the second part I still have troubles to apply everytime - I can write, but the linguists' - or theorists' - dissecting knife is above my head:
Use the <i> element for text that is set off from the normal prose for readability reasons. This would be a range of text with different semantic meaning than the surrounding text.
I have no idea to what extent a screen reader might stress or emphasize something marked up with `<EM>`, like in "A group of soldiers in front of the Duke of Cumberland making fun of the French". Or with some old map description: In the NE still the fabulous da Gama Land is designated/marked.

Using `<I>` would be the easiest, but also a cheap way out. OTOH while usually there is little problem in finding a suitable class name for a block element like a summarizing paragraph, I find it tricky to invent a class name logically covering the outlined range of cases, which all are inline, unless making it "italic". Likely they always will be italic, so it might not hurt, yet it still might come out funny.

--
JayAitch


For the record:

Definitely this is highly contingent on the content of a site, but after going through all the <EM>s here there were left few (7%), with well above 75% been turned into <CITE>s. The remaining 15% are <I>s, with two thirds being foreign language/taxonomic terms/phrases (with lang attribute). This does not count cases italization was achieved through some CSS class, which was neglectible though.