HTML bold tag – How to bold text in HTML? 

HTML bold tag – How to bold text in HTML? 

If you only work in content management systems like CMS Hub or WordPress, you’re accustomed to being able to bold, italicize, and highlight text with only the click of a button. But what if the precise formatting choice you need isn’t available in your toolbar? Or maybe you’re not using a CMS or word processor? 

No issue. HTML and CSS are all you need. We’ll talk about a few use cases for text formatting below. However, we’ll only go through how to make your text bold in this tutorial. Just bear in mind that by using the CSS font-weight property, you may achieve the same effect in HTML. But we will simply cover HTML in this article. 

HTML Text Formatting 

HTML contains several formatting elements for defining text with a special meaning. The following specific types of text can be displayed using these formatting elements: 

  • <b> – Defines bold text. 
  • <strong> – Defines important text. 
  • <i> – Defines a part of the text in an alternate voice or mood. 
  • <em> – Defines emphasized text.
  • <mark> – Defines marked/highlighted text.
  • <small> – Defines smaller text.
  • <del> – Defines deleted text.
  • <ins> – Defines inserted text.
  • <sub> – Defines subscripted text.
  • <sup> – Defines superscripted text.

Visit the HTML Tag Reference for a complete list of all HTML tags that are currently in use. Only the bold <b> tag will be covered in this article; other tags will be covered in other blogs. 

HTML Bold tag 

The HTML <b> tag is used to bold text in HTML without marking it as important. We can also use the <strong> tag to bold text elements. Both tags have the same function, but the HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold. The <b> tag is a physical markup element but does not add semantic significance. 

Example

<html>
  <body>
    <p>This codedamn text is normal.</p>
    <p><b>This codedamn text is bold.</b></p>
  </body>
</html>Code language: HTML, XML (xml)

Here’s the output:

The HTML5 specification states that using the <b> tag should only be done as a last option and only in cases when there are no other suitable tags. According to the specification, headings should be indicated by using the <h1> to <h6> tags stressed text by using the <em> tag, significant text by using the <strong> tag and marked or highlighted text by using the <mark> tag. 

You can also set the bold text using the CSS property "font-weight: bold;"

For example, use CSS to set bold text: 

<html>
  <body>
    <p>This codedamn text is normal.</p>
    <p><span style="font-weight: bold">This codedamn text is bold</span>.</p>
  </body>
</html>Code language: HTML, XML (xml)

 The outcome will be the same.

Global Attributes 

The <b> tag also supports several Global Attributes in HTML

Event Attributes 

The <b> tag also supports several Event Attributes in HTML

Difference between HTML and tags 

bold tagstrong tag
1. The bold (<b>) tag specifies bold text without any extra importance.1. The <strong> tag is used to define text with strong importance
2. It is semantic.2. It is explicit.
3. It supports the Event attributes.3. It supports the Global attributes.
4. It supports the Global attributes.4. It supports the Event attributes.
5. Its supported browsers are -:
Chrome, Microsoft Edge, Safari, Firefox, Opera Mini
5. Its supported browsers are -:
Chrome, Microsoft Edge, Safari, Firefox, Opera Mini

It’s recommended to use the <strong> tag rather than the <b> tag for bolding text. This is due to the fact that whereas <b> is not a semantic element, <strong> is.

According to the HTML5 specification, non-semantic elements can make localizing and future-proofing material challenging. Additionally, it’s preferable to use CSS and keep all page styling distinct from the content of the text bolding. 

Conclusion 

In this article, we have learned about the HTML <b> tag, how it is different from <strong> tag, and how to bold text in HTML. I’m hoping this article will help you understand how to format your text with HTML tags.

Please feel free to share this blog with your loved ones if you find it useful. If you have any queries related to the front end, do drop them down in the comment section. Also, do check out Codedamn courses if you want to learn more about HTML and CSS styling with its use cases and amazing projects. They also have an in-built playground for different programming languages and environment sets, so do check that out and join Codedamn’s community!  

Thank you for reading ?. 

{Happy Coding!} 

Sharing is caring

Did you like what Shubham Gupta wrote? Thank them for their work by sharing it on social media.

0/10000

No comments so far