strong
Indicates strong importance, seriousness, or urgency. Rendered as bold with font-synthesis protection.
Description
The <strong> element indicates strong importance, seriousness, or urgency. Screen readers may announce it with a change in voice. VB styles it with font-weight: 600, font-synthesis: none (prevents faux bold), and font-optical-sizing: auto for variable fonts.
Inside <code> and <pre>, strong gets a subtle highlight background instead of relying on weight alone.
When to Use
- Warnings: "Warning: This action cannot be undone"
- Urgency: "Do not share your password"
- Important labels: "Important:", "Note:", "Critical:"
- Key facts: The most important sentence in a paragraph
When NOT to Use
strong vs b
| Element | Semantics | Screen Reader |
|---|---|---|
<strong> |
Importance, urgency, seriousness | May be announced with emphasis |
<b> |
Draw attention — no extra importance | Not announced differently |
strong vs b usage
<!-- strong: importance / urgency --><p><strong>Warning:</strong> This action is destructive.</p> <!-- b: attention without importance --><p>Try the <b>Classic Burger</b> — our most popular item.</p>Examples
Warnings and urgency
<p><strong>Warning:</strong> This action cannot be undone.</p><p><strong>Do not</strong> share your password with anyone.</p>Nested Strong
Nesting <strong> increases the degree of importance:
Nested strong
<p><strong>This is important. <strong>This is very important.</strong></strong></p>Bold in Code
Inside code blocks, <strong> gets a highlight background for better visibility in monospace:
Strong in code
<pre><code>const result = <strong>calculateTotal</strong>(items);</code></pre>CSS Reference
strong CSS
strong, b { font-weight: 600; font-synthesis: none; /* prevent faux bold */ font-optical-sizing: auto;} /* Combined bold + italic */:where(strong em, em strong) { font-weight: 600; font-style: italic; font-synthesis: none;} /* Bold in code — highlight background */:where(code, pre) :where(b, strong) { background-color: oklch(from var(--color-interactive) l c h / 0.12); border-radius: var(--radius-s); padding-inline: var(--size-2xs);}Accessibility
- Some screen readers announce
<strong>with a change in voice tone - This distinguishes it from
<b>which is not announced differently - Nesting
<strong>increases the degree of importance semantically - Do not use strong for every bold word — overuse dilutes the signal