HTML em and strong: Emphasis, Importance, and the Difference from b and CSS

HTML <em> marks stress emphasis in a sentence, while <strong> marks strong importance, seriousness, or urgency. Browsers typically render them as italic and bold text respectively, but choose an element by its meaning in context rather than by its default appearance.

How do em and strong differ?

Use em when stressing a particular word changes the focus of a sentence. In “I checked the document today,” emphasizing “I” focuses on who checked it, while emphasizing “today” focuses on when. strong marks the importance of the content itself, such as a warning readers need to know or an important conclusion.

Both elements work within sentences. Do not wrap a whole paragraph merely to make it look like a large heading. Structure document headings with h1 through h6 and apply meaningful emphasis only where needed.

Compare the focus in a complete example

Save this document as emphasis.html and open it in a browser. Compare the stress in the first two sentences, the important instruction, and the final sentence that uses visual bold styling alone.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Distinguishing emphasis and importance</title>
  <style>.visual-bold { font-weight: bold; }</style>
</head>
<body>
  <h1>Emphasis in context</h1>
  <p><em>I</em> checked the document today.</p>
  <p>I checked the document <em>today</em>.</p>
  <p><strong>Check your backup before replacing the file.</strong></p>
  <p>Terms in this document: <b>element</b> and <b>attribute</b></p>
  <p>Visual styling example: <span class="visual-bold">This part is bold through CSS.</span></p>
</body>
</html>

With common default styles, “I” and “today” appear italic, while the backup instruction and terms marked with b appear bold. The span is also bold because of CSS, but it does not become an element expressing strong importance. Fonts and user styles can change the appearance, so express important meaning clearly in the wording too.

Distinguish b from CSS bold styling

Thinking of b as simply “strong with no meaning” misses its purpose: it draws attention. Use CSS when appearance alone is the goal. Likewise, do not choose em simply because you want italic text.

Removing em’s italics or changing strong’s weight through CSS preserves the meaning expressed in HTML. Conversely, making a span bold does not give it the meaning of strong. Actual announcements by assistive technology vary by environment, so do not assume a specific voice change will always occur. See the MDN em reference, MDN strong reference, and MDN b reference for the element definitions.