Summary

Proper application of emphasis allows users to distinguish vocal emphasis from keywords from purely stylistic flourishes.

Techniques

Note that HTML 5 defines more precise uses for the em, strong, i and b elements (see the explanatory table below). It is not required to follow these rules to meet WCAG 2.0, but they should be considered best practice. The examples in this section follow these guidelines.

Example

Example 1 — Use of em for vocal stress
<p>
   … There was nothing so <em>very</em> remarkable
   in that; nor did Alice think it so <em>very</em>
   much out of the way to hear the Rabbit say to
   itself, <q>Oh dear! Oh dear! I shall be 
   late!</q> …
</p>
<p>
   … 'Really this is what is meant by the Fourth
   Dimension, though some people who talk about the 
   Fourth Dimension do not know they mean it. It is 
   only another way of looking at Time. <em>There 
   is no difference between Time and any of the 
   three dimensions of Space except that our 
   consciousness moves along it</em>. …
</p>
Example 2 — Use of strong for indicating importance
<p>
   <strong>Warning</strong>, all features should 
   be considered unstable …
</p>
<p>
   <strong>Do not feed the bears!</strong> 
</p>
Example 3 — Use of i element for latin terms
<p>
   When hybrids are able to breed <i>inter se</i>, 
   they transmit …
</p>
<p>
   Among the sea-shells, the most abundant was the 
   <i>Patella deaurat</i> …
</p>

Explanation

Bolding and italics carry various kinds of information pertinent to the text: emphasized points, changes in tone or location, special names, etc. Unless the correct semantic tagging is used to apply this formatting, however, the same information cannot be conveyed to non-visual users.

The following table outlines how to apply the various HTML5 and CSS methods for bolding and italics:

Element/Propety Purpose
em The em element indicates the text is to be vocally stressed.
strong The strong element indicates importance, such as when making imperative statements or using signal words like 'warning' and 'alert'.
i The i element is used when the use of italics indicate a change in tone or voice. An example provided in the HTML5 specification is for an extended dream sequence, but could be any similar divergence from the main narrative into thought or remembrance. The i element is also used whenever there is semantic significance behind the emphasis (e.g., the italicized words indicate a technical term, foreign words, etc.).
b The b element is used whenever the bolding conveys semantic meaning, similar to the use of i for semantic tagging (e.g., keywords).
font-style: italic
font-weight: bold 		The CSS properties for bolding and italics should be used whenever the use of bolding and italics is presentational (for example, on headings and lead-in words). CSS formatting carries no semantics, so the emphasis will not be noted by assistive technologies.

Related Links