The <b> Element
As defined in the HTML Living Standard, the <b> element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood.
In this recipe, the flour and sugar should be mixed first.
<p>In this recipe, the <b>flour</b> and <b>sugar</b> should be mixed first.</p>
View HTML Living Standard: The b element
Usage vs. Semantic Alternatives
The <b> element is often misused when other elements are more semantically appropriate:
<strong>: Use if the text has importance, seriousness, or urgency.<em>: Use for emphatic stress.<mark>: Use for text highlighted for relevance in a specific context.<h1>-<h6>: Use for headings.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Because most screen readers do not announce the presence of a <b> tag by default, you must ensure that the meaning of the sentence does not rely solely on the bold formatting. If the information is critical, consider using <strong> or descriptive text.
Best Practices
- Last Resort: The spec suggests using
<b>only when no other element (like<strong>or<h1>) is more appropriate. - Styling: While
<b>renders as bold by default, its purpose is not purely visual. For purely visual bolding of text that has no special meaning, use the CSSfont-weightproperty. - Classing: It is often helpful to add a class to the
<b>element (e.g.,<b class="keyword">) to provide more specific hooks for SMACSS Module rules.