06. b and strong Tags
Introduction
Section titled “Introduction”The <b> and <strong> tags both create bold text, but they have different semantic meanings. Understanding when to use each is important for creating accessible, semantic HTML that properly conveys meaning to both users and assistive technologies.
The b Tag
Section titled “The b Tag”The <b> tag is a presentational element that makes text bold without adding semantic meaning.
<p>This is <b>bold text</b> using the b tag.</p>When to Use b
Section titled “When to Use b”Use <b> for:
- Styling text bold without semantic importance
- Keywords in summaries
- Product names in reviews
- Drawing attention without emphasis
<p>Product: <b>SuperWidget</b> - $99.99</p>The strong Tag
Section titled “The strong Tag”The <strong> tag indicates that content is important or should be emphasized, and renders as bold.
<p>This is <strong>important text</strong> using the strong tag.</p>When to Use strong
Section titled “When to Use strong”Use <strong> for:
- Important content
- Critical warnings
- Key information
- Content that should be emphasized
<p><strong>Warning:</strong> Do not proceed without reading the instructions.</p>Key Differences
Section titled “Key Differences”Semantic Meaning
Section titled “Semantic Meaning”<b>: No semantic meaning, purely presentational<strong>: Indicates importance, semantic meaning
Accessibility
Section titled “Accessibility”<b>: Screen readers don’t emphasize it<strong>: Screen readers emphasize it
Default Styling
Section titled “Default Styling”Both render as bold, but serve different purposes.
Best Practices
Section titled “Best Practices”Prefer strong for Important Content
Section titled “Prefer strong for Important Content”<!-- Good: Semantic emphasis --><p><strong>Important:</strong> Please read this carefully.</p>
<!-- Avoid: Using b for importance --><p><b>Important:</b> Please read this carefully.</p>Use b for Styling Only
Section titled “Use b for Styling Only”<!-- Good: Styling without importance --><p>Product: <b>Widget Pro</b></p>