<strong>
Defines text with strong importance, seriousness, or urgency
Definition and Usage
The <strong> tag is used to define text with
strong importance. The content inside is typically displayed in
bold.
<strong> conveys strong importance, seriousness or urgency. <b> draws attention without conveying that extra importance; use CSS when the goal is only a visual font-weight change.
<strong> when the
text has semantic importance or urgency, not just for styling. For
purely visual bold text without semantic meaning, use
<b> or CSS font-weight.
<strong> tag, helping visually impaired users
understand the importance of the content.
Browser support and standards
Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.
Read the MDN element referenceAttributes
The <strong> tag supports the
Global Attributes in HTML.
The <strong> tag also supports the
Event Attributes in HTML.
Examples
Basic Strong Text
Use the <strong> tag to emphasize important
text:
Example
<p>This is normal text, but <strong>this is important!</strong></p>Warning Message
Emphasize warnings or critical information:
Example
<p><strong>Warning:</strong> Do not enter your password on unsecured websites.</p>Highlighting Key Terms
Draw attention to important terms or concepts:
Example
<p>In HTML, <strong>semantic markup</strong> is essential for accessibility and SEO.</p
>
<p
>The most important rule in web development is to <strong>always validate your code</strong> before deployment.</p
>Strong with Other Elements
Combine <strong> with other inline elements:
Example
<p
>The deadline is <strong
><time datetime="2025-01-31">January 31, 2025</time></strong
>.</p
>
<p
>Visit <strong
><a href="https://www.example.com">our website</a></strong
> for more information.</p
>Nested in Headings
Use <strong> to emphasize parts of headings:
Example
<h2>Sale: <strong>50% Off</strong> Everything!</h2>
<h3>New Feature: <strong>Dark Mode</strong> Now Available</h3>Styled Strong Text
Customize the appearance with CSS while preserving semantic meaning:
Example
<style>
strong {
color: #d32f2f;
font-weight: 700;
text-transform: uppercase;
}
strong.highlight {
background-color: #fff3cd;
padding: 2px 6px;
border-radius: 3px;
}
</style>
<p><strong>Important:</strong> Please read the terms and conditions.</p>
<p><strong class="highlight">Limited Time Offer</strong> - Act now!</p>Strong vs B: Understanding the Difference
| Aspect | <strong> | <b> |
|---|---|---|
| Purpose | Semantic - indicates strong importance or urgency | Stylistic - purely visual bold text |
| Meaning | Text has semantic importance | No semantic meaning, just visual style |
| Screen Readers | May emphasize with different tone or volume | Read normally, no special emphasis |
| SEO | May give slight importance signal to search engines | No SEO benefit |
| Use Case | Warnings, key points, important terms, urgent information | Keywords, product names, stylistic emphasis without semantic importance |
| Default Style | Bold (font-weight: bold) | Bold (font-weight: bold) |
When to Use <strong> vs <b>
Use <strong> when:
- The text has strong importance, seriousness, or urgency
- You want screen readers to emphasize the content
- The content represents a warning or critical information
- You're highlighting key concepts that affect understanding
- SEO and semantic meaning matter
Use <b> when:
- You need bold text for stylistic purposes only
- Highlighting keywords in a document summary
- Product names or terminology without semantic importance
- The boldness is purely for visual design
- No semantic meaning or accessibility concerns
Best Practices
-
Use
<strong>for content that has actual importance or urgency -
Don't overuse
<strong>- if everything is important, nothing is -
Choose
<strong>over<b>when semantic meaning matters -
Screen readers benefit from proper
<strong>usage for accessibility -
You can style
<strong>with CSS without losing semantic benefits - Use for warnings, alerts, critical deadlines, and key information
-
Consider using
<em>for emphasis and<strong>for importance - Valid to nest inside headings, paragraphs, lists, and other elements
Accessibility Benefits
-
Screen readers may use different voice characteristics (pitch,
volume, or inflection) when encountering
<strong> - Helps visually impaired users understand which content is most important
- Provides semantic structure that assistive technologies can interpret
- Better than CSS bold styling for accessibility purposes
- Supports better document navigation for screen reader users
Try it Yourself
Interactive Example
Here's a live example showing <strong> in
action:
This is regular text with normal importance.
Warning: This is a critical message that requires immediate attention!
Remember: Always validate your HTML before deploying to production.
Default CSS Settings
Most browsers will display the <strong> element
with the following default values:
Default CSS
Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
strong {
font-weight: bold;
}