<b>
Defines bold text without extra importance
Standard HTMLQuick Answer
What is the <b> tag?
The <b> tag makes text bold for visual styling without conveying extra importance or emphasis. For semantic emphasis, use <strong> (important) or <em> (emphasis) instead. The <b> tag is appropriate for keywords, product names, or stylistic bold text where semantic meaning isn't needed.
Definition and Usage
The <b> element specifies bold text without any
extra importance. It's a stylistic element used to draw attention
to text without conveying additional semantic meaning.
The <b> tag should be used as a last resort
when no other tag is more appropriate. Use
<strong> for strong importance,
<em> for emphasized text, and
<mark> for highlighted text.
<b> tag should be used for styling purposes
only, without conveying semantic meaning.
<b> tag is
purely presentational. Use <strong> when you
want to indicate importance, urgency, or seriousness.
Browser support and standards
Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.
Read the MDN element referenceGlobal Attributes
The <b> tag supports all HTML global attributes
such as class, id, style,
etc.
Examples
Basic Bold Text
Simple use of the <b> tag:
Example
<p>This is <b>bold text</b> in a paragraph.</p>Bold vs Strong
Understanding the difference between <b> and
<strong>:
Example
<!-- Stylistic boldness (no semantic meaning) -->
<p>The <b>first step</b> is to login.</p>
<!-- Strong importance (semantic meaning) -->
<p><strong>Warning:</strong> Do not share your password!</p>Bold Text with CSS Styling
Combining <b> with custom CSS:
Example
<style>
.highlight {
color: #0066cc;
font-size: 1.1em;
}
</style>
<p>This is <b class="highlight">bold and styled</b> text.</p>Bold in Headings
Using bold text within headings:
Example
<h2>Product Features: <b>New and Improved</b></h2>
<h3>Available in <b>Three Colors</b></h3>Bold Keywords
Making keywords stand out in text:
Example
<p
>
Our product is <b>affordable</b>, <b>reliable</b>,
and <b>easy to use</b>.
</p
>Bold Text in Lists
Using <b> in list items:
Example
<ul>
<li><b>Step 1:</b> Create an account</li>
<li><b>Step 2:</b> Verify your email</li>
<li><b>Step 3:</b> Start using the service</li>
</ul>Product Names and Terms
Highlighting product names without semantic importance:
Example
<p
>
The <b>iPhone 15 Pro</b> features an advanced camera system.
Compare it with the <b>iPhone 15</b> to see the difference.
</p
>Combined Text Formatting
Using <b> with other formatting tags:
Example
<p
>
This text is <b>bold</b>, this is <i>italic</i>,
and this is <b
><i>bold and italic</i></b
>.
</p
>Try it Yourself
Interactive Example
See how bold text appears:
This is normal text, this is bold text, and this is normal text again.
Comparison: <b>tag vs <strong>tag
Best Practices
-
Use
<strong>for importance: When the text has strong importance, use<strong>instead of<b> -
Use
<em>for emphasis: When emphasizing text, use<em>rather than<b>or<i> -
Use
<mark>for highlighting: For marked or highlighted text, use<mark> - Semantic HTML: Prefer semantic tags over purely presentational ones when possible
-
Accessibility: Screen readers don't give
special treatment to
<b>tags, unlike<strong> -
CSS alternative: Consider using CSS
font-weight: bold;for purely visual styling - Avoid overuse: Too much bold text reduces its effectiveness and impacts readability
- Valid use cases: Product names, keywords in a document abstract, lead sentence in an article
<b> vs <strong>
Understanding when to use each tag:
| Tag | Purpose | Example Use Case |
|---|---|---|
| <b> | Stylistic boldness without semantic meaning | Product names, keywords, introductory words in a list |
| <strong> | Strong importance, seriousness, or urgency | Warnings, important notices, critical information |
<strong> carries semantic meaning
that's important for accessibility and SEO.
CSS Styling
You can style the <b> tag with CSS:
Example
<style>
b {
color: #0066cc;
font-weight: 700;
text-transform: uppercase;
}
b.important {
background-color: yellow;
padding: 2px 4px;
}
</style>
<p>This is <b>styled bold text</b>.</p>
<p>This is <b class="important">highlighted bold</b>.</p>