← Back to All Tags

<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.

The <strong> tag is a semantic element that indicates the text has strong importance, seriousness, or urgency. This is different from the <b> tag, which is purely stylistic.

Tip: Use <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.
Accessibility: Screen readers may use a different tone of voice to express the emphasis indicated by the <strong> tag, helping visually impaired users understand the importance of the content.

Browser Support

The <strong> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

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

strong {
  font-weight: bold;
}

Related Tags

  • <b>

    Defines bold text (stylistic)

  • <em>

    Defines emphasized text

  • <mark>

    Defines marked/highlighted text

  • <i>

    Defines italic text

  • <span>

    Defines a section in a document

  • <u>

    Defines underlined text