Lesson 17 — Bold Text <b>

Learning Goals

• Understand the purpose of the <b> element.
• See how <b> differs from <strong>.
• Use bold text appropriately for styling emphasis.

Part 1 — What is <b>?

The <b> element renders text in a boldface style. It is mainly a stylistic element with no added meaning or importance.

Compare: <strong> also makes text bold, but adds semantic meaning (strong importance).

Part 2 — Example

<p>This is <b>bold text</b> using the b tag.</p>
<p>This is <strong>important text</strong> using the strong tag.</p>

Result: Both look bold, but <strong> carries extra importance for screen readers and search engines.

Part 3 — Best Practices

• Use <b> for purely visual styling (keywords, UI labels).
• Use <strong> for emphasis that carries meaning.
• Don’t overuse bold text — it loses impact if everything is bold.

Part 4 — Common Mistakes

• ❌ Using <b> instead of <strong> when meaning is important.
• ❌ Making entire paragraphs bold.
• ❌ Relying on <b> for emphasis in accessibility contexts.

Quick Quiz

1. What does <b> do?
2. What’s the difference between <b> and <strong>?
3. Should you use <b> to mark urgent warnings?

Mini Project — Bold Highlights

Create a product description and bold the **key features** with <b>. Then create another version using <strong> for the most important feature, and compare accessibility.

Lesson 17 Dictionary

Terms introduced in this lesson.

B

<b> (Bold)

A stylistic element that makes text bold without adding importance.

S

<strong>

Marks text as important, both visually (bold) and semantically for accessibility/SEO.