Lesson 20 — Strong Importance <strong>

Learning Goals

• Understand the purpose of the <strong> element.
• Learn how it differs from <b>.
• Use <strong> for semantic importance and accessibility.

Part 1 — What is <strong>?

The <strong> element marks text as having strong importance. By default, browsers render it in bold, but it also carries meaning for search engines and screen readers.

Compare: <b> only changes appearance (bold), while <strong> adds semantic weight.

Part 2 — Example

<p>Warning: <strong>Do not</strong> touch the wires.</p>
<p>This is <b>bold text</b> without extra meaning.</p>

Result: Both look bold, but <strong> communicates urgency to users and assistive tech.

Part 3 — Best Practices

• Use <strong> for warnings, critical notes, or important instructions.
• Limit usage to meaningful emphasis — don’t overuse.
• Combine with clear writing for maximum impact.

Part 4 — Common Mistakes

• ❌ Using <strong> purely for style instead of meaning.
• ❌ Overloading a page with too many <strong> elements.
• ❌ Confusing <strong> with <b>.

Quick Quiz

1. What does <strong> do?
2. How is <strong> different from <b>?
3. When should you use <strong> instead of <b>?

Mini Project — Warning Label

Create a “Safety Instructions” page. Use <strong> to mark critical warnings (e.g., “Always unplug the machine before cleaning”). Compare with a version using <b> only.

Lesson 20 Dictionary

Terms introduced in this lesson.

B

<b> (Bold)

A stylistic element that makes text bold without semantic meaning.

S

<strong> (Strong Importance)

Marks text as strongly important; bold by default and meaningful for accessibility/SEO.