HTML - <b> Tag



HTML <b> tag is used to highlight the text and specify the text in bold. The purpose of the <b> tag or element is to draw attention to the contents of the element, which are not normally given special importance.

If we are writing content within a paragraph element but an important word comes in the content, we can use the <b> tag to highlight the important word.

Syntax

<b> ... </b>

Attribute

HTML b tag supports Global and Event attributes of HTML.

Examples of HTML b Tag

Bellow examples will illustrate the usage of b tag, where, when and how to use to bold any particular text in a sentence.

Creating bold text Element

We can make any text element using CSS or HTML, here we are going to use the <b> tag to bold the text.

<!DOCTYPE html>
<html>
   <body>
      <p>This is normal para</p>
      <p>
         <b>This is bold paragraph </b>
      </p>
   </body>
</html>

Using class attribute on <b> tag

We can select the element by using tag selector but when we will have multiple same tag in that scenerion we need to use the HTML class attribute to select the element.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .term {
            color: green;
            font-style: italic;
         }
      </style>
   </head>
   <body>
      <p>
            The two most popular science courses offered by the 
            school are <b class="term">chemistry</b> 
            (the study of chemicals and the composition of substances) 
            and <b class="term">physics</b> 
            (the study of the nature and properties of matter and energy). 
      </p>
   </body>
</html>

Creating bold Text without <b> Tag

We can create bold text without the <b> tag as well, for that we have to use HTML <strong> tag or CSS font-weight property. Here we are going to use the CSS.

<!DOCTYPE html>
<html>
   <body>
      <h2>Using CSS properties to set the bold text. </h2>
      <p>
         This is normal text - <span style="font-weight:bold;">
         and this is bold text</span>. 
      </p>
   </body>
</html>

Styling HTML <b> Elements

We can make any word bold using HTML <b> tag, default that keyword will be bold to add more styling we can use CSS as well.

<!DOCTYPE html>
<html>
   <head>
      <style>
         b {
            color: red;
            font-style: italic;
         }
      </style>
   </head>
   <body>
      <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. </b>
   </body>
</html>

Supported Browsers

Tag Chrome Edge Firefox Safari Opera
b Yes Yes Yes Yes Yes
html_tags_reference.htm
Advertisements