Suggest an edit

Improve this article

Refine the answer for “Difference between strong and b tags in HTML”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**`` and ``** both make text bold by default, but only `` tells the browser, and everything listening to it, that the text actually matters.

## Theory

### TL;DR

- `` = marker highlight on paper: changes how it looks, says nothing about why
- `` = starred email: changes how it looks AND flags it as important
- Screen readers stress `` content; they read `` flat, like any other text
- Both get `font-weight: bold` from user agent stylesheets, so visually they look identical
- Decision rule: meaningful emphasis → ``. Pure style → CSS `font-weight: bold`

### Quick example

```html
Regular text, then bold but no meaning.

Regular text, then important bold.

```

Open this in a browser with NVDA or VoiceOver and you hear the difference instantly. Visually? Identical.

### Key difference

`` is a presentational tag. It puts bold in the render tree and stops there. `` goes further: browsers map it to an importance role in the accessibility tree, which AT APIs like MSAA and IAccessible2 pick up. That is why screen readers announce `` content with stress or a prefix like "important", while `` gets nothing extra.

### When to use

- Product name or UI label where bold is a pure design choice → CSS `font-weight: bold`, or `` as a last resort
- Warning, deadline, or error message the reader must not miss → ``
- Legacy code that needs bold for appearance only → add a CSS class, avoid both tags
- Accessibility or SEO is a priority → always ``, never ``

### Comparison table

| Aspect | `` | `` |
|---|---|---|
| Default style | Bold | Bold |
| Semantics | None (presentational) | Importance |
| Screen readers | Reads flat | Announces with stress |
| SEO impact | Neutral | Signals keyword relevance |
| Accessibility tree | Not mapped | Mapped to importance role |
| When to use | Rare; visual-only labels | Warnings, key facts, articles |

### How the browser handles this

Both tags get `font-weight: bold` from the browser's built-in stylesheet, which is why they look the same without custom CSS. The split happens in the accessibility tree: `` gets an importance role that assistive technologies read from the OS-level accessibility API; `` stays in the render tree only. One CSS rule (`strong { font-weight: normal; }`) strips the visual bold from `` but leaves the semantic role intact. Screen readers still stress it.

### Common mistakes

**Using `` for warnings or critical text:**

```html

Warning: High voltage area. Do not enter.

Warning: High voltage area. Do not enter.
```

**Assuming `` always means bold styling:**

```css
/* This strips visual bold but NOT the semantics */
strong { font-weight: normal; }
```

If a custom theme resets `` visually, AT still flags it as important. Tie style to a CSS class, not to the tag itself.

**Nesting `` inside `` carelessly:**

```html
Critical: check this before deploy.
```

The outer `` applies its importance role to all content inside, including the `` part. The `` only adds a visual hook. This is valid HTML, but flattening it to one `` with CSS control is cleaner and clearer in intent.

### Real-world usage

- MDN Web Docs uses `` for warnings and deprecated API notices throughout its guides
- React docs wrap required prop names in `` to signal importance, not just styling
- WordPress Gutenberg defaults to `` when you press the bold button in the editor toolbar
- Bootstrap documentation recommends `` over `` in its typography section

### Follow-up questions

**Q:** Can CSS make `` and `` completely identical?
**A:** Visually, yes. But semantically, no. The accessibility tree still marks `` as important and screen readers still react to it, regardless of how it looks on screen.

**Q:** Does Google treat `` differently from `` for SEO?
**A:** Google has confirmed that `` carries weight as a keyword relevance signal. `` is treated as neutral styling. The difference matters for content with keywords you want to rank for.

**Q:** Is `` still valid in HTML5?
**A:** Yes. HTML5 keeps `` and redefines it as a tag for text that is "stylistically different" without conveying importance. It is valid, but WCAG 4.1.2 pushes toward semantic alternatives wherever meaning is involved.

**Q:** How does `` behave inside an `aria-hidden` container?
**A:** The semantic role gets suppressed and assistive technology skips the content entirely. If you place `` inside a container with `aria-hidden="true"`, screen readers will not announce it regardless of the tag.

## Examples

### Basic: visual vs semantic bold

```html
<!DOCTYPE html>
<html lang="en">
<body>
 Save your work often. Autosave is disabled by default.

Save your work often. Autosave is disabled by default.
 
</body>
</html>
```

`` here just makes the word stand out visually. `` tells the user, and every tool reading the page, that this is something to pay attention to.

### Intermediate: React component with semantic emphasis

```jsx
// OrderSummary.jsx
function OrderSummary({ productName, deadline }) {
 return (
 <article>
 <h2>Order Summary</h2>
 
 You selected {productName}.
 {/* Visual label only - no semantic weight needed */}
 
 
 Complete payment by {deadline} to avoid cancellation.
 {/* Deadline is important - screen reader stresses it */}
 
 </article>
 );
}
```

`` on the product name is a design choice. `` on the deadline is a signal: if a user navigates by screen reader, they should not miss that date.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts971 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.