So you know the
</i> we all once used to italicize text are widely deprecated these days, right? And for good reason. The same goes for
</b>, which nowadays we are told we should not use to make our web text bold.
The reason is that italics and bold are visual styles, and our HTML should not contain visual styling. HTML should contain only semantically meaningful tags, and then we should rely only on browser default settings or on accompanying style sheets to control how that text appears based on the semantic information in the HTML file.
So instead of using
<i></i> tags to make text between them italic, we are supposed to use
<em></em> tags. The tags do the same thing in any visual browser I’ve seen, but “em,” which stands for “emphasis” or “emphasized,” actually conveys information about how to interpret the text. And
<strong></strong> has replaced
This is relevant in screen readers for the blind, or in other situations in which the text is not rendered in visible form — search engine indexing robots, for instance. It’s a smart idea. A screenreader can take its cues from the tags as to how to render the text:
<em> tag for mildly accented intonation, and
<strong> for something more peremptory.
But if you write about any one of a number of topics where accepted styles would have you italicize for other reasons, this can create problems.
I write about wildlife a lot. In the course of writing about living things, I mention those living things’ scientific names. English language stylebooks with which I am familiar hew to the convention of italicizing scientific names thusly: Canis latrans. Boa constrictor. Turdus migratorius. Tegeticula antithetica.
I typed each one of those out, highlighted them, and hit the button in my WordPress edit scree that has an italicized uppercase “I” on it to make them slanty. And here’s how WordPress turned that into HTML tags:
<em>Canis latrans</em>. <em>Boa constrictor</em>. <em>Turdus migratorius</em>. <em>Tegeticula antithetica</em>.
Which means that according to computers and screenreaders and other non-visual interfaces interpreting the text, I am yelling each of those names. Which I generally would not, possibly excepting “Boa constrictor” if I ran into one unexpectedly.
Sometimes, in other words, italicizing does not mean emphasis. And yet those non-emphasized italics tags are largely engineered away.
At this blog’s last home over at faultline.org, I was using a content management system that let you define your own text formatting buttons, and given that I was spending a whole lot of time italicizing taxonomic binomials I made myself one. When I highlighted a word or two and clicked the button, it would surround the highlighted text with code like this:
<span class="taxon">Eriogonum inflatum</span>
And then I just wrote a rule in the site’s CSS that rendered any text of class “taxon” as italic. It worked fine, and it made sense, and I was thinking of figuring out a way to do the same in WordPress. In my copious free time.
As it turns out, though, the whole “don’t use italics tags” thing has itself been deprecated. HTML 5, the increasingly less new standard by which we’re all supposed to write our HTML, turns out to recognize the importance of unemphasized italicized text. Its italics specification includes the following:
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.
Terms in languages different from the main text should be annotated with
lang attributes (or, in XML,
lang attributes in the XML namespace).
The examples below show uses of the
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
It’s nice to know they’ve been thinking this through. But that doesn’t help me with the formatting buttons.