Bold and Italic Text

HTML provides both visual and semantic elements for emphasising text.  renders text bold and carries semantic weight — screen readers may announce it with emphasis.  also makes text bold but is purely presentational with no extra meaning.

Italic and Emphasis

Similarly,  italicises text and signals stress emphasis, while  is purely visual. Use  and  when the emphasis is meaningful; use  and  for stylistic uses like technical terms, foreign phrases, or titles.

 — Important (semantic bold)
 — Bold (presentational)
 — Stressed emphasis (semantic italic)
 — Italic (presentational)

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bold and Italic</title>
</head>
<body>
  <p>This is <strong>very important</strong> information.</p>
  <p>This is <b>bold</b> for visual style only.</p>

  <p>Please <em>do not</em> ignore this warning.</p>
  <p>The term <i>Lorem Ipsum</i> is Latin placeholder text.</p>

  <!-- Combining -->  
  <p>This is <strong><em>critically important</em></strong>.</p>

  <!-- Other inline elements -->
  <p>The price is <del>$20</del> now <ins>$15</ins>.</p>
  <p>H<sub>2</sub>O and E=mc<sup>2</sup></p>
</body>
</html>

HTML

Full Editor

Pro Tip

Prefer  over  and  over  wherever the emphasis carries meaning — this improves accessibility for screen reader users.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned