Use the “i” Element, and Use It Appropriately
Post from June 29, 2021 (↻ August 22, 2021), filed under Web Development.
em instead of
i” is in the Top 25 of bad advice you can get in HTML development. The two elements have different meanings, the blunt rule ignores all context, and, when handed out in the belief that
i was deprecated, misses that
i is a valid element with legitimate use cases.
In Upgrade Your HTML III, I talk a little more about this element:
<p>In your receipt email, click the <em>View product</em> button and it will take you to a page where you can download the <abbr>PDF</abbr> as well as a text file named <em>sites_using_adobe_fonts.txt</em>. That text file contains the login <abbr>URL</abbr> and password. Additional information is included inside the <abbr>PDF</abbr> on page 4.</p>
Let’s get on thin ice. What crosses your mind when you look at the above code?
- (Insert your thoughts here)
- Are the
abbrelements useful without a
- Are the
emelements used for emphasis?
I’m curious about your thoughts!
abbrelements, this is valid! As
abbrelements can contain an “abbreviation or acronym, optionally with its expansion,” this all looks good.
Personally—as a purist—, I stopped marking up abbreviations and acronyms in the 2000s, after always meticulously marking up and expanding all of them. My memory tells me I picked this up from Ian Hickson, one of my web development role models and a former colleague.
The title of this chapter gives it away: There’s something off with the
emelements. Of course, we can’t tell the intent, so perhaps the author would argue that indeed, they mean emphasis. Yet this emphasis, for a button and a file name, looks more like this use of
emwas presentational rather than structural. It looks like, perhaps, a different quality of text. For this the HTML specification has an element, and that’s
ielement 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.
What we have here may fit several use cases for
i: “View product” seems to warrant an alternate voice or mood, it seems to be of a different quality, and it probably constitutes a form of designation. For “sites_using_adobe_fonts.txt”, it matches another designation and is arguably a technical term.
Let’s go for
ielements and, while at it, remove the
<p>In your receipt email, click the <i>View product</i> button and it will take you to a page where you can download the PDF as well as a text file named <i>sites_using_adobe_fonts.txt</i>. That text file contains the login URL and password. Additional information is included inside the PDF on page 4.
i, and use it appropriately.
Use and Mention
In philosophy, you make a distinction between using a term and mentioning it—the use–mention distinction.
In this example, the terms we wrapped in
ielements are mentioned, rather than used. If you go by this distinction, you would quote the respective terms instead:
<p>In your receipt email, click the “View product” button and it will take you to a page where you can download the PDF as well as a text file named “sites_using_adobe_fonts.txt”. That text file contains the login URL and password. Additional information is included inside the PDF on page 4.
As we’re now left without
ielements, and as we didn’t plan for philosophy to tell us what markup to use, I made this only a note.
I’m Jens Oliver Meiert, and I’m an engineering manager and author. I’ve worked as a technical lead for Google, I’m close to the W3C and the WHATWG, and I write and review books for O’Reilly. Other than that, I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.
If you have questions or suggestions about what I write, please leave a comment (if available) or a message.
Have a look at the most popular posts, possibly including:
Looking for a way to comment? Comments have been disabled, unfortunately.
Perhaps my most comprehensive book: The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.