👀 Live Preview
Bold text rendered by the browser:
This sentence contains bold text for emphasis.
HTML <b> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll confidently use the bold element for stylistic emphasis in real-world HTML projects.
Core Syntax
Wrap text in <b> for bold appearance without semantic urgency.
b vs strong
Know when stylistic bold differs from semantically important text.
Global Attributes
Style with class, id, and inline style.
Common Use Cases
Highlight keywords, product names, and lead-in words in prose.
CSS Alternatives
Use font-weight when bold is purely decorative.
Accessibility
Choose the right element so assistive tech conveys the right meaning.
Fundamentals
What Is the <b> Tag?
The bold element (<b>) represents a span of text to which stylistic attention is drawn, without implying greater importance. Browsers render it with bold font weight by default.
Stylistic, not urgent
Use <b> for keywords, product names, or summary terms where you want visual weight but not semantic urgency. Reach for <strong> when the content is genuinely important.
The element is inline, so it flows inside paragraphs, headings, and lists. Default user-agent styles apply font-weight: bold automatically.
Foundation
📝 Syntax
Wrap the text you want bold between opening and closing <b> tags:
syntax.html
<b>Your Bold Text Here</b><b>is an inline element—it nests inside paragraphs, lists, and headings.- Self-closing syntax (
<b />) is not valid in HTML. - Combine with global attributes or CSS for color and other styling.
Cheat Sheet
⚡ Quick Reference
| Use Case | Code Snippet | Result |
|---|---|---|
| Basic bold | <b>Bold</b> | Bold |
| In a sentence | Welcome to <b>CodeToFun</b> | Welcome to CodeToFun |
| Colored bold | <b style="color:#dc2626">Red</b> | Red |
| Important content | <strong>Warning</strong> | Warning |
| CSS only | font-weight: bold | Purely decorative styling |
| Tag-specific attrs | None | Global attributes only |
Comparison
⚖️ <b> vs <strong>
Both render bold by default, but they carry different meaning for accessibility and semantics:
| Element | Meaning | Best for |
|---|---|---|
<b> | Stylistic attention | Keywords, product names, visually distinct terms |
<strong> | Strong importance | Warnings, critical instructions, urgent content |
| Appearance | Both bold by default | Default browser styles look the same |
| Accessibility | Different roles | strong adds emphasis; b does not imply urgency |
b-vs-strong.html
<p>Our new <b>Pro Plan</b> includes premium features.</p>
<p><strong>Warning:</strong> Do not share your password.</p>Reference
🧰 Attributes
The <b> tag has no tag-specific attributes. Combine it with global attributes or CSS for additional styling:
class / id GlobalHook for CSS selectors and JavaScript targeting in design systems.
<b class="keyword">HTML</b>style InlineApply color, size, or weight directly on the element for one-off styling.
style="color: #dc2626;"lang OptionalHints the language of the bold text when it differs from the page language.
lang="fr"CSS alternative StylingUse font-weight: bold when bold is purely decorative and not part of content meaning.
.highlight { font-weight: bold; } attribute.html
<b style="color: #dc2626;">Bold and Red Text</b>Hands-On
Examples Gallery
Four bold-text patterns with copy-ready code, live previews, and hands-on practice.
Basic Bold Text
The simplest form: wrap words in <b> to make them bold.
basic-b.html
<p>Welcome to <b>CodeToFun</b> tutorials.</p>Bold with Inline Style
Combine <b> with the style attribute for bold text in a custom color.
styled-b.html
<b style="color: #dc2626;">Bold and Red Text</b>📚 Common Use Cases
Here are the most frequent ways developers use the <b> tag.
Highlight Key Terms
Draw attention to important words inside a paragraph—useful in tutorials, summaries, and documentation.
highlight-keywords.html
<p>
In this document, the <b>HTML</b> language is used to build web pages.
The <b><b></b> tag helps highlight <b>important words</b> or <b>concepts</b>.
</p>Bold Inside a Heading
Emphasize one word inside a heading. Note: headings are already bold by default—use <b> here only when you need extra visual weight on a specific word.
heading-b.html
<h2><b>Important</b> Announcement</h2>A11y
♿ Accessibility
Choose the right element for the meaning you intend:
- Use <strong> for content that is urgently important or carries semantic weight
- Use <b> for stylistic highlighting where urgency is not implied
- Don’t overuse bold — too much bold text reduces scannability
- Prefer CSS when bold is purely decorative and not part of content meaning
🧠 How <b> Works
1
Author wraps text in <b>
Mark keywords or lead-in words that should stand out visually.
Markup
2
Browser applies bold weight
Default user-agent styles set font-weight: bold on <b> content.
Rendering
3
CSS can override appearance
Target b or a class to change color, size, or weight without changing HTML structure.
Styling
=
Scannable, styled text
Readers spot key terms quickly while assistive tech does not treat them as urgently important.
Compatibility
Universal Browser Support
The <b> tag is supported in every browser, including all modern browsers and Internet Explorer.
Baseline · Since HTML
Works everywhere your users read
From legacy IE to the latest mobile browsers — the bold element is one of the oldest and most universally supported HTML tags.
100% Universal support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer All versions · Legacy environments
Full supportOpera All modern versions
Full support<b> tag 100% supported
Bottom line: Ship bold text markup with confidence. The <b> element works in every production environment today.
Wrap Up
Conclusion
The <b> tag is a simple, universally supported way to make text bold for stylistic emphasis. Use it for keywords and visually distinct terms, reach for <strong> when importance matters, and avoid overusing bold so your content stays easy to scan.
Pro Tips
💡 Best Practices
✅ Do
- Use
<b>for stylistic emphasis on keywords or product names - Use
<strong>when content is genuinely important or urgent - Keep bold usage sparing for better readability
- Style with
classand CSS for consistent design systems
❌ Don’t
- Use
<b>for warnings that need semantic urgency - Bold entire paragraphs—it reduces visual hierarchy
- Replace headings with bold paragraphs
- Assume
<b>and<strong>are interchangeable
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <b>
Bookmark these before you ship — they’ll keep your bold text semantic and scannable.
6
Core concepts 01
Stylistic Bold
<b> makes text bold without semantic urgency—ideal for keywords and product names.
02
b vs strong
<strong> is for genuinely important content; <b> is stylistic only.
03
No Tag Attributes
No tag-specific attributes—use global class and style instead.
04
Common Uses
Keywords, product names, lead-in words, and summary terms in running text.
Patterns 05
CSS Alternative
font-weight: bold works for purely decorative bold without an HTML hook.
06
Universal Support
Supported in every browser including Internet Explorer—no polyfills needed.
Compatibility❓ Frequently Asked Questions
The
<b> element draws stylistic attention to text by making it bold, without implying extra importance. Use it for keywords, product names, or summary terms.Both look bold by default.
<b> is stylistic. <strong> conveys strong importance and carries semantic weight for assistive technologies.Use
<b> when bold styling is part of the content’s meaning. Use CSS font-weight for purely visual design that does not need an HTML semantic hook.No. Use global attributes like
class, id, and style, or apply CSS to style bold text.Yes. The
<b> element has universal support in all browsers, including Internet Explorer.Practice Bold Text
Open the Try It editor and experiment with the b tag, inline styles, and keyword highlighting.
About the author
6 people found this page helpful