Webstandards, Accessibility and Usability at Penn State

Bold Instead of Italics

Italics in print is been used for a number of reasons including listing book and movie titles, foreign words, mathematical variable names and emphasis, but since italic text is often not as clear on the Web, many editors use bold face or a combination of bold and italics where italics would have been used in print. See examples below.

B vs 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. Screen readers are more likely to recognize STRONG, EM and pronounce them in a different voice or volume.

2. STRONG, 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.

It should be noted though 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.

XHTML NOTE Both the B and I tags are included in the XHTML standard, and it is not currently a part of Section 508 policy that all B and I tags be replaced with STRONG and EM tags.

Some possible semantic uses of bold & italics.

These items should definitely be tagged as STRONG and EM.

1. To provide a warning label.
2. To highlight 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.)
• Variable names in math, science and computing texts (e.g. x = 2)
3. To make menu items, titles or navigation more distinct.
4. Bold face can help users on a visual browser scan for key concepts which may be delimited in another way (e.g. special punctuation) within the text.
5. You include bold and italics for a design purpose, but not really to provide extra information.

Using CSS

When bold face or italics is primarily visual and tied to a specific presentational use, it is often better to include a 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

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 stylesheet 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.

Still More Tags

There are some tags which are not commonly known which are designed to represent different semantic concepts which are 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 visually bold and italics.

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 which 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 formatting is underline by default, but you can use CSS to change it to some other format (perhaps a new color or with a color 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 /> to use or CSS specifications (e.g. {font-weight:bold}).

Top of Page