The <strong>/<b> and <em>/<i> tags have exactly the same effect in most
web browsers, but there is a fundamental difference between them: <strong> and <em> have a semantic meaning
whereas <b> and <i> only convey styling information like CSS.
While <b> can have simply no effect on a some devices with limited display or when a screen reader software is used by a blind
person, <strong> will:
- Display the text bold in normal browsers
- Speak with lower tone when using a screen reader such as Jaws
Consequently:
- in order to convey semantics, the
<b> and <i> tags shall never be used,
- in order to convey styling information, the
<b> and <i> should be avoided and CSS should be used instead.
Noncompliant code example
<i>car</i> <!-- Noncompliant -->
<b>train</b> <!-- Noncompliant -->
Compliant solution
<em>car</em>
<strong>train</strong>
Exceptions
This rule is relaxed in case of icon
fonts usage.
<i class="..." aria-hidden="true" /> <!-- Compliant icon fonts usage -->
