🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEhtml

html Documentation

LOADING ENGINE...

<b>

AI & DATA SCIENCE // b-tag

The <b> element draws visual attention to text (bold) without implying it is more important than surrounding text.

Syntax

<b>Warning:</b> low battery.

Deep Dive Course

**`<b>`** is a purely presentational element in the HTML5 spec: it renders bold text but carries **no semantic weight** — screen readers announce it no differently than plain text. It's meant for cases like keywords in a summary, product names, or lead sentences where bold styling helps a sighted reader scan, but the text isn't more 'important' in a document-structure sense. If the content genuinely needs to convey importance or urgency, use `<strong>` instead.

1Understanding <b>

`<b>` is a purely presentational element in the HTML5 spec: it renders bold text but carries no semantic weight — screen readers announce it no differently than plain text. It's meant for cases like keywords in a summary, product names, or lead sentences where bold styling helps a sighted reader scan, but the text isn't more 'important' in a document-structure sense. If the content genuinely needs to convey importance or urgency, use <strong> instead.

💡

Ask yourself: 'if I removed the bold styling, would the meaning of the sentence change?' If yes, use <strong>. If it's purely visual/stylistic, <b> is correct.

editor.html
<p><b>Pro tip:</b> save your work often.</p>
localhost:3000

2Practical Example

Here is a real-world application of <b> showing how it is used in production HTML.

editor.html
<!-- Bolding keywords in a product listing, no added importance -->
<p><b>Wireless</b> mouse, <b>USB-C</b> charging, 2-year warranty.</p>
localhost:3000

3Best Practices

Follow these guidelines when working with <b>:

1. Use <b> for stylistic bold text with no added importance (e.g. keywords, product names)

2. Use <strong> instead when the text is genuinely important or urgent

3. Prefer CSS font-weight for purely visual bold styling unrelated to content semantics

⚠️

Tip: Ask yourself: 'if I removed the bold styling, would the meaning of the sentence change?' If yes, use <strong>. If it's purely visual/stylistic, <b> is correct.

editor.html
<p><b>Pro tip:</b> save your work often.</p>
localhost:3000

Examples

Example 01Basic Usage
<p><b>Pro tip:</b> save your work often.</p>
Example 02Advanced Example
<!-- Bolding keywords in a product listing, no added importance -->
<p><b>Wireless</b> mouse, <b>USB-C</b> charging, 2-year warranty.</p>

Best Practices

  • Use for stylistic bold text with no added importance (e.g. keywords, product names)
  • Use instead when the text is genuinely important or urgent
  • Prefer CSS font-weight for purely visual bold styling unrelated to content semantics

Interview Question

What's the semantic difference between <b> and <strong>, given they look identical by default?

Hint: Think about how a screen reader would announce each one.

Visually, both render as bold text by default. Semantically, <strong> tells assistive technology 'this content is important/urgent' and screen readers may change their tone or emphasis when announcing it. <b> carries no such meaning — it's a pure styling hook for bold text that has no added importance, like a keyword being highlighted in a summary.

Exercises

EasyPractice using <b> in a real scenario.
View Solution
<p><b>Pro tip:</b> save your work often.</p>

Frequently Asked Questions

What's the semantic difference between <b> and <strong>, given they look identical by default?

Visually, both render as bold text by default. Semantically, tells assistive technology 'this content is important/urgent' and screen readers may change their tone or emphasis when announcing it. carries no such meaning — it's a pure styling hook for bold text that has no added importance, like a keyword being highlighted in a summary.

Related Functions

strong-tagi-tagem-tag