HTML Text Formatting: Bold, Italic, Strong, and Em

Strong and Bold

<strong>This text is important</strong> <b>This text is bold</b>

• <strong> → Makes text bold and tells browsers/screen readers that the content is important.
• <b> → Only makes the text bold visually, without adding extra meaning.

Use <strong> when the text really matters. Use <b> if you just want the bold style.

Emphasis and Italic

<em>This text is emphasized</em> <i>This text is italic</i>

• <em> → Puts emphasis on the text (usually shown as italic) and has semantic meaning.
• <i> → Only makes the text italic, mostly for visual style (like technical terms or foreign words).

Other Useful Text Tags

Highlight text

<p>You need to install <mark>Node.js</mark> first.</p>

The <mark> tag highlights text (usually with a yellow background).

Smaller Text

<p>Price: $20 <small>(excluding tax)</small></p>

The <small> tag makes text smaller. It’s often used for side notes or fine print.

Quick Comparison

Simple Example

<p>
  Please read the <strong>terms and conditions</strong> carefully before signing
  up. The offer is only valid until <mark>30 September</mark>.
  <small>Terms may change without notice.</small>
</p>

<p>
  The word <i>café</i> comes from French, and you should <em>never</em> skip the
  accent.
</p>

Quick Tips

Prefer <strong> and <em> when the meaning matters (better for accessibility and SEO). Use <b> and <i> only for pure styling. Don’t use these tags just to make text look nice use CSS if you only care about appearance. You can combine tags if needed, for example: <strong> <em>Very important </em> </strong>.

Understanding the difference between visual style and semantic meaning helps you write cleaner and more meaningful HTML.