html

How to bold text in html

It is known that the HTML language is used to write a document over the web. Now while writing a document we use different formatting techniques to make our document look good. Now have you ever thought just like MS Word and Google Docs, is there any technique to make a bold text in HTML? Here, we are with the possible solutions to bold the text in HTML.

In this write-up, we will tell you about the different techniques to make the text bold in HTML and focus on the following outcomes.

How do we bold text using the <b> tag?

In HTML, the <b> tag is usually used to bold the text. Anything written between the opening and closing of this tag will appear as bold. This tag is mostly used to highlight text or to give headings to increase the readability of the HTML document. The following practical example explains better the use of the <b> tag in HTML.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>bold</title>
</head>
<body>
    <div>
        <p style="font-size: 30px;">
            <b>This text is made bold using the < b > tag.</b>
        </p>
    </div>
</body>
</html>

In this code, we write the text between the HTML <b> tag to make the text bold. And also we increase the size of the text to make it prominent.

Output:

This output shows that we successfully made the text bold by using HTML <b> tag.

How do we bold text using CSS property in HTML?

In HTML, we can also bold the text using CSS font-weight property. To make text bold using this property set its value to bold or bolder according to your requirement.

Example 1
Let’s understand the use of this property with the help of a proper practical example.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>bold</title>
</head>
<body>
    <div style="font-size: 30px;">
        <p style="font-weight: bold;">
            This text is made bold using the CSS property in HTML.
        </p>
    </div>
</body>
</html>

In this code, we use the font-weight property and set its value to bold that will automatically make the text bold in HTML. You can set its value to bolder as well to get a bolder weight of the text.

Output

This output shows that the text is bold in HTML after we use font-weight property.

Example 2
Now let’s look at another practical example in which we will try to make text bold by giving custom values from 600 to 950 to the font-weight property.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>bold</title>
</head>
<body>
    <div style="font-size: 30px;">
        <p style="font-weight:600;">
            This text is made bold using the CSS property in HTML.
        </p>
    </div>
</body>
</html>

In this code, we made the text bold in HTML using CSS font-weight property with custom values.

Output:

The output shows that we successfully bold the text in HTML by giving custom value to CSS font-weight property.

Conclusion

In HTML, we can bold the text by using HTML <b> tag and CSS font-weight property. We can also use font-weight property to set the boldness of the text by giving custom values. In this article, we have gone through the different techniques to make the text bold in HTML.

About the author

Muhammad Huzaifa

I am a computer science graduate with a passion to learn technical knowledge and share it
with the world. I love to work on top state-of-the-art computing languages. My aim is to best
serve the community with my work.