Definition and Usage

The <strong> tag represents strong importance, seriousness, or urgency for its contents.

Features

  • Importance: The <strong> tag can be used to distinguish text that is truly important within a heading, caption, or paragraph from other content that may be more detailed, lighthearted, or routine.
  • Seriousness: The <strong> tag may also be used to indicate a serious tone, such as warnings or cautionary notes.
  • Urgency: The <strong> tag can highlight urgent information that users should notice or read before other parts of the document.

Usage Examples

Explore the following examples to understand proper usage of the <strong> tag.

Importance: Clearly emphasize important content in headings, captions, or paragraphs

In the example below, the photo's name in the caption is highlighted using the <strong> tag to distinguish it from the description text.

HTML 
<figcaption>
    Photo 1. <strong>Brooklyn Bridge</strong> – The iconic arches are clearly visible.
</figcaption>
Rendered Output

Most browsers render text within the <strong> tag in a bold font (font-weight).

Seriousness: Indicate serious warnings or cautionary messages

HTML 
<p><strong>Warning:</strong> Clicking the delete button will permanently remove your data.</p>
Rendered Output
HTML 
<p>On construction sites, <strong>always wear a safety helmet!</strong></p>
Rendered Output

Urgency: Highlight information users should notice before other parts of the document

HTML 
<p>Today's Memo:</p>
<ul>
    <li><strong>Turn off the gas</strong></li>
    <li>Take out the trash</li>
    <li>Run the washing machine</li>
</ul>
Rendered Output

Usage Notes

Do Not Use <strong> Just for Bold Styling

Most browsers render text inside the <strong> tag in a bold font (font-weight).

However, you should not use the <strong> tag solely to make text bold for visual styling. If you only want to apply bold styling, use CSS's font-weight property instead.

HTML 
<p><span style="font-weight:bold;">Dogs</span> are intelligent animals.</p>
Rendered Output

Difference Between <strong> and <b> Tags

One common source of confusion for developers is that different tags can produce identical visual results in browsers. The <strong> and <b> tags are a prime example. Both render text in bold by default.

While the visual effect is the same, the semantic meaning differs:

  • The <strong> tag is intended for text of strong importance.
  • The <b> tag is used purely to draw attention without conveying additional importance.

Difference Between <strong> and <em> Tags

In HTML4, the <strong> tag was defined as "more emphasis," whereas in HTML5, it indicates strong importance for its contents. This distinction is important. (Source: MDN - <strong>: The Strong Importance element#<em> vs. <strong> )

The <em> tag is used to emphasize (stress emphasis) content that is contextually more important than the surrounding text.

The <em> tag can change the meaning of a sentence depending on its placement within the sentence.
In contrast, the <strong> tag always indicates that the content is strongly important, regardless of where it appears in the sentence.

Technical Syntax Summary

Technical Syntax Summary of the strong tag
Permitted parents Any element that accepts phrasing content, or any element that accepts flow content.
Permitted content Phrasing content.
Implicit ARIA role strong
Permitted ARIA roles Any

Browser compatibility

Browser compatibility for the strong tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<strong> 1 12 1 4

Specifications

Specification for the strong tag
Specification
<strong> HTML Standard
#the-strong-element

References

See also