How To Make Text Bold in HTML

by

When building your website, you might need to make certain portions of text appear bold for emphasis or stylistic reasons. This article will show you a few ways to make text bold in HTML.

Make Text Bold in HTML Using bold Tag

You can make text bold in HTML using the <b> tag; the b stands for bold, and it does what it says on the tin– make text bold. The bold tag makes the text bold without any semantic meaning. 

To use the bold tag, you must enclose the text you want to make bold within the opening <b> and closing </b> tags. The bold element is an inline element, meaning that you can use it within another text element without breaking the HTML structure. An example of how to use the bold tag is as follows:

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold.</b> This is a regular text</p>

</body>
</html>
Text that is made bold using the bold tag
Text that is made bold using the bold tag

Make Text Bold In HTML Using strong Tag

You can also make text in HTML look bold using the <strong> tag. The strong tag doesn’t just make text bold; it also denotes that the text is of some importance.

You can use the strong tag by enclosing the text portion that you want to make bold in the opening <strong> and closing </strong> tags. The strong element is also an inline element, and you can use it within other text elements without affecting the HTML structure. An example of how to use the strong tag is as follows:

<!DOCTYPE html>
<html>
<body>

<p><strong>This text is made bold using the strong tag.</strong> This is a regular text.</p>

</body>
</html>
Text that is made bold using the strong tag
Text that is made bold using the strong tag

Make Text Bold Using CSS

Another way text can be made bold in HTML is by styling the specific portion of text using CSS. You can do this by adding a class to the element you want to make bold and modifying the font-weight property to have the values bold or bolder. If you want to adjust the font weight of just a specific portion of text, you can wrap it around a <span> tag and add a custom class, which you can address in CSS.

An example of how to do that is seen below:

<!DOCTYPE html>
<html>
<head>
<style>

.bold {
  font-weight: bold;
}

.bolder {
  font-weight: bolder;
}

</style>
</head>
<body>

<p class="bold">This whole paragraph is bold</p>
<p><span class="bolder">This portion is bolder. </span>This portion isn’t</p>

</body>
</html>
Text that is made bold using CSS
Text that is made bold using CSS

Using CSS, you can customize the font-weight by using numbers 100, 200, 300, 400, 500, 600, 700, 800, and 900. Using this, you can get the desired degree of boldness; however, not all font styles support these slight differences in size. Here’s an example:

<p style="font-weight:600">Font weight 600</p>

Which Method Is The Best To Make Text Bold In HTML?

In HTML, several elements perform similar functions on your website because HTML5 introduced the use of more semantic tags. While the result you see might be the same, the browser would not interpret the results similarly, neither will accessibility devices. For example, a screen reader or narrator will emphasize text made bold using the <strong>, unlike the <b> tag.

It’s therefore essential to know what you want to achieve by making text bold; if it’s merely for decorative purposes, you should use CSS to achieve the bold effect. Using the <b> is not advisable since it only makes text bold without any semantic value, and HTML is meant for structure only, not styling a website.

Read Also: How To Underline In HTML

Leave a Comment