HTML <b> Tag for Drawing Attention to Text

The HTML <b> element draws attention to text without saying that the text has extra importance. Browsers normally display its contents in bold, but the element's purpose is semantic rather than simply "make this bold."

If text is genuinely important, use <strong>. If you only want a visual bold style, use CSS font-weight.

<p>Normal text and <b>attention-drawing text</b>.</p>

Rendered result:

Normal text and attention-drawing text.

Basic <b> Syntax Top ↑

The element has an opening <b> tag and a closing </b> tag.

<p>This area is normal text and <b>this text draws attention</b>.</p>

Use <b> when the text benefits from being visually offset but does not represent stronger importance, stress emphasis or highlighted relevance.

<b> vs <strong> Top ↑

<b> and <strong> often look the same because browsers commonly render both in bold. Their meanings are different.

• <b>: draws attention without adding special importance.
• <strong>: marks content with strong importance, seriousness or urgency.

<p>Search for the <b>HTML</b> keyword in the list.</p>
<p><strong>Warning:</strong> Save your work before continuing.</p>

Choose the element according to meaning, not according to which one happens to look bold in the browser. See the strong and emphasis tutorial for more examples.

Bold Text with CSS Top ↑

When there is no semantic reason for <b> or <strong> and you only want a visual style, use CSS.

<span class="bold-text">Bold text here</span>

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

A reusable class is normally preferable to repeating an inline style attribute. The existing SPAN tutorial explains the general-purpose inline container.

Styling the <b> Element Top ↑

The <b> element supports global attributes such as class, so CSS can change its appearance. Styling does not change the element's semantic meaning.

<style>
b.keyword {
  font-size: 1.2rem;
  color: green;
}
</style>

<p>Learn <b class="keyword">HTML</b> step by step.</p>

The original Plus2net demonstrations are preserved:

Uppercase and Lowercase Tag Names Top ↑

In HTML syntax, tag names are ASCII case-insensitive, so browsers can recognize forms such as <B>. Modern HTML source should nevertheless use consistent lowercase tag names for readability and maintainability.

<!-- Recommended style -->
<b>Bold-looking text</b>

Do not carry this rule into XML/XHTML syntax, where case rules differ.

Bold Text Is Not a Heading Top ↑

Do not use <b> merely to make text look like a heading. Use the appropriate HTML heading element from <h1> to <h6> when the text actually introduces a section.

<!-- Section heading -->
<h2>Installation</h2>

<!-- Attention within a sentence -->
<p>Select the <b>Advanced</b> tab.</p>

Elements such as <b> belong in the document body where phrasing content is allowed; they are not substitutes for page metadata such as the document <title> or meta description.

Common <b> Tag Mistakes Top ↑

Using <b> when the text is important Top ↑

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

Using <b> only for visual styling Top ↑

If the requirement is purely presentational, CSS font-weight is usually the clearer choice.

Using bold text instead of headings Top ↑

Visual size or weight does not create document structure. Use semantic heading elements for headings.

Writing inconsistent uppercase closing tags Top ↑

Although HTML tag names are case-insensitive, consistent lowercase markup is easier to read and avoids confusion when moving between HTML and XML-based syntaxes.

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: