Master HTML From Scratch

Clear, interactive, and structured HTML lessons designed for beginners.

Bold and Strong

Learn the difference between the <b> and <strong> elements and understand when to use each one.

Introduction

HTML provides two commonly used elements for displaying text with a bold appearance: <b> and <strong>.

Although both elements are commonly rendered with bold text by browsers, they have different meanings.

Remember: <b> is generally used to draw attention to text, while <strong> indicates that the text has strong importance.

The <b> Element

The <b> element is used to draw the reader's attention to text without implying extra importance or emphasis.

Syntax 

<b>Text</b>

Example 

<p>
    Learn <b>HTML</b> step-by-step.
</p>

Output

Learn HTML step-by-step.

The <strong> Element

The <strong> element indicates that its content has strong importance, seriousness, or urgency.

Syntax 

<strong>Important Text</strong>

Example 

<p>
    <strong>Important:</strong>
    Save your work before closing the application.
</p>

Output

Important: Save your work before closing the application.

<b> vs <strong>

Feature <b> <strong>
Main Purpose Draws attention to text. Indicates strong importance.
Semantic Meaning Does not normally add importance. Adds semantic importance.
Common Browser Appearance Bold text. Bold text.
Typical Usage Keywords, labels, names, visually prominent text. Warnings, important notices, critical text.

Examples of <b>

Keyword 
<p>
    Learn <b>HTML</b>.
</p>
Product Name 
<p>
    Product:
    <b>CIIT Course</b>
</p>
Label 
<p>
    Name:
    <b>Student</b>
</p>
Important Term 
<p>
    Topic:
    <b>HTML Elements</b>
</p>

Examples of <strong>

Warning 
<p>
    <strong>Warning:</strong>
    Do not share your password.
</p>
Important Instruction 
<p>
    <strong>Important:</strong>
    Submit the form before closing.
</p>
Urgent Information 
<p>
    <strong>Urgent:</strong>
    Contact support immediately.
</p>
Important Result 
<p>
    Result:
    <strong>Pass</strong>
</p>

Visual Comparison

Using <b>: This text is bold.

Using <strong>: This text is strongly important.

Both may look visually similar in a browser, but their semantic meanings are different.

Nesting <b> and <strong>

Formatting elements can be nested when the structure and meaning make sense. 

<p>

    This is
    <strong>
        <b>very important</b>
    </strong>

    information.

</p>

This is very important information.

Note: Do not add unnecessary nesting. Use the simplest structure that correctly communicates the intended meaning.

Using CSS Instead of <b>

CSS can make text visually bold without changing the semantic meaning of the HTML. 

<p class="custom-text">
    HTML Course
</p>

<style>

    .custom-text {
        font-weight: bold;
    }

</style>

HTML Course

This approach is useful when bold appearance is purely a visual design requirement.

Accessibility and Meaning

Semantic HTML helps browsers, assistive technologies, and other software understand the meaning of content.

<b>

Use when the text needs attention or visual distinction without expressing strong importance.

<strong>

Use when the content itself has strong importance, seriousness, or urgency.

Example 👀🤓 

<h2>
    Course Registration
</h2>

<p>
    Course:
    <b>.NET Full Stack Development</b>
</p>

<p>
    <strong>Important:</strong>
    Please complete your registration before the deadline.
</p>

Course Registration

Course: .NET Full Stack Development

Important: Please complete your registration before the deadline.

Common Mistakes

  • Using <strong> everywhere just because it appears bold.
  • Using <b> when the content actually carries strong semantic importance.
  • Using HTML elements only for visual styling when CSS would be more appropriate.
  • Adding unnecessary nested formatting elements.

Practice Exercise

  1. Create a paragraph with a bold keyword using <b>.
  2. Create a warning message using <strong>.
  3. Create a course title using <b>.
  4. Create an important instruction using <strong>.
  5. Compare both elements in the browser and understand their different purposes.

Summary

The <b> element draws attention to text without adding special semantic importance, while the <strong> element indicates strong importance. Both are commonly displayed as bold text, but <strong> carries semantic meaning.

← Previous: Text Formatting Next: Italic and Emphasis →