- The Strong Importance Element

The `` Element

Inline HTML 2.0

The strong importance element indicates that its contents have strong importance, seriousness, or urgency. It’s typically rendered in bold but represents semantic importance, not just visual styling.

Quick Example

<p><strong>Warning:</strong> This action cannot be undone.</p>
<p><strong>Important:</strong> Please read all instructions carefully.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p><strong>Warning:</strong> This action cannot be undone.</p>
<p><strong>Important:</strong> Please read all instructions carefully.</p>

Syntax

<strong>important text</strong>

The  element marks text that has strong importance, seriousness, or urgency.

`` vs ``

This is one of the most important distinctions in HTML:

<!-- Strong importance/urgency -->
<p><strong>Warning:</strong> Do not mix with water.</p>
<p><strong>Critical:</strong> Save your work now.</p>

Use  for serious importance or urgency.

<!-- Visual styling, no semantic importance -->
<p>Keywords: <b>HTML</b>, <b>CSS</b>, <b>JavaScript</b></p>
<p>Product: <b>Premium Widget</b></p>

Use  for visual distinction without importance.

Common Use Cases

Warnings and Alerts

<p><strong>Warning:</strong> High voltage. Keep away.</p>
<p><strong>Alert:</strong> Your session will expire in 5 minutes.</p>
<p><strong>Danger:</strong> Do not enter without protective equipment.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p><strong>Warning:</strong> High voltage. Keep away.</p>
<p><strong>Alert:</strong> Your session will expire in 5 minutes.</p>
<p><strong>Danger:</strong> Do not enter without protective equipment.</p>

Important Instructions

<p><strong>Important:</strong> Read all instructions before beginning.</p>
<p><strong>Note:</strong> This process cannot be reversed.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p><strong>Important:</strong> Read all instructions before beginning.</p>
<p><strong>Note:</strong> This process cannot be reversed.</p>

Critical Information

<p>Deadline: <strong>December 31, 2024</strong></p>
<p>Your account balance is <strong>overdue</strong>.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Deadline: <strong>December 31, 2024</strong></p>
<p>Your account balance is <strong>overdue</strong>.</p>

Required Fields

<form>
<label>
  Email <strong>*</strong>
  <input type="email" required>
</label>
<label>
  Password <strong>*</strong>
  <input type="password" required>
</label>
<p><strong>*</strong> Required fields</p>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label>
  Email <strong>*</strong>
  <input type="email" required>
</label>
<label>
  Password <strong>*</strong>
  <input type="password" required>
</label>
<p><strong>*</strong> Required fields</p>
</form>

Error Messages

<p><strong>Error:</strong> Invalid email address.</p>
<p><strong>Failed:</strong> Unable to connect to server.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p><strong>Error:</strong> Invalid email address.</p>
<p><strong>Failed:</strong> Unable to connect to server.</p>

Priority Levels

<ul>
<li><strong>High Priority:</strong> Fix security vulnerability</li>
<li>Medium Priority: Update documentation</li>
<li>Low Priority: Refactor old code</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<ul>
<li><strong>High Priority:</strong> Fix security vulnerability</li>
<li>Medium Priority: Update documentation</li>
<li>Low Priority: Refactor old code</li>
</ul>

Nesting for Increased Importance

Nested  elements indicate increasing importance:

<p><strong>Warning: <strong>Extremely</strong> dangerous!</strong></p>
<p>This is important. <strong>This is very important. <strong>This is critically important!</strong></strong></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p><strong>Warning: <strong>Extremely</strong> dangerous!</strong></p>
<p>This is important. <strong>This is very important. <strong>This is critically important!</strong></strong></p>

Real-World Examples

Safety Notice

<div class="safety-notice">
<h3>Safety Information</h3>
<p><strong>WARNING:</strong> This product contains chemicals known to cause cancer and birth defects.</p>
<p><strong>Keep out of reach of children.</strong></p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="safety-notice">
<h3>Safety Information</h3>
<p><strong>WARNING:</strong> This product contains chemicals known to cause cancer and birth defects.</p>
<p><strong>Keep out of reach of children.</strong></p>
</div>

Terms of Service

<article>
<h3>Terms of Service</h3>
<p><strong>By using this service, you agree to our terms.</strong></p>
<p>Section 1: <strong>All sales are final.</strong> No refunds will be issued.</p>
<p>Section 2: <strong>User accounts may be terminated</strong> for violations.</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h3>Terms of Service</h3>
<p><strong>By using this service, you agree to our terms.</strong></p>
<p>Section 1: <strong>All sales are final.</strong> No refunds will be issued.</p>
<p>Section 2: <strong>User accounts may be terminated</strong> for violations.</p>
</article>

Medical Information

<div class="medical-info">
<h4>Medication Instructions</h4>
<p><strong>Do not exceed recommended dosage.</strong></p>
<p>Take with food. <strong>Do not take on an empty stomach.</strong></p>
<p><strong>Contact your doctor immediately</strong> if you experience side effects.</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="medical-info">
<h4>Medication Instructions</h4>
<p><strong>Do not exceed recommended dosage.</strong></p>
<p>Take with food. <strong>Do not take on an empty stomach.</strong></p>
<p><strong>Contact your doctor immediately</strong> if you experience side effects.</p>
</div>

Call to Action

<div class="cta">
<p>Limited time offer!</p>
<p><strong>Act now to save 50%!</strong></p>
<p><strong>Offer expires in 24 hours.</strong></p>
<button>Claim Your Discount</button>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="cta">
<p>Limited time offer!</p>
<p><strong>Act now to save 50%!</strong></p>
<p><strong>Offer expires in 24 hours.</strong></p>
<button>Claim Your Discount</button>
</div>

In Headings

<h2><strong>Critical Update:</strong> Security Patch Required</h2>
<h3><strong>Action Required:</strong> Verify Your Account</h3>

Result

Interactive code playground requires JavaScript. Here's the code:

<h2><strong>Critical Update:</strong> Security Patch Required</h2>
<h3><strong>Action Required:</strong> Verify Your Account</h3>

Styling

Customize strong text appearance:

<style>
strong {
  font-weight: 700;
  color: #d73a49;
}
.warning strong {
  background: #fff3cd;
  padding: 2px 6px;
  border-left: 3px solid #ffc107;
}
</style>

<p class="warning">
<strong>Caution:</strong> Proceeding will delete all data.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
strong {
  font-weight: 700;
  color: #d73a49;
}
.warning strong {
  background: #fff3cd;
  padding: 2px 6px;
  border-left: 3px solid #ffc107;
}
</style>

<p class="warning">
<strong>Caution:</strong> Proceeding will delete all data.
</p>

Alert Boxes

<style>
.alert {
  padding: 12px;
  margin: 10px 0;
  border-radius: 4px;
}
.alert-danger {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}
.alert-warning {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  color: #856404;
}
</style>

<div class="alert alert-danger">
<strong>Error!</strong> Unable to process your request.
</div>

<div class="alert alert-warning">
<strong>Warning:</strong> Your password will expire soon.
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.alert {
  padding: 12px;
  margin: 10px 0;
  border-radius: 4px;
}
.alert-danger {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}
.alert-warning {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  color: #856404;
}
</style>

<div class="alert alert-danger">
<strong>Error!</strong> Unable to process your request.
</div>

<div class="alert alert-warning">
<strong>Warning:</strong> Your password will expire soon.
</div>

When NOT to Use ``

<!-- No actual importance -->
<p><strong>Product Features</strong></p>

<p><b>Product Features</b></p>
<!-- or -->
<h3>Product Features</h3>

Don’t Use for Emphasis

Wrong
Right

<p>I <strong>really</strong> like this.</p>

<p>I <em>really</em> like this.</p>

Semantic Importance Elements

Element	Use Case	Example
`<strong>`	Strong importance/urgency	`<strong>Warning:</strong>`
`<em>`	Stress emphasis	`I <em>really</em> mean it`
`<b>`	Keywords (no importance)	`<b>Product name</b>`
`<mark>`	Highlighted/relevant	`<mark>search term</mark>`

Accessibility

Many screen readers emphasize  content with increased volume or different voice, helping convey importance to users.

Use Appropriately

Don’t overuse - too much “strong” importance dilutes the effect:

Overused
Better

<p><strong>This</strong> is <strong>very</strong> <strong>important</strong> information.</p>

<p><strong>This is very important information.</strong></p>

Combine with ARIA

For critical alerts:

<div role="alert">
  <strong>Error:</strong> Your session has expired.
</div>

With Icons

<p>⚠️ <strong>Warning:</strong> Unsaved changes will be lost.</p>
<p>❌ <strong>Error:</strong> Connection failed.</p>
<p>✓ <strong>Success:</strong> Changes saved.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>⚠️ <strong>Warning:</strong> Unsaved changes will be lost.</p>
<p>❌ <strong>Error:</strong> Connection failed.</p>
<p>✓ <strong>Success:</strong> Changes saved.</p>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The  element has been supported since the earliest browsers.

For keywords without semantic importance. Learn more →

For stress emphasis. Learn more →

For highlighted or marked text. Learn more →

Specifications
Section titled “Specifications”

WHATWG HTML Living Standard

MDN Web Docs

Previous
 - The Generic Inline Container Next
 - The Subscript Element

<strong> - The Strong Importance Element

The `<strong>` Element

Quick Example

Syntax

`<strong>` vs `<b>`

Common Use Cases

Warnings and Alerts

Important Instructions

Critical Information

Required Fields

Error Messages

Priority Levels

Nesting for Increased Importance

Real-World Examples

Safety Notice

Terms of Service

Medical Information

Call to Action

In Headings

Styling

Alert Boxes

When NOT to Use `<strong>`

Don’t Use Just for Bold Styling

Don’t Use for Emphasis

Semantic Importance Elements

Accessibility

Use Appropriately

Combine with ARIA

With Icons

Browser Support

Specifications

<strong> - The Strong Importance Element

The <strong> Element

Quick Example

Syntax

<strong> vs <b>

Common Use Cases

Warnings and Alerts

Important Instructions

Critical Information

Required Fields

Error Messages

Priority Levels

Nesting for Increased Importance

Real-World Examples

Safety Notice

Terms of Service

Medical Information

Call to Action

In Headings

Styling

Alert Boxes

When NOT to Use <strong>

Don’t Use Just for Bold Styling

Don’t Use for Emphasis

Semantic Importance Elements

Accessibility

Screen Reader Behavior

Use Appropriately

Combine with ARIA

With Icons

Browser Support

Related Elements

Specifications

The `<strong>` Element

`<strong>` vs `<b>`

When NOT to Use `<strong>`