<b>

  • Revision slug: HTML/Element/b
  • Revision title: b
  • Revision id: 61175
  • Created:
  • Creator: avsaro
  • Is current revision? No
  • Comment fix typo; 1 words added, 1 words removed

Revision Content

Summary

The HTML B Element (<b>) represents a span of text stylistically different from normal text, without a conveying any special importance or relevance. It is typically used for keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced. Another example of its use is to mark the lead sentence of each paragraph of an article.

Usage notes:

  • Do not confuse the <b> element with the {{ HTMLElement("strong") }}, {{ HTMLElement("em") }}, or {{ HTMLElement("mark") }} elements. The {{ HTMLElement("strong") }} element represents text of certain importance, {{ HTMLElement("em") }} puts some emphasis on the text and the {{ HTMLElement("mark") }} element represents text of certain relevance. The <b> element doesn't convey such special semantic information; use it only when no others fit.
  • Similarly, do not mark titles and headings using the <b> element. For this purpose, use the {{ HTMLElement("h1") }} to {{ HTMLElement("h6") }} tags. Further, stylesheets can change the default style of these elements, with the result that they are not necessarily displayed in bold.
  • It is a good practice to use the class attribute on the <b> in order to convey additional semantic information (for example <b class="lede"> for the first sentence in a paragraph). This eases the development of several stylings of a web document, without the need to change its HTML code.
  • Historically, the <b> element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of the <b> element has been changed.
  • If there is no semantic purpose on using the <b> element, using css property font-weight with bold value would be a better choice for making text bold.

Usage Context

Content categories Flow content, phrasing content
Permitted content Phrasing content
Tag omission None, both the start tag and the end tag are mandatory
Permitted parent elements Any element that accepts phrasing content
Normative document HTML5, section 4.6.16 (HTML4.01, section 15.2.1)

Attributes

Like all other HTML elements, this element has the global attributes.

DOM Interface

This element implements the HTMLElement interface.

Implementation note: Up to Gecko 1.9.2 inclusive, Firefox implements the HTMLSpanElement interface for this element.

Example

<p>
  This article describes several <b>text-level</b> elements. It explains their usage in an <b>HTML</b> document.   
</p>
Keywords are displayed with the default style of the <b> element, likely in bold.

Result

This article describes several text-level elements. It explains their usage in an HTML document.

Keywords are displayed with the default style of the <b> element, likely in bold.

See also

  • Others elements conveying text-level semantics: {{ HTMLElement("a") }}, {{ HTMLElement("em") }}, {{ HTMLElement("strong") }}, {{ HTMLElement("small") }}, {{ HTMLElement("cite") }}, {{ HTMLElement("q") }}, {{ HTMLElement("dfn") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("time") }}, {{ HTMLElement("code") }}, {{ HTMLElement("var") }}, {{ HTMLElement("samp") }}, {{ HTMLElement("kbd") }}, {{ HTMLElement("sub") }}, {{ HTMLElement("sup") }}, {{ HTMLElement("i") }}, {{ HTMLElement("mark") }}, {{ HTMLElement("ruby") }}, {{ HTMLElement("rp") }}, {{ HTMLElement("rt") }}, {{ HTMLElement("bdo") }}, {{ HTMLElement("span") }}, {{ HTMLElement("br") }}, {{ HTMLElement("wbr") }}.
  • Using <b> and <i> elements (W3C)

{{ HTML:Element_Navigation() }}

{{ languages( { "de": "de/HTML/Element/b", "pl": "pl/HTML/Element/b", "nl": "nl/HTML/Element/b" } ) }}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The HTML B Element (<code>&lt;b&gt;</code>) represents a span of text stylistically different from normal text, without a conveying any special importance or relevance. It is typically used for keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced. Another example of its use is to mark the lead sentence of each paragraph of an article.</p>
<div class="note"> <p><strong>Usage notes:<br> </strong></p> <ul> <li>Do not confuse the <code>&lt;b&gt;</code> element with the {{ HTMLElement("strong") }}, {{ HTMLElement("em") }}, or {{ HTMLElement("mark") }} elements. The {{ HTMLElement("strong") }} element represents text of certain <em>importance</em>, {{ HTMLElement("em") }} puts some emphasis on the text and the {{ HTMLElement("mark") }} element represents text of certain <em>relevance</em>. The <code>&lt;b&gt;</code> element doesn't convey such special semantic information; use it only when no others fit.</li> <li>Similarly, do not mark titles and headings using the <code>&lt;b&gt;</code> element. For this purpose, use the {{ HTMLElement("h1") }} to {{ HTMLElement("h6") }} tags. Further, stylesheets can change the default style of these elements, with the result that they are not <em>necessaril</em><em>y</em><em> </em>displayed in bold.</li> <li>It is a good practice to use the <strong>class</strong> attribute on the <code>&lt;b&gt;</code> in order to convey additional semantic information (for example <code>&lt;b class="lede"&gt;</code> for the first sentence in a paragraph). This eases the development of several stylings of a web document, without the need to change its HTML code.</li> <li>Historically, the <code>&lt;b&gt;</code> element was meant to make text boldface. Styling information has been deprecated since HTML4, so the meaning of the <code>&lt;b&gt;</code> element has been changed.</li> <li>If there is no semantic purpose on using the &lt;b&gt; element, using css property <a href="/en/CSS/font-weight" title="font-weight">font-weight</a> with bold value would be a better choice for making text bold.</li> </ul>
</div>
<h2 id="Usage_Context">Usage Context</h2>
<table class="fullwidth-table"> <tbody> <tr> <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Content categories</a></td> <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">Flow content</a>, <a href="/en/HTML/Content_categories#phrasing_content" title="en/HTML/Content categories#phrasing content">phrasing content</a></td> </tr> <tr> <td>Permitted content</td> <td>Phrasing content</td> </tr> <tr> <td>Tag omission</td> <td>None, both the <span title="syntax-start-tag">start tag</span> and the <span title="syntax-end-tag">end tag</span> are mandatory</td> </tr> <tr> <td>Permitted parent elements</td> <td>Any element that accepts phrasing content</td> </tr> <tr> <td>Normative document</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element">HTML5, section 4.6.16</a> (<a class="external" href="http://www.w3.org/TR/REC-html40/present/graphics.html#edef-B" title="http://www.w3.org/TR/REC-html40/present/graphics.html#edef-B">HTML4.01, section 15.2.1</a>)</td> </tr> </tbody>
</table>
<h2 id="Attributes">Attributes</h2>
<p>Like all other HTML elements, this element has the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<h2 id="DOM.C2.A0Interface">DOM Interface</h2>
<p>This element implements the <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> interface.</p>
<div class="note"><strong>Implementation note: </strong>Up to Gecko 1.9.2 inclusive, Firefox implements the <a href="/en/DOM/span" title="en/DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> interface for this element.</div>
<h2 id="Example">Example</h2>
<pre class="brush: html">&lt;p&gt;
  This article describes several &lt;b&gt;text-level&lt;/b&gt; elements. It explains their usage in an &lt;b&gt;HTML&lt;/b&gt; document.   
&lt;/p&gt;
Keywords are displayed with the default style of the &lt;b&gt; element, likely in bold.
</pre>
<h4 id="Result">Result</h4>
<p>This article describes several <strong>text-level</strong> elements. It explains their usage in an <strong>HTML</strong> document.</p>
<p>Keywords are displayed with the default style of the &lt;b&gt; element, likely in bold.</p>
<h2 id="See_also">See also</h2>
<ul> <li>Others elements conveying <a href="/en/HTML/Text_level_semantics_conveying_elements" title="en/HTML/Text level semantics conveying elements">text-level semantics</a>: {{ HTMLElement("a") }}, {{ HTMLElement("em") }}, {{ HTMLElement("strong") }}, {{ HTMLElement("small") }}, {{ HTMLElement("cite") }}, {{ HTMLElement("q") }}, {{ HTMLElement("dfn") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("time") }}, {{ HTMLElement("code") }}, {{ HTMLElement("var") }}, {{ HTMLElement("samp") }}, {{ HTMLElement("kbd") }}, {{ HTMLElement("sub") }}, {{ HTMLElement("sup") }}, {{ HTMLElement("i") }}, {{ HTMLElement("mark") }}, {{ HTMLElement("ruby") }}, {{ HTMLElement("rp") }}, {{ HTMLElement("rt") }}, {{ HTMLElement("bdo") }}, {{ HTMLElement("span") }}, {{ HTMLElement("br") }}, {{ HTMLElement("wbr") }}.</li> <li><a class="external" href="http://www.w3.org/International/questions/qa-b-and-i-tags">Using &lt;b&gt; and &lt;i&gt; elements (W3C)</a></li>
</ul>
<p>{{ HTML:Element_Navigation() }}</p>
<p>{{ languages( { "de": "de/HTML/Element/b", "pl": "pl/HTML/Element/b", "nl": "nl/HTML/Element/b" } ) }}</p>
Revert to this revision