Learn how to use the <b> element for stylistic bold text and understand its semantic difference from <strong>.
What it is
The <b> element represents a span of text that is stylistically offset from the normal prose without conveying extra importance. It is often used for keywords, product names, or other spans where visual distinction is needed but semantic weight is not. The browser renders this text in bold by default.
It is crucial to distinguish <b> from <strong>. While both render as bold, <strong> indicates strong importance, seriousness, or urgency for its contents. Screen readers may announce <strong> with a different tone or emphasis, whereas <b> is generally treated as plain text with a visual style change only.
Why it matters
- Semantic Accuracy: Using the correct tag ensures assistive technologies interpret your content correctly.
- Visual Consistency: Provides a standard way to highlight text visually without implying hierarchy or urgency.
- CSS Independence: Allows you to separate presentation (bolding) from meaning (importance), making future design changes easier.
- SEO Clarity: Search engines can better understand the structure and intent of your content when semantics are precise.
Syntax or steps
To use the <b> element, wrap the specific text you want to appear bold within opening and closing tags. No attributes are required.
<b>text to be styled</b>Example
Consider a paragraph describing a software feature where you want to highlight the name of the tool versus emphasizing a warning.
<p>
Please note that <strong>all data will be deleted</strong> if you proceed.
This action affects the <b>AutoSave</b> feature in the settings menu.
</p>In this example:
<strong>wraps "all data will be deleted" because it conveys critical importance and urgency.<b>wraps "AutoSave" because it is simply the name of a feature being highlighted for visual clarity, not necessarily indicating danger or high priority.
Common mistakes
- Using
<b>for headings: Never use<b>to create headings. Use<h1>through<h6>instead, as they provide document structure. - Confusing with
<strong>: Do not use<b>when the text is actually important or urgent. If a screen reader user needs to know something is critical, use<strong>. - Nesting incorrectly: Avoid nesting
<b>inside<strong>or vice versa unless there is a very specific reason. Usually, one level of emphasis is sufficient. - Relying on it for styling: For purely decorative bolding (like a logo text), consider using CSS
font-weight: bold;instead of HTML elements to keep markup clean.
When to use it
Choose between <b> and <strong> based on whether the emphasis is semantic or purely visual.
| Element | Purpose | Screen Reader Behavior | Use Case Example |
|---|---|---|---|
<b> |
Stylistic offset | No special announcement | Keywords, product names, lead sentences |
<strong> |
Strong importance | Might increase pitch or volume | Warnings, errors, critical instructions |
Practice
Guided Exercise: Write a sentence about a recipe. Highlight the ingredient name using <b> and the safety warning using <strong>.
Expected Output: Add <b>salt</b> to taste, but do not exceed 5 grams per serving.
Challenge: Refactor a block of text where all bolding was done with <b>. Identify which instances should remain <b> and which should become <strong> based on context.
Quick check
Question: Should you use <b> to emphasize a security warning?
Answer: No. Use <strong> for warnings because they convey importance and urgency, which <b> does not semantically represent.
Summary
The <b> element is for visual bolding without semantic importance, while <strong> is for meaningful emphasis. Choosing the right tag improves accessibility and SEO by accurately conveying the intent of your content to both users and machines.