<b> - The Bring Attention To Element

The <b> Element

Inline HTML 2.0

The bring attention to element draws attention to text for utilitarian purposes without conveying extra importance or emphasis. It’s typically rendered in bold.

Quick Example

HTML

<p>Product features: <b>wireless</b>, <b>waterproof</b>, and <b>lightweight</b>.</p>

Result ▶ Run

Syntax

<b>text to highlight</b>

The <b> element is for text that should be visually distinguished without semantic importance.

<b> vs <strong>

This is one of the most common sources of confusion in HTML:

<b>

<!-- Visual styling only, no semantic meaning -->
<p>Keywords: <b>blue</b>, <b>red</b>, <b>green</b></p>

Use <b> for keywords, product names, or text that needs visual distinction without importance.

<strong>

<!-- Indicates strong importance -->
<p><strong>Warning:</strong> This action cannot be undone.</p>

Use <strong> for text with serious importance or urgency.

Tip

Rule of thumb: If removing the bold styling would change the meaning, use <strong>. If it’s just visual styling, use <b>.

Common Use Cases

Keywords in Text

HTML

<p>Search results for: <b>HTML elements</b></p> <p>This article discusses <b>inline text</b> and <b>phrasing content</b>.</p>

Result ▶ Run

Product Names

HTML

<p>The new <b>iPhone 15 Pro</b> features an advanced camera system.</p>

Result ▶ Run

Lead-in Text

HTML

<p><b>New York</b> — The city announced new regulations today.</p> <p><b>Technology:</b> Innovation drives progress in the industry.</p>

Result ▶ Run

Article Lede

HTML

<article> <p><b>Scientists have discovered a new species</b> of deep-sea fish in the Pacific Ocean.</p> <p>The discovery was made during a research expedition...</p> </article>

Result ▶ Run

Summary Text

HTML

<details> <summary>Product Details</summary> <p><b>Material:</b> Stainless steel</p> <p><b>Dimensions:</b> 10cm x 15cm</p> <p><b>Weight:</b> 500g</p> </details>

Result ▶ Run

Not for Importance

Wrong

<!-- Don't use <b> for warnings -->
<p><b>Warning:</b> Do not mix with water.</p>

Right

<!-- Use <strong> for important warnings -->
<p><strong>Warning:</strong> Do not mix with water.</p>

Styling

The <b> element has default bold styling, but you can customize it:

HTML

<style> b { font-weight: 600; color: #2c3e50; } b.keyword { background: #ffffcc; padding: 2px 4px; border-radius: 3px; } </style> <p>Important terms: <b class="keyword">HTML</b>, <b class="keyword">CSS</b>, <b class="keyword">JavaScript</b></p>

Result ▶ Run

Accessibility

Semantic Alternatives First

Consider more semantic elements before using <b>:

<!-- Instead of this -->
<p>Published: <b>December 11, 2024</b></p>

<!-- Consider this -->
<p>Published: <time datetime="2024-12-11">December 11, 2024</time></p>

Screen Readers

Screen readers typically don’t announce <b> differently from regular text. The bold styling is purely visual.

Don’t Rely on Visual Styling Alone

If the information is important, use semantic elements:

Poor Accessibility

<p><b>Error:</b> Invalid input</p>

Better Accessibility

<p><strong>Error:</strong> Invalid input</p>
<!-- or -->
<p role="alert"><strong>Error:</strong> Invalid input</p>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <b> element has been supported since the earliest browsers.

Related Elements

For text with strong importance or urgency. Learn more →

For stress emphasis (typically italic). Learn more →

For highlighted or marked text. Learn more →

Specifications

• WHATWG HTML Living Standard
• MDN Web Docs