Bold and Italic Formatting

Bold Instead of Italics

Italics in print are used for a number of reasons, including listing book and movie titles, foreign words and mathematical variables, and for emphasis. Unfortunately, italic text is often not as clear on the Web, so many editors use bold face, or a combination of bold and italics, where italics alone would be used in print. See the examples below.

Print Formatting

The book Le Petit Prince is considered to be poétique et philosophique in French literary culture (See French Wikipedia: Le Petit Prince).

Web Formatting 1 (Bold)

The book Le Petit Prince is considered to be poétique et philosophique in French literary culture (See French Wikipedia: Le Petit Prince).

Web Formatting 2 (Bold and Italics)

The book Le Petit Prince is considered to be poétique et philosophique in French literary culture (See French Wikipedia: Le Petit Prince).

Top of Page

B Versus STRONG

Many accessibility experts recommend using STRONG instead of B for bold face text, and EM instead of I for italic text. The reasons for this recommendation are:

  1. STRONG and EM are semantic tags, meaning that they indicate that the author wishes to provide emphasis, which is rendered as bold/italic on a visual browser or in different speaking styles on a screen reader.

  2. In theory, screen readers could pronounce STRONG and EM in a different voice or style. However this rarely happens in practice (the same is true for B and I tags).

It should be noted, however, that many authors specify bold or italics purely for visual reasons. In these cases, B or I may be better because having a screen reader switch voices without adding true emphasis may be distracting.

NOTE: No accessibility specifications require eliminating the use of the B and I tags, just that they be appropriately used.

Some possible semantic uses of bold & italics.

These items are examples of items that could be tagged as STRONG and EM.

  1. Warning labels
  2. Key concepts or key vocabulary items in a course.
    But using bold face to highlight every instance of emphatic intonation could be just a bit distracting within a long text but could be useful in visual browsers.

Some possible visual uses of bold & italics

  1. To make colored text or small text more distinct and legible.
  2. Academic conventions, including:
    • Book and movie titles (e.g. Gone with the Wind)
    • Foreign words in an English text (e.g. "The Spanish word for cat is el gato.")
    • Variables in math, science and computing texts (e.g. x = 2)
  3. To make menu items, titles or navigation tools more distinct.
  4. Helping users on a visual browser scan for key concepts that may be delimited in another way (e.g. special punctuation) within the text.
  5. For design-related purposes.

Top of Page

Using CSS

When bold face or italics is primarily visual and tied to a specific presentational use, it is often better to include a CSS specification for bold face or italics. For instance, if you want a CAPTION tag within a TABLE to always be bold or bold and italics, you can use a CSS declaration such as:

Examples of using CSS for bold and italics

caption {font-weight:bold}
caption {font-style: italic; font-weight:bold;}

However, there may still be times when using a B or I tag to indicate visual formatting is the most efficient solution. From a standards point of view, a style sheet solution such as <span class="bold">Bold Text</span> is just as semantically vacuous as <b>Bold Text</b> and consumes many more ASCII characters in the HTML file.

Top of Page

More Alternate Tags

There are some tags which are not commonly known that are designed to represent different semantic concepts normally indicated by italics or other formatting changes. These tags are supported by all browsers and can be restyled with CSS.

CITE Tag (Italics by Default)

The CITE tag is semantically designated for short citations such as book titles. The default formatting is italics, but CSS can be used to make this tag both bold and italic.

VAR Tag (Italics by Default)

The VAR tag is semantically designated to represent variables in computer code or mathematical equations.

DEL Tag (Strikethrough by Default)

The DEL tag is semantically designated to indicate text that should be removed, and should be used as a substitute for the STRIKE tag.

The INS tag is used to indicate recently inserted text or text that replaces deleted text. The text is underlined by default, but you can use CSS to change it to another format (perhaps a new color, or with a colored background).

CODE and KBD Tags (Monospace Font by Default)

The CODE tag is semantically designated to spell out code such as HTML tags (e.g. <br />) or CSS specifications (e.g. {font-weight:bold}).

The KBD tag is designated to specify keys to be typed by a users (e.g. RETURN) in technical documentation.

Top of Page

HTML 5

The new HTML 5 specification includes additional semantic tags that can also be used in conjunction with CSS to provide appropriate markup and formatting. Some examples include:

  • FIGCAPTION – Creates visible text that describes an image.
  • MARK – Creates marked or hilighted text

Top of Page