HTML <b> Tag

The HTML <b> tag is used to render text in bold. Unlike the <strong> tag, the <b> tag does not convey any special semantic importance or emphasis to the text; it's purely a stylistic choice to make text visually stand out. It's typically used to draw the reader's attention to certain parts of the content but should not be used where semantic emphasis is needed.

Syntax

<b>text content</b>

Attributes

The <b> tag supports the Global Attributes in HTML.
| Attribute | Value | Description |
|———–|——–|————-|
| class | class names | Specifies one or more class names for an element (often used to style the element with CSS) |
| id | id name | Specifies a unique id for an element |
| style | CSS properties | Specifies inline CSS styles for an element |
| title | Text | Specifies extra information about an element |
| accesskey| character | Specifies a keyboard shortcut to activate/focus an element |
| contenteditable | true or false | Specifies if the content of an element is editable |
| dir | ltr or rtl | Specifies the text direction for the content in an element |
| draggable | true, false or auto | Specifies if an element is draggable |
| hidden | hidden | Specifies that an element is not yet relevant, or no longer relevant |
| lang | language code | Specifies the language for the content in an element |
| spellcheck | true or false | Specifies if the browser should check for spelling mistakes |
| tabindex | number | Specifies the tabbing order of an element |
| translate | yes or no | Specifies if the content of an element should be translated |

Example

<p>This is a <b>bold</b> word inside a paragraph.</p>

This will display:

This is a bold word inside a paragraph.

More Examples

Basic Usage

<p>The <b>quick</b> brown fox jumps over the lazy dog.</p>

This demonstrates the simple use of <b> to highlight the word "quick".

Highlighting Key Phrases

<p>Please ensure you have completed the <b>registration</b> process before <b>submitting</b> the form.</p>

This example shows how <b> can be used to make key instructions or parts of a sentence stand out visually.

Within Headings

<h1>This is a <b>Heading</b> with bold text.</h1>

<b> can also be used within headings to emphasize certain words in the heading text.

With other formatting

<p>This is <b><i>bold and italic</i></b> text.</p>

You can combine <b> with other formatting tags such as <i> to create different visual effects.

Example with CSS styles

  <p><b class="highlight">This text is styled with CSS.</b></p>
  <style>
    .highlight {
      color: blue;
      font-size: 1.2em;
    }
  </style>

This example demonstrates using a class with the <b> tag and applying CSS to the text.

Browser Support

The <b> tag is supported by all modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• Use <strong> for Emphasis: If the bold text carries semantic importance or emphasis, use the <strong> tag instead of <b>. The <strong> tag indicates that its content has strong importance, meaning screen readers and search engines will treat it differently.
• Avoid Overuse: Don't overuse the <b> tag. Too much bold text can make your content look cluttered and hard to read. Use it sparingly to draw attention to specific parts of the text.
• CSS Alternatives: Use CSS font-weight: bold; to style the text in bold. This is the recommended method because it separates the style from the content, making your code cleaner and more maintainable. You can apply this CSS property to any element.
• Context Matters: Consider the context in which you are using the <b> tag. Is it really just for styling or are you trying to convey important information? If so, <strong> is a better choice.
• Maintain Accessibility: While bold text can improve visual clarity, ensure your use of tags does not degrade the accessibility of your content. Make sure you understand how screen readers treat various tags.