HTML5: <b> and <i> tags are going to be useful (read: semantic) again!

Update: For further reading, please refer to these pages: w3.org FAQ on Using b and i tags; HTML5 spec for the i element.

One of the best examples of the shift towards designing with web standards is the use of semantic HTML tags, rather than purely presentational ones (since we have CSS for that). Tags like <b> and <i> have gotten a lot of flak for doing nothing but make things bold or italic. They’re condemned semantically incorrect, even deprecated.

WordPress, among others, has since used <strong> and <em> their place. (Try writing a post and clicking on the “b” and “i” buttons.) Lots of people, including myself, have also adopted that same mindset. But <strong> and <em> only provide emphasis, and will not suffice for cases that require seemingly superficial formatting like boldface and italic.

You probably remember that in writing class, you had to follow certain style guides for your papers. For example, the APA style guide outlines which words and phrases should be italicized:

Italicize or underline the titles of books and articles, species names, introduction of new terms and labels (the first time only), words and phrases used as linguistic examples, letters used as statistical symbols, and volume numbers in reference lists.

That’s just the APA, and many other style guides exist (I grew up on MLA), but you get a general idea. While people can argue that the <cite> tag can handle titles and other items that can be cited, that isn’t enough. It seems the W3C has spoken in its working draft of HTML5.

  • The b element now 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 emboldened.

  • The i element now 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. Usage varies widely by language.

But it must be noted that in their detailed specifications, the <b> and <i> elements must be used as a last resort, and the HTML document author must know when to choose them over <strong> and <em>, as well as the <cite> element.

This is only a tiny part of the changes from HTML4 to HTML5, but I’m glad HTML is becoming more and more capable of handling truly meaningful documents. A large part of the web is written word; HTML needs to be more sensitive to how that written word, as well as other content like multimedia, is displayed.

Now, if only all browsers were as reliable in rendering markup as the W3C intended.

26 replies

  1. Ha! What’s the escape character here? Let me repost that (please delete above … sorry):

    <b><strong>Never hurt anyone<strong><bt>, but to be perfectly honest it isn’t up to the W3C to decide on how human beings should read typographic methods that have been around for 5 centuries. As influential as they are, they’re not going to redefine our culture of reading & writing — not unless they snatch future deselopers and feed them the specs from birth.

    But dealing with the specific — non-visual symbols for purely visual/primarily-visual-yet-ambiguously-semantic devices — what are the instances when it will be honestly useful for the non-visual reader to be aware of these things?

    If we’re truly obsessed with semantics to the level of wanting our markup to be properly understood by aliens digging it up on stone tablets in 5000 years time, I’m sure attributes will suffice — ie. <em class=”species_name italic”>. Even then, I wouldn’t worry too much. As it is the debate is in a ridiculous mess of vague opinions in inappropriate places.

    Reply to this

  2. I don’t fully agree with what you say. More specifically, the B and I elements do not have semantic value—they are purely presentational, and they’re meant to be that way, because people indeed abuse the STRONG and EM elements otherwise.

    I do believe that presentational elements such as B and I are useful. Many people believe semantic markup itself is a goal, but it really isn’t. Semantic markup is simply a means of achieving something higher, e.g. making a web site easy to maintain.

    (I’ve written about this before on my own blog.)

    Reply to this

  3. @Jeff: Yeah, at least the W3C is addressing this issue.

    @Barney: It’s not like the W3C drew these conventions out of thin air, and at least we can see that they’re willing to revise their stance with each version of HTML. It is a very young language (as is the web) after all.

    @Denis: You’re right, I think the problem is we shouldn’t be purists aiming for semantics only. Again, the typographic conventions come to play here: over the decades it has definitely made sense to set text in bold and italic to convey meaningful information about the text.

    Reply to this

  4. I understand the concept of what the new b and i usage can offer, but it seems completely deprecated by CSS.

    The pros: b and i are short, potentially saving on filesize. They’re well known among developers of different levels of experience.

    The cons: b and i will be 100% presentational, and presentation should be separated from the HTML. Because they’re well known, they will constantly be misused by less standards-aware developers. They are extra HTML tags that duplicate a function that is already available.

    I question whether there could ever be a real-world use. The only real-world use I can envision would be on an art site, which by its nature would require visitors to be sighted, changing the situation such that the accessibility justifications for semantic code and separation of presentation elements would carry less weight. In such a situation, it would be reasonable for the developer to misuse ‘strong’ or ‘em’ (or just stretch CSS classes+span tags).

    Am I too idealist? Is there really a likely real-world use that justifies the non-deprecation of b and i, given that they will be misused if they’re not fully deprecated?

    Reply to this

  5. @Dave: I totally agree on separating content and presentation, but this situation (of naming book titles, ships, etc.) is proof that not everything should be set in stone. There has to be compromise. If later on it is determined that b and i should be banned forever, then so be it. Right now, I’m okay with it because it makes more sense from a writing standpoint, since most of us have written a school report, right?

    I also worry about the abuse and misuse, but you know what, if they don’t make an effort to learn, it’s their loss. Everyday I see WordPress themes that have ugly code in them, which is a sign that even if you start with a cleanly-designed piece of software like WordPress, it’s bound to get mucked up. Yes, even if the code they’re using has been deprecated.

    Reply to this

  6. Now, if only all browsers were as reliable in rendering markup as the W3C intended.

    *ahemieahem*

    seriously though.. good think they didn’t deprecate b and i, it’s getting tedious to type span class=”strong” whenever I want the text to be bold..

    Reply to this

  7. I never really fully subscribed to the B-and-I-are-not-semantic school of thought. What makes B less meaningful that STRONG anyway? (Bonus: even if you look up ‘bold’ and ‘strong’ in the dictionary they’re pretty much the same.)

    Reply to this

  8. In the case of HTML/CSS, it’s meaningful as opposed to merely presentational, which bold and italic tags are. However, that becomes a problem with writing conventions that are dependent on the likes of bold and italic to actually provide meaning. So that’s the dilemma right there. Do you use or create a different element just to provide meaning and avoid presentational markup, or compromise?

    Reply to this

  9. @ia, I agree, and my position in the issue is to just go and use B and I anyway. For instance, if I just have to italicize something (like a part of a mailing address? I can’t think of an example now), and not give it “emphasis” from a block of text as EM suggests, I don’t mind adding in an I tag.

    Reply to this

  10. JC, it never was deprecated. It was just deemed unsemantic. B and I still work, and they don’t cause invalid HTML documents. But as I have mentioned, in HTML5 it will have new recommended uses which help support the idea that they can be semantic elements too. To avoid creating new elements, too, I’m sure. We don’t really need new elements that address what can be done using typographic conventions. Which is what the new uses of B and I basically are.

    Reply to this

  11. Ah I see it now. B and I can be used now for almost anything except ‘emphasis’ which is the purpose of STRONG and EM.

    If that’s the case, wouldn’t be better if we drop STRONG and EM then? I mean, it’s not like there’s any presentational difference between B and STRONG; I and EM. Unlike when compared to INS and DEL.

    Unless W3C plans on imposing a presentational difference for B and I similar to INS and DEL.

    Reply to this

  12. Of course there can be presentational differences with CSS. But I get your point, which is kind of my point too: if we’ve been using B and I in word processors to denote all those things, including emphasis, why do we need STRONG and EM anyway? But I think the HTML5 descriptions for B and I differentiate themselves enough from STRONG and EM already. It’s now up to the HTML coders if they think it’s too big of an issue to follow it!

    Reply to this

  13. The examples are too shallow: “stylistically offset” a span of text from the natural flow? <span class=”some_class_to_set_it_apart> comes to mind. Tedious, sure, but semantically correct, and in line with the W3C’s objective of separating content from presentation.

    Encouraging the use of presentational elements in HTML is a step backward in the evolution of the language. “Usage varies by language” — precisely the reason why contextual standards should be in place.

    Reply to this

  14. Usage will always vary by locale, the same way grammar does, but again I raise my point about word processors using B, I, and U not just for styling text but giving meaning to text. For decades, it’s been dictated to us that if you’re going to cite the title of a book, it should be in italics. HTML should be the same way, ideally. Don’t ask the people to memorize a completely different tag for just the title of a book.

    Reply to this

  15. Pingback: Who Says -b- and -i- are Non-semantic Markup? | HowWhyWeb.com

  16. I honestly don’t see ANY reason why you would use a tag intended for styling in mark-up, if you really want part of the text to be styled differently without adding any semantic difference, you can use the (intended) span element and style it appropriately.

    You can not “speak” bold or italic, but you can speak with emphasis or in a stronger tone.

    Not to offend user “ia” above, but that train of thought is exactly why we don’t need elements like these. Citing a book “should” be in italics? That depends on your language mainly and it has no semantic value (other than it being cited). The cite element is available for that and you can style it depending on your locale.

    It’s makes much more sense to have (for example) a species name in a text be treated like this: The lion (Panthera leo) rules the African lands). It’s so much better than: The lion (Panthera leo) rules the African lands.

    Words like that should be targeted by their semantical meaning, not by their looks. Terrible re-introduction if you ask me.

    Reply to this

  17. Pingback: HTML for Beginners P2 Getting Crafty with Text

  18. This is an interesting discussion. I have a WP site that’s an online language textbook, teaching German grammar to English speakers, and I’m using the convention of italicizing all the German words that appear in the body of the text (as opposed to tables or block quotes).

    Is this maybe an example of the proper semantic use of <i>, or should I just be using <em>? I don’t think you’d emphasize these words if you were reading the text out loud.

    I realize there’s also a case for just and apply the style to that class, but suppose I had to choose <em> or <i> …which would be more appropriate?

    (sample page)

    Reply to this

  19. I am curious if anyone knows if screen readers actually change tones differently based on styles?

    Do they ignore bold since that is “presentation” but speak “stronger” on a strong tag?

    This might make it a bit more important to pay attention to the usage.

    Reply to this

  20. Pingback: Why did they replace the and tag with and ? | SWARM | We Design Develop and Make Apps in NYC

Reply

Your email address will not be published. Required fields are marked *

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> Anything in between < and > will be treated as HTML, so you might want to use character entities if you have to display literal markup.

Technology & Computers - Top Blogs Philippines