Bolding and italics are often taken for mere styling elements, but they 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 readers.
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. |
em
elementstrong
elementi
elementb
element