Bold and Italic

When adding visual emphasis, it is essential to understand the semantic differences to convey the appropriate meaning in a text.

These elements are easily misused. Please read carefully and thoroughly.

Examples from the Mozilla Developer Network (MDN) web docs:

<strong>

The Strong Importance element indicates that its contents have strong importance, seriousness, or urgency. Basic example:

<p>Before proceeding, <strong>make sure you put on your safety goggles</strong>.</p>

<em>

The Emphasis element marks text that has stress emphasis. Example:

“Just <em>do</em> it already!”

<i>

The <i>: element represents a range of text that is set off from the normal text for some reason, for example, technical terms, foreign language phrases, or fictional character thoughts.

<p>The Latin phrase <i class="latin">Veni, vidi, vici</i> is often mentioned in music, art, and literature.</p>

Do not use <i> to italicize text for titles! Use the semantically appropriate cite element for those purposes.

<b>

The Bring Attention To element is used to draw the reader’s attention to the element’s contents, which are otherwise not granted special importance. Example:

<p><b class="lead">This is my paragraph lead.</b> The rest of this paragraph is really very interesting but you might not know that if you only skimmed the page.</p>

Last updated