HTML Free Codes<b>
Defines bold text without extra importance
Standard HTMLDefinition 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
The <b> tag is supported in all major browsers:
Global 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>