<b> Bring attention
Makes text stand out without adding importance, as with keywords. Bold by default.
<b> marks text that should stand out without being more important: keywords in a summary, product names in a review, the opening words of an article.
It is not deprecated. Use it only when nothing better fits, though. Important text should be <strong>, headings belong in h1 to h6, and bold that is purely visual comes from CSS font-weight.
The b element in the WHATWG standard (opens in a new tab) lists keywords, product names and lead sentences as proper uses. When the text really is important, use the strong element.
Syntax
<b>keyword</b>When to use it
The <b> element suits text that should catch the eye without carrying extra importance: the opening words of a news story, the names of products in a comparison review, the ingredients in a recipe summary, or the terms to learn on a revision sheet. Remove the bold in your head; if the sentence means the same, b is right. If the reader would now miss a warning, it should be strong.
Other options are worth checking. Text that is relevant to the current task, like a search match, is mark. A title for a section is a heading. Bold that is pure design, such as every price on a menu, is better done with a CSS class on the existing element.
The standard suggests adding a class to b that says why it is bold, such as class="lede" or class="product". That keeps your intent clear and lets you restyle one kind of keyword later without touching the others.
Live example
Edit the code and watch the preview.
<p>Mix the <b>flour</b>, <b>milk</b> and <b>eggs</b> in a large bowl.</p>More examples
News article lead-in
Newspapers often set the first words of a story in bold to draw the eye. They are not more important than the rest, so b with a descriptive class is a good fit.
<article>
<h2>Bakery opens second shop</h2>
<p><b class="lede">SPRINGFIELD -</b> Sunny Bakery opened its second shop on Main Street this morning, with a queue around the block before the doors opened.</p>
</article>Product names in a review
In a comparison review, product names are keywords the reader scans for. b makes them easy to find without claiming that they are more important than the rest of the text.
<p>We tested three pans. The <b class="product">Flip 200</b> heated evenly, the <b class="product">Chef Classic</b> was the lightest, and the <b class="product">Iron Max</b> kept heat the longest.</p>Tip: Importance gets strong, and titles get real headings.
Browser support
b has been in HTML since the beginning and works in every browser, shown with font-weight:bolder. HTML5 kept it but gave it a meaning ("bring attention to") instead of pure bold styling. It is not deprecated in the Living Standard.
Accessibility
Assistive technology gives b no special meaning, so screen reader users never notice the bold. Put anything they must know into the text itself. Instructions should not depend on visual styling alone, as the W3C note Understanding Sensory Characteristics (opens in a new tab) explains.
Common mistakes
Wrong
<b>Danger: high voltage</b>Right
<strong>Danger: high voltage</strong>A warning has strong importance. Mark it with strong.
Wrong
<b>Contact</b>
<p>Call us...</p>Right
<h2>Contact</h2>
<p>Call us...</p>A section title is a heading, so bold text will not do.
Frequently asked questions
Is the b tag deprecated in HTML5?
No. <b> is still valid in the HTML Living Standard; its meaning was redefined. Today it marks text you want to draw attention to without giving it extra importance, such as keywords in an abstract, product names in a review or the lead sentence of an article. Importance is the job of <strong>.
Should I use b or CSS font-weight for bold text?
It depends on why the text is bold. Purely visual bold, like a bold navigation menu or button label, belongs in CSS as font-weight:bold. Text that is conventionally set apart, such as keywords, can use <b>. The standard treats <b> as a last resort, for when strong, em, mark, a heading or any other element would not fit better. The Colors and Fonts lesson shows how to set font-weight in CSS.