HTML Element

Publish in HTML Tutorial el 23/05/2025 17:08

The HTML  element is used to draw attention to text without implying any added importance or emphasis. It simply makes the text appear in boldface. Unlike , which indicates semantic importance,  is purely presentational.

Basic Syntax

Here's how the  element is written in HTML:

Rendered result: This text will be bold

When to Use

Highlighting product names in reviews
Drawing attention to key words in summaries
Styling lead sentences in paragraphs
Formatting dictionary-style entries
Creating visual contrast without semantic meaning

Examples

1. Basic Bold Text

The simplest use case for the  element:

Play Code

<p>This is normal text, <b>and this is bold text</b> within the same paragraph.</p>

2. Bold in List Items

Highlighting key parts of list items:

Play Code

<ul>
  <li><b>HTML</b>: HyperText Markup Language</li>
  <li><b>CSS</b>: Cascading Style Sheets</li>
  <li><b>JS</b>: JavaScript</li>
</ul>

3. Dynamic Bold with JavaScript

Using JavaScript to toggle bold formatting:

Play Code

<p id="toggleText">Click the button to toggle bold</p>
<button onclick="document.getElementById('toggleText').innerHTML = 
  document.getElementById('toggleText').innerHTML.includes('<b>') ? 
  'Click the button to toggle bold' : 
  '<b>Click the button to toggle bold</b>'">
  Toggle Bold
</button>

4. Bold in Table Headers

Using  to emphasize table headers:

Play Code

<table border="1">
  <tr>
    <td><b>Name</b></td>
    <td><b>Age</b></td>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

5. JavaScript Mouseover Bold Effect

Making text bold on mouseover with JavaScript:

Play Code

<p onmouseover="this.innerHTML='<b>'+this.innerText+'</b>'"
   onmouseout="this.innerHTML=this.innerText">
   Hover over me to make bold!
</p>

Tips and Tricks

Use CSS font-weight: bold; instead when you need to apply bold styling to multiple elements for better performance.
Don't overuse  as it can make text harder to read when overdone.
Combine  with other elements like  for bold italic text.
Remember that screen readers don't emphasize  elements differently unless CSS is applied.
For semantic importance, prefer  instead of .