/

Since:		HTML 4（1997）

strong is an element that indicates the importance of text (bold by default), and em is an element that adds emphasis to text (italic by default). Both carry semantic meaning.

Syntax

<!-- Indicates importance or seriousness -->
<strong>important text</strong>

<!-- Indicates stress emphasis -->
<em>emphasized text</em>

Tag reference (differences from b and i)

Tag	Description
strong	Indicates the importance, seriousness, or urgency of text. Some screen readers announce it with greater emphasis. Displayed as bold by default.
em	Adds stress emphasis to text. Nesting it increases the level of emphasis. Displayed as italic by default.
b	Has no semantic importance — it simply makes text bold. Use it for text you want to draw attention to, such as keywords or product names.
i	Has no semantic emphasis — it simply makes text italic. Use it for technical terms, foreign words, thoughts, or titles.

Sample code

sample_strong_em.html

View sample page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <!-- Use strong to mark critical content -->
  <p>Deleting this file <strong>cannot be undone</strong>. Make sure to back it up first.</p>

  <!-- Use em to add stress emphasis -->
  <p>Please submit it <em>by today</em>.</p>

  <!-- b and i are purely visual styling -->
  <p><b>HTML</b> and <b>CSS</b> are the foundational technologies of the web.</p>
  <p>He is known for the phrase <i>cogito ergo sum</i> (I think, therefore I am).</p>

  <!-- Combining strong and em -->
  <p><strong><em>Never</em> share your password</strong> with anyone.</p>

</body>
</html>

Output

strong renders as bold and em renders as italic. b and strong look the same visually, but carry different meanings.

View sample page

Notes

Both strong and b render as bold, but they have fundamentally different meanings. strong conveys "this text is important" — a meaning that is understood by screen readers and search engines. b, on the other hand, only makes text bold with no semantic weight. The same distinction applies to em and i: the former provides meaningful emphasis, the latter is purely visual.

Choose HTML tags based on meaning, not appearance. Use strong for critical warnings or required information, and em for stress emphasis within a sentence. If you simply want to apply bold or italic styling without any semantic meaning, it is often more appropriate to use CSS properties such as font-weight: bold or font-style: italic.

strong and em can be nested. Nesting em twice increases the level of emphasis. You can also nest em inside strong to express content that is both important and stressed.

SEO and Search Engine Impact

Search engines recognize text wrapped in  as important keywords and use it as a signal to determine the page's topic. However, overusing it can be flagged as spam. Reserve it for truly important content.

Tag	SEO Impact
<strong>	Content is treated as an important keyword. Appropriate use has a positive effect on SEO
<em>	Carries some emphasis signal, but weaker than strong
<b>, <i>	No semantic importance, minimal SEO impact

CSS Customization

The default styles of  (bold) and  (italic) can be overridden with CSS to match your design.

/* Change strong from bold to a color highlight */
strong {
  font-weight: bold;
  color: #cc0000; /* red emphasis */
}

/* Change em from italic to underline */
em {
  font-style: normal; /* remove italic */
  text-decoration: underline;
  text-decoration-color: #4488ff;
}

/* Highlight strong inside a warning block */
.warning strong {
  background-color: #fff3cd;
  padding: 0 3px;
  border-radius: 2px;
}

Changing the style does not change the element's meaning. Always choose the tag based on its semantic role (importance or emphasis), regardless of how you want it to look visually.

Common Mistakes

Mistake 1: Not knowing the difference between strong and b

strong carries the semantic meaning of "importance, seriousness, or urgency." b, on the other hand, only makes text bold visually without adding any meaning. Use b or CSS when you simply want bold text; use strong when the content is genuinely important.

<!-- NG: using strong for content that is not truly important -->
<p>This dish contains <strong>carrots</strong> and <strong>onions</strong>.</p>

The corrected version looks like this:

<!-- OK: use strong for genuinely important content -->
<p>Deleting this file <strong>cannot be undone</strong>.</p>

<!-- OK: use b when you only want bold styling -->
<p>Technologies used: <b>HTML</b>, <b>CSS</b></p>

Mistake 2: Not knowing that nesting em increases the level of stress

Nesting em elements increases the degree of stress emphasis. Some screen readers may alter their tone accordingly. Note that visually, nested em elements still appear as italic — only the semantic stress level changes.

<!-- Nesting em increases the stress level -->
<p>This is <em>important</em>.</p>
<p>This is <em><em>even more important</em></em>.</p>

<!-- em inside strong means "important and stressed" -->
<p>Never <strong><em>ever</em> share your password</strong> with anyone.</p>