Use the “i” Element, and Use It Appropriately
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, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma. I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.
If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!
Maybe of interest to you, too:
- Next: The 3-Second Frontend Developer Test
- Previous: Website Optimization Measures, Part XII
- More under Web Development, or from 2021
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.info—and The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.