"<strong>" and "<em>" tags should be used

Web:BoldAndItalicTagsCheck

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