HTML Strong

The HTML <strong> element is used to indicate that a piece of text has strong importance, seriousness, or urgency. Browsers usually display <strong> text in bold, but the main purpose of this element is to provide meaning to the content.

It is useful for warnings, important instructions, key information, and other text that deserves special attention.

What Is HTML Strong?

The <strong> element tells the browser that the enclosed content is strongly important.

For example, <strong>Important</strong> marks the word “Important” as strongly important.

A simple example is:

For example, <p><strong>Warning:</strong> Do not close this page.</p>

The browser normally displays “Warning:” in bold.

HTML Strong Syntax

The basic syntax is:

<strong>Important Text</strong>

You can use <strong> inside paragraphs, headings, lists, and other suitable HTML elements.

For example, <p>Please <strong>read the instructions carefully</strong>.</p>

Here, the phrase “read the instructions carefully” is marked as strongly important.

Why Use the <strong> Element?

The <strong> element has semantic meaning. It tells browsers and assistive technologies that the content has strong importance.

For example, <p><strong>Note:</strong> You must complete all required fields.</p>

This is more meaningful than simply making text bold with CSS because HTML communicates the importance of the content, while CSS mainly controls its visual appearance.

HTML Strong vs Bold

HTML provides both <strong> and <b>, but they have different purposes.

Element	Purpose	Default Appearance
<strong>	Indicates strong importance	Bold
<b>	Draws attention without adding strong importance	Bold

For example:

<p><strong>Warning:</strong> This action cannot be undone.</p>

<p><b>Product Name</b></p>

Use <strong> when the text is genuinely important. Use <b> when you only want to draw visual attention without giving the text strong semantic importance.

Using Strong with CSS

You can use CSS to customize the appearance of <strong> elements.

For example:

<style>
  strong {
    color: red;
  }
</style>

<p><strong>Warning:</strong> Check your information before submitting.</p>

Here, HTML provides the meaning, while CSS changes the appearance.

You can also use a class when you want to style specific <strong> elements.

For example:

<p><strong class="warning">Warning:</strong> Your session has expired.</p>

.warning {
  color: red;
  font-weight: bold;
}

Using Strong in Lists

The <strong> element can also be used inside list items to highlight important terms.

<ul>
  <li><strong>HTML:</strong> Creates webpage structure.</li>
  <li><strong>CSS:</strong> Styles webpages.</li>
  <li><strong>JavaScript:</strong> Adds interactivity.</li>
</ul>

This is useful when you want to emphasize a keyword or label followed by an explanation.

Using Strong for Warnings and Notes

One of the most common uses of <strong> is highlighting warnings, instructions, and important information.

For example, <p><strong>Important:</strong> Save your work before closing the browser.</p>

Another example is <p><strong>Note:</strong> This feature requires JavaScript.</p>

These examples make it clear that the following information deserves the user’s attention.

Strong and Accessibility

Semantic HTML can help make web content easier to understand for users of assistive technologies.

When you use <strong>, you are communicating that the content has strong importance rather than simply making it visually bold.

For example:

<strong>Warning:</strong>

is semantically different from simply applying:

font-weight: bold;

with CSS.

This is why you should choose HTML elements based on the meaning of the content, not only how they look.

HTML Strong vs CSS Font Weight

You can make text bold using CSS:

<p class="important">Important information</p>

<style>
  .important {
    font-weight: bold;
  }
</style>

However, CSS only changes the presentation.

If the text itself has strong importance, <strong> is usually the more appropriate HTML element.

Best Practices for HTML Strong

Best Practice	Recommendation
Use semantic meaning	Use <strong> for genuinely important content
Avoid overuse	Do not mark large amounts of ordinary text as strong
Use CSS for appearance	Use CSS when you only want visual styling
Use <b> appropriately	Use <b> when attention is needed without strong importance
Keep content meaningful	Highlight information that actually deserves attention

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>HTML Strong Example</title>

  <style>
    .warning {
      color: red;
    }
  </style>
</head>

<body>

  <h1>HTML Strong</h1>

  <p>
    <strong class="warning">Warning:</strong>
    Please check your information before submitting.
  </p>

  <p>
    <strong>Important:</strong>
    Save your work regularly.
  </p>

</body>
</html>

In this example, <strong> identifies important information, while CSS changes the color of the warning.