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.

⋆ Hi! Thanks for stopping by ⋆

Design × Code × Words for a better Web,
made in the Philippines by Sophia Lucero.