|

HTML 5 💻 b, strong, i, em, mark elements

Bykronos

These elements add semantic meaning and visual styling to text. While some look similar, each serves a distinct purpose.

The Bold Element <b>

The <b> element makes text bold without adding semantic importance.

<p>
  Important courses are <b>gym</b> and <b>break</b>
</p>

Browser Display:
Important courses are gym and break

Key Points:

  • Draws attention visually without indicating importance
  • Use when you want to style text bold but without semantic meaning
  • If there’s no semantic purpose, use CSS font-weight: bold instead

The Strong Element <strong>

The <strong> element indicates that its content has strong importance, seriousness, or urgency.

<p>
  No matter what he says <strong>never answer to him</strong>.
</p>

Browser Display:
No matter what he says never answer to him.

Key Points:

  • Adds semantic meaning — the content is important
  • Browsers render it in bold by default
  • Should NOT be used just to apply bold styling
  • Used for warnings, important instructions, or keywords with significance

The Italic Element <i>

The <i> element indicates text that has a different semantic meaning from the surrounding text.

<p>
  The term <i>memory</i> describes how computers store data.
</p>

Browser Display:
The term memory describes how computers store data.

Key Points:

  • Used for:
  • Technical terms
  • Thoughts or internal dialogue
  • Foreign language words (e.g., c’est la vie)
  • Alternative voice or mood
  • Taxonomic names (e.g., Homo sapiens)
  • DO NOT use it for styling purposes — use CSS font-style: italic instead

The Emphasized Element <em>

The <em> element represents stress emphasis — it changes the meaning of the sentence when emphasized.

<p>
  It contains <em>egg</em>.
</p>

Browser Display:
It contains egg.

Key Points:

  • Adds semantic meaning through stress emphasis
  • Often limited to specific words that affect the sentence’s meaning
  • Compare these examples:
  • “It contains egg.” (stress on what it contains)
  • “It contains egg.” (stress that it does contain egg)
  • “It contains egg.” (stress on who contains it)

The Mark Element <mark>

The <mark> element represents highlighted text for reference or notation purposes.

<p>
  Several species of <mark>snails</mark> are endangered.
</p>

Browser Display:
Several species of snails are endangered.

Key Points:

  • Highlights text visually (usually with a yellow background)
  • Used for:
  • Search results highlighting
  • Text that needs attention
  • Key phrases you want to emphasize
  • References or notations
  • This is purely for visual highlighting — use it when you want to draw the reader’s eye

Quick Comparison

ElementSemantic MeaningVisual StyleWhen to Use
<b>None (purely visual)BoldDrawing attention without importance
<strong>High importance, seriousnessBoldImportant warnings, key instructions
<i>Different voice/moodItalicForeign words, technical terms, thoughts
<em>Stress emphasisItalicChanging sentence meaning through stress
<mark>Highlighted referenceYellow backgroundSearch results, key references

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Formatting Elements</title>
</head>
<body>

    <h1>Text Formatting Demonstration</h1>

    <h2>Bold & Strong</h2>
    <p>
        <b>Note:</b> All students must attend the orientation. 
        <strong>Attendance is mandatory</strong> — you cannot graduate without it.
    </p>

    <h2>Italic & Emphasized</h2>
    <p>
        The French word <i>bonjour</i> means "hello". 
        I <em>really</em> enjoy learning new languages.
    </p>

    <h2>Marked Text</h2>
    <p>
        The search results for "<mark>HTML</mark>" returned 5 million pages. 
        You should focus on the <mark>most relevant</mark> results.
    </p>

    <h2>Combined Examples</h2>
    <p>
        <strong>Important:</strong> The document contains <mark>sensitive</mark> information.
        Please read the <i>terms and conditions</i> carefully. 
        You <em>must</em> agree to them before proceeding.
    </p>

</body>
</html>

Best Practices

✅ Do This:

<!-- Use strong for importance -->
<p><strong>Warning:</strong> Do not touch the equipment.</p>

<!-- Use em for stress -->
<p>I <em>did</em> complete the assignment.</p>

<!-- Use mark for highlighting -->
<p>Search results for "<mark>HTML</mark>"</p>

❌ Don’t Do This:

<!-- Don't use strong just for bold styling -->
<p><strong>Just making this bold</strong></p>
<!-- Use CSS instead: <p style="font-weight: bold;">Just making this bold</p> -->

<!-- Don't use em just for italics -->
<p><em>This entire paragraph is in italics</em></p>
<!-- Use CSS instead: <p style="font-style: italic;">This entire paragraph is in italics</p> -->

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!