Semantic Use of Bold and Italic Elements
The “bold” and “italic” HyperText Markup Language (HTML) elements, expressed as <b> and <i>, respectively, aren’t illegal. In fact they’re legal to use and have distinct semantic purposes. Whether to use them or not should be dictated by said purposes, and nothing else. Right from the start I must say the “bold” and “italic” element names are deceiving because they shouldn’t be used to make “bold” and “italic” text solely for the purpose of making “bold” and “italic” text. That would be a presentational thing and that’s what your Cascading Style Sheet (CSS) is for. Right?
Emphatically Not Interchangeable
Some people seem to think that “b” and “i” are old school elements, now to be replaced by their newer brothers, the “strong” and “em” elements, respectively. That’s not the case. They are not interchangeable. Now while it is true we haven’t yet explored the semantic meaning of the bold and italic elements, I will say this now, “b” does not mean strong emphasis or importance; that’s what the “strong” element, written as <strong>, is for. I will also state that “i” does not indicate light emphasis, that’s what the “em” element, written as <em>, is for. Now that that’s out of the way, what exactly are these semantic purposes of the “b” and “i” elements? Let’s take a closer look at these elements and find out.
The Bold Element
To “b” or not to “b” — that is the question. And as far as I’m concerned, it’s a helluva tough question. But decision-making is part of the job, and knowing the answers is what earns you the big bucks. So what is the decision that needs to be made in this case? Well, first we need to figure out what the “b” could be for, semantically-speaking.
The Web Hypertext Application Technology Working Group (WHATWG) HTML 5 Working Draft offers this “b” element definition:
The
belement represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened. — WHATWG
To the best of my knowledge this is the same as or expanded from the HTML 4 specification. In other words this element isn’t going away, and I don’t think that decision was made solely for legacy support. It’s because it has a role, or so they say. But, the WHATWG goes on to say:
The
belement should be used as a last resort when no other element is more appropriate. In particular, headers should use theh1toh6elements, stress emphasis should use theemelement, importance should be denoted with thestrongelement, and text marked or highlighted should use themelement. — WHATWG
Say what!? What the heck is the “m” element? Oh, no, not another one.
So now that we know this information, it’s decision time. I mentioned it was a tough decision, but maybe not. Perhaps it might be better termed an easily impossible decision. At least it is for me. I’ve used the “b” element a total of zero times. When I encounter a situation where it might come up, I simply ask myself why it is I want the word or group of words to be bold. The answer, for me, usually comes up the same: to strongly emphasize the text in question or show how important it is. I end up using the “strong” element or I use a “span” with a class to increase the font-weight.
But I could argue for the “b” if I want to convey that meaning, if I listen to the spec — to highlight some text, if you will — to all visual users. But why? Maybe the price of an item in an online shop could be “bold” or something like that. Or maybe it could be used on a form error that’s returned to a user. In situations like that I would almost always use a span element with a highlight or error class, but maybe I should use the “b” so I can convey the meaning to as many visual users as possible, including those without style sheet support. Maybe I’m wrong for avoiding it.
I mentioned before that maybe it wasn’t a tough decision. But as it concerns the “b” element I’m not so sure. It’s valid, isn’t harmful per se, and offers a little something extra. But if used it doesn’t really smack of presentational separation, does it? As I said, I’ve never actually used the “b” element, but it’s not that I haven’t considered it. In the first paragraph I wrote that “they’re legal to use and have ‘distinct’ semantic purposes,” referring to these elements. In the case of the “b” element, I don’t really know how distinct it really is. A semantic boldness? I’ve always found this a bit indistinct. I don’t really like the “b” element because it is semantically weak in my eyes.
I like the “i” element a whole lot better.
The Italic Element
The “i” element has purpose, he thought. That’s what I think. This is an element I actually use. Not often, mind you, but there is a time and place.
Before I get into this too much, though, let’s again see what the WHATWG has to say about it in the HTML 5 Working Draft. In the blockquote below is their “i” element definition:
The
ielement represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized. — WHATWG
To the best of my knowledge this is the same as or expanded from the HTML 4 specification. In other words this element isn’t going away, and I don’t think that decision was made solely for legacy support. It’s because it has a role, and in the case of this element, I do agree. It’s clearer to me. But I should add that the WHATWG goes on to say:
The
ielement should be used as a last resort when no other element is more appropriate. In particular, citations should use theciteelement, defining instances of terms should use thedfnelement, stress emphasis should use theemelement, importance should be denoted with thestrongelement, quotes should be marked up with theqelement, and small print should use thesmallelement. — WHATWG
It’s almost the same conundrum we have to deal with when regarding the “b” element. But as I mentioned, to me it’s clearer. I use this element somewhat regularly as I feel comfortable making the distinction between properly italicized text and lightly emphasized text. If I’m writing a word or group of words and I want to convey to the reader that I want to emphasize said text and I want them to say it with vocal inflection, I use the emphasis element. But if I want to italicize text to convey thought or language changes — what I consider legitimate usages — I use the “i” element. Here’s one example (thought/dream):
Why does this semantic markup stuff have to be so unclear at times, he thought.
It’s written like this:
<p><i>Why does this semantic markup stuff have to be so unclear at times</i>, he thought. </p>
In this example the “i” element (with no attribute) is applied to all of the text before the comma. That is what he is thinking. This is a long-standing convention in writing, and it’s a meaning I want to carry over to as many readers as possible. If there was better aural style sheet support, I’d even apply a lower pitch to it. (If I needed to add emphasis to italicized text, I would style it to render without an italic treatment: i em { font-style : normal; }.)
Here’s another example (foreign language instance):
The nematicidal marigold, Tagetes minutum, can grow to 8-10 feet.
It’s written like this:
<p> The nematicidal marigold,<i lang="la">Tagetes minutum</i>, can grow to 8-10 feet. </p>
In this case I have applied the “i” element to the Latin binomial Tagetes minutum, and I added the language attribute: lang="la". Again, this is a long-standing convention, one I choose not to change. After all, the Internet has changed how we access and read content, but the method of writing it hasn’t really changed. The thing that’s changed is that we know wrap our text in special markup so the browser understands it (makes it machine readable) and displays it to users in a way that provides a visual translation of our meaning, just like we do in print.
Has the Jury Reached a Decision?
These are the facts as I know them. For me the “b” element lacks appeal because its distinction is, to me, quite unclear. The “i” element, on the other hand, has a couple of uses I feel have a clear distinction. What are your thoughts? Should they be deprecated? Should something else be used in their place? Must all text be unstyled in its raw form to be pure and proper, and to maintain an absolute separation between markup and style? If you take that particular high road, then what about the default “styling” of other clearly semantic elements like headings and blockquotes?
I don’t expect answers to come easily, but I’m interested in your thoughts all the same.
David Hucklesby responds:
Posted: November 6th, 2007 at 1:08 am →
How do you mark up a “you are here” list item in a set of links? I now replace the “a” element with a “b”. This not only avoids extra classes and CSS to prevent the normal “hover” action and the “pointer” cursor, but also indicates “you are here” in the absence of styling.
I am likely wrong, but “b” seems so convenient for this purpose.
John Faulds responds:
Posted: November 6th, 2007 at 1:54 am →
@ David: Convenience shouldn’t be a factor when considering what element to choose. It seems to me that in your situation you’re emphasising the link for the page you’re on.
I agree with you Mike about the usage of b and i and the way I use them pretty closely follows yours. I use i for italicising titles etc but can’t think of a situation where I’d use b.
On a side note, do you need to add the lang attribute to scientific names? Yes, they are Latin, but they’re also part of English (and every other language) because there’s no other alternative.
Tommy Olsson responds:
Posted: November 6th, 2007 at 2:30 am →
I would use
strongfor this, which, for once, seems to be in line with the intentions of the WHATWG.Good article, Mike. In the Bad Old Days people abused
BandIto emphasise things. In the Brave But Equally Bad New World people abuseSTRONGandEMto boldface and italicise.I find it ironic, though, that you quote the WHATWG in an article about semantics, since semantics seems to be the furthest thing from that group’s mind.
Mike Cherim responds:
Posted: November 6th, 2007 at 2:52 am →
@David: You really had me thinking there I must admit. I mean the idea of an emboldened highlight style of sorts to, well, highlight a “You are here” link-a-like has merit. It’s not wrong! But…
@John: I think you’re righter, but even of more relevance than the “emphasis” part is the “importance” part of
strong’s semantic meaning. The page-on link-a-like is important. So…@Tommy: The
strongelement might be the best choice of two. Something strong versus something bold — something bold versus something strong. I guess it all boils down to whether or not one really means it or if it’s really important. Versus just something meant to look that way.@John (again): The Latin language is used so it’ll be internationally used and recognized by the scientific community, but the language is still Latin so I’d say the language should be identified by way of the attribute. Part of the idea of identified language changes is to serve machines I suspect, those equipped with dictionaries, phonetic speech libraries, etc. I think that’s supposed to be the idea anyway.
Georg responds:
Posted: November 6th, 2007 at 7:47 am →
I use ‘b’ and ‘i’ as predefined (styled) visuals, where a styled ’span’ would do and I don’t want/need to add visual or non-visual weight/value. I use ‘b’ and ‘i’ a lot that way - probably more than most, but only when there aren’t more appropriate elements.
‘em’ and ’strong’ is used where I want/need to add extra weight/value to something on all levels, but also only when there aren’t more appropriate elements.
What’s appropriate may sometimes not be all that clear-cut. However, it can most often be judged by forgetting the original idea I had as author, and try to get the meaning by reading it - with and without visual clues (styles).
Stevie D responds:
Posted: November 6th, 2007 at 9:23 am →
I would apply an attribute to the list item, ie
[li id="current"]and then style #current however I want it to be.
There are times when I use [b], usually when I want to embolden a word, phrase or number that isn’t part of a sentence/paragraph, so [strong] doesn’t always seem appropriate. I don’t know if I’m right to do that or not, but it’s fewer bytes!
Andy Mabbett responds:
Posted: November 6th, 2007 at 10:07 am →
Taxonomic names are not really in Latin; an issue is discussed at greater length in my proposal for an IETF language code for such names
Tommy Olsson responds:
Posted: November 6th, 2007 at 10:25 am →
@Stevie D: That approach takes care of the visual styling, but it does nothing for the semantics. A screen reader or non-CSS browser, for instance, won’t be able to indicate the current item at all. Whereas by using
strong, you provide strong semantic emphasis (importance) to the element.Mike Cherim responds:
Posted: November 6th, 2007 at 10:50 am →
@Andy: That’s a very good point. These names aren’t always Latin and can be Greek-derived, et al. and it’s true that many of these are simply made up, often taking in-part from the discoverer’s name, etc. In the absence of a more accurate attribute or element, though — like your proposed
sctag — and since the instances aren’t the site’s language native either, I think that for nowi lang=""would be the next best thing.T-ThrowsFrisbee responds:
Posted: November 6th, 2007 at 11:04 am →
Interesting thoughts on B and I. My editor by default likes to through the strong and em tags on those elements. I think I’ve yet to meet a client that gives a hoot about semantics.
You are handed the text by the client, and they think these bold and italicized elements are enhancements to “their” text. The text that you have waited possibly months to finally get the copy in your hands, to complete the site. Laboring over the decision of what should be bold or italics, just isn’t worth it.
In the end maybe none of it should.
Doing it correctly does add to the visual appearance of the page, does that matter?
In some instances you must show the client some respect as to their “design” decision, and just live with it — no big deal.
What about embedded uses of all of the above?
Jermayn Parker responds:
Posted: November 7th, 2007 at 1:26 am →
:?
Think I will just stick with using
strongandem…Stevie D responds:
Posted: November 7th, 2007 at 8:42 am →
@Tommy: That’s true, but then the [li] would just contain text, not a link, which should make it sufficiently obvious that it doesn’t need any further formatting.
John Faulds responds:
Posted: November 9th, 2007 at 3:00 am →
The point of the discussion is not about visual presentation, but about describing acurately the meaning of your content. As you say, the client doesn’t care about semantics, they just care what it looks like. As there are a variety of methods explained above to achieve pretty much the same thing, the discussion revolves around which is semantically, not presentationally, the best.
Sarah Bourne responds:
Posted: November 9th, 2007 at 9:53 am →
The one place where I consistently want to use italics, not emphasis, is for designating the title of a book or magazine, especially for formal research footnoting. In a similar conundrum, article titles in citations are enclosed in quote marks, but it would be misleading to use q or blockquote tags. If there are HTML tags specifically for the elements in a citation, please let me know - I’ve been looking for them for years!
Mike Cherim responds:
Posted: November 9th, 2007 at 10:04 am →
@T-ThrowsFrisbee:
I don’t exactly labor over it. The answers come quick, but to those for whom answers don’t readily come, I think they should labor over it until they develop a regular practice or protocol. Once they get that then these decisions will come easily.
I’m sorry, I don’t understand what you mean by your last question.
@Stevie D:
Problem is, Stevie, the page one is on might be considered important information in which case it should be marked up accordingly. Plain text will work just fine, unless you want to attach more meaning to it. That would be a developer choice, of course, but if it’s important, then using a strong tag would be a good way to get it done.
@Sarah:
<cite>He said, she said</cite>— not to be confused with thecite=""attribute which is applied to a blockquote and must contain a URL of the quoted passage (if online). View source and you’ll the attribute applied in these blockquotes. This last one has the cite element applied.Sarah Bourne responds:
Posted: November 9th, 2007 at 11:18 am →
Yes, but
citeindicates the entire citation, not the elements within it. If you’re marking up a footnote reference or bibliography, you have to put quote marks around article titles and put book/magazine titles in italics (for Chicago, APA, AMA, etc., or underlined if using MLA style). I see it as a lost opportunity to embed additional meaning separate from the presentation, which always makes me sad. (I suppose that should put me in with the microformats crowd, but I will not join their ranks until they adjust their accessibility attitude. (Should I hold my breath?))Mike Cherim responds:
Posted: November 9th, 2007 at 11:42 am →
Can you point to an example so I can see what you mean, Sarah?
citeelements can be cleverly used outside of the blockquote so if I get better visualization maybe a solution can be found that will satisfy your needs.Sarah Bourne responds:
Posted: November 9th, 2007 at 12:44 pm →
Here’s a book reference:
Heymann, D., ed. Control of Communicable Diseases Manual, 18th Edition. Washington, DC, American Public Health Association, 2004.
… and here’s an article reference:
Friedman, D.S., Curtis, C.R., Schauer, S.L., Salvi, S., Klapholz, H., Treadwell, T., Wortzman, J., Bisgard, K.M., Lett, S.M. Surveillance for Transmission and Antibiotic Adverse Events among Neonates and Adults Exposed to a Healthcare Worker with Pertussis. Infection Control and Hospital Epidemiology. 2004; 25: 967–973.
The
citetag would wrap the entire reference, so any style applied to cite would be applied to all the elements: authors, titles, publishers, pages, dates, etc. But for the book reference, “Control of Communicable Diseases Manual” should be in italics (or underlined) as the title of the book. In the article example, “Surveillance for …” should be in quotes, as the title of the article, and “Infection Control and Hospital Epidemiology” should be in italics (or underlined) as the title of the journal. For both, all other text should be normal. There are variations based on exactly which style guide you’re following.Those are formal examples; I more often run into situations using a less formal syntax, such as, “… according to the American Public Health Association’s Control of Communicable Diseases Manual …” In this case I would want the title to be in italics - to show that it is the title of a book - but not the publisher.
Mike Cherim responds:
Posted: November 9th, 2007 at 1:13 pm →
I suppose you could specify a couple cite element class style in the style sheet to allow you different ways of displaying it so as the keep the semantics intact while still offering important, long-established visuals. Plus the cite could just wrap that to which it applies instead of the whole paragraph. Or maybe cite with a span or two. Maybe something like this:
p.book-ref cite { font-style : italic; /* this is default styling so wouldn’t really be needed */ } /* or */ p.book-ref cite { font-style : normal; } p.book-ref cite span { font-style : italic; }I’d avoid the underline on the web as it seem it could be confused with a link, but that would depend on other factors like the site’s true link styling.
Just speculating.
Dr. Gerald S. Norde responds:
Posted: December 6th, 2007 at 12:30 pm →
I’m having a book, a monograph, published in Feb., 2008. My publisher asked me about select terms and concepts that I discovered and termed, e.g., commodity connexion. The discovered terms and concepts are in italics and only those terms. My question is: May I retin the italics?
Mike Cherim responds:
Posted: December 6th, 2007 at 2:02 pm →
I would, but I would first ask, are they italicized because it’s a standard so to speak, or whether it was done to emphasize. If the former, I’d use the i element. If the latter, I’d suggest em.
The Best of the Beast in 2007 - Beast-Blog.com responds:
Posted: December 23rd, 2007 at 12:26 am →
[…] November: Semantic Use of Bold and Italic Elements […]