HTML b Tag
The HTML `<b>` tag is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This is typically styled by browsers as bold text.
Basic Syntax
html
<p>This is a paragraph with some <b>bolded text</b> for emphasis.</p>
Semantic Meaning in HTML5
According to the HTML5 specification, the<b> element should be used as a last resort when no other tag is more appropriate. The spec states that headings should use <h1> to <h6>, emphasized text should use <em>, important text should use <strong>, and marked/highlighted text should use <mark>. The
<b> tag now 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. Examples include:
- Keywords in a document abstract.
- Product names in a review.
- Actionable words in software instructions.
- Article ledes.
<b> vs. <strong>
This is a common point of confusion:
<b> (Bring Attention To): Used for stylistically offsetting text without implying importance. It's more about visual presentation to catch the eye. s
<strong> (Strong Importance): Used to indicate that the text has strong importance, seriousness, or urgency. Screen readers might use a different tone of voice for <strong> elements.
While both tags often result in bold text by default, their semantic meanings are different. Prefer <strong> when you want to emphasize the importance of text.
<b> vs. <em>
- <em> (Emphasis): Used to indicate stress emphasis on its contents, which often changes the meaning of the sentence. Browsers typically render this as italic text.
- Example: "You must complete this task by Friday."
Styling
While<b> typically renders as bold, you should not rely on it for styling. If you simply want to make text bold for presentational reasons without any specific semantic meaning, use the CSS font-weight: bold; property on a <span> or other appropriate element.
html
<p>This text has a <span style="font-weight: bold;">styled bold part</span>.</p>
When to Use <b>
When you want to draw attention to text without implying it's more important.
If none of the other semantic text-level elements (<strong>, <em>, <mark>, <cite>, <dfn>, etc.) are appropriate.
Conclusion
The<b> tag has a specific, albeit nuanced, semantic role in HTML5 for drawing attention to text without adding importance. Understand its distinction from <strong> and <em>, and always consider if a more semantically appropriate element exists before resorting to <b>. For purely visual styling, CSS is the preferred method.