Last summer, I read the complete HTML5 specification, and every previous HTML specification (even the abandoned ones), and all CSS specs I could find, and a lot of XML specs. Since I love semantically rich hypertext documents, let me give you the idea behind the relevant HTML semantics in HTML5.
b were indeed out of fashion. The reason was that they essentially worked like
strong, respectively, but with focus on presentation and not on semantics (which is bad).
i meant that the text should be in italics (it said something about how the text should be rendered on-screen). On the other hand,
em meant that the text was to be emphasised (it said something about the semantics of the text).
There is an important theoretical difference here. If you use
em, the user agent (=browser) knows the text should be emphasised, so it can render it in italics if the document is displayed on-screen (or all-caps if formatting is not possible, or maybe even in boldface is the user prefers that), it can pronounce it differently if the document is spoken to the user, etc.
Notice that emphasis really is about semantics. For instance, the phrases
- The cat is mine. (=not the dog!)
- The cat is mine. (=not yours!)
do not have the same meaning.
The same difference applies to
b (boldface font) and
strong (strong emphasis).
A general principle of digital writing in general, and of hypertext authoring in particular, is that you should separate content and style. In hypertext authoring, this means that the content should be in the HTML file, and the style should be in a CSS file (or a number of CSS files). A different but related principle is that the document should be rich in semantics (like marking up headers, footers, lists, emphases, addresses, navigational areas, etc.). This has a number of advantages:
- It is much easier for computer programs to interpret the document. These programs include browsers, text-to-speech applications, search engines, and digital assistants. (For example, the browser can let you save an address to your address book, if only it can find and interpret it. Also, you might know that Microsoft Word can create and automatically update a TOC for you if you mark up your headings correctly.)
- It is much easier to change the style later on. (If you want to change the colour of all your third-level headings in your 860-page document, you can change a single line in the stylesheet. If you had mixed content and presentation, you would have to go through the entire document manually. And you would probably miss a heading or two, making the document look unprofessional.)
- You can use different stylesheets depending on the circumstance (is the document being displayed on-screen or printed on paper?). You can even let the end user choose the style herself. (My website offers a number of alternate stylesheets. In IE and FF, you change these using the View menu.)
So, in short,
b were deprecated because they were HTML tags concerned about presentation, which is totally wrong.
b are no longer deprecated. Instead, they are given sematic meaning. So they are now actually about semantics, and not about presentation.
As before, you use
em to mark up emphasis: "The cat is mine." But you use
i for almost all other cases where you would use italics in a printed work. For instance:
- You use
i to mark up taxonomic designations: "I like R. norvegicus."
- You use
i to mark up a phrase in a different language compared to the surrounding text: À la carte
- You use
i to mark up a word when you talk about the word itself: "drink is both a noun and a verb"
It is also a good idea to use the
class attribute to specify the precise usage (also Google "microformat" and "microdata"). And, of course, in the second case, you should really use the
lang attribute to specify the correct language. (Otherwise, for instance, a text-to-speech agent might mispronounce the text.)
A year ago or so, the HTML5 specification also said that
cite should be used to mark up names of books, films, operas, paintings, etc.:
- What do you think of Nymphomaniac?
Finally, since long ago,
dfn is used to mark up the defining instance of a phrase in a text (like a mathematical definition, or the definition of a term):
- A group is a set X equipped with a single binary operation * such that...
So the italics in your printed book, which can mean a lot of different things, is represented by four different HTML5 tags, which is really great, because semantics is good, as I tried to convince you about earlier. (For instance, you can ask your browser to make a list of all definitions in the text, so you can make sure you know them all before the exam.)
b, the HTML5 specification says that
strong should be used to mark up an important part of the text, like a warning or some very important-to-catch word in a sentence. On the other hand,
b should be used to mark up things that need to be easy to find in the text, like keywords. I also use
b as headings in list items (LIs).