In this post, I will show you 3 different ways to make text bold in HTML. End of this post, I will also show you how to do it in CSS.

Let’s get started.

Make text bold in HTML

There are different HTML tags that you can use to bold certain words or sentences. Let me show you all of them.

Using strong tag

To make text bold in HTML use the <strong> tag as you see below.

<p>Repudiandae dolores <strong>molestias necessitatibus</strong> soluta eveniet magnam mollitia</p>

Here is the output below:

Repudiandae dolores molestias necessitatibus soluta eveniet magnam mollitia

Using b tag

To make a text bold, you can also use the <b> tag. See the syntax below.

<p>Consequatur minima <b>perspiciatis inventore</b> maxime aperiam adipisci.</p>

See the output below.

Consequatur minima perspiciatis inventore maxime aperiam adipisci.

Using inline style

You can write inline style to make certain text bold in HTML. This method becomes handy when you need to overwrite uncaught styles.

See the example and syntax below.

<p style="font-weight: bold;">Amet consectetur dipisicing</p>
<p style="font-weight: 700;">Amet consectetur dipisicing</p>
<p style="font-weight: bolder;">Amet consectetur dipisicing</p>
<p>Amet consectetur <span style="font-weight: bolder;">dipisicing elitamet</span> tempora perferendis</p>

An alternative way to make text bold

Bonus tip: You’re just not limited to inline style, strong, or b tag. The most preferred and efficient way to make a text blog is by using external CSS.

This post is all about making text bold in HTML. But this alternative approach may help some of you.

Let’s see how you can do that.

strong, b {
  font-weight: bold; /* For regular bold pattern */
  font-weight: 900; /* For specific/900 font-weight */
}
.bold {
  font-weight: 700;
  /* or */
  font-weight: bold;
}
#bold {
  font-weight: 700;
  /* or */
  font-weight: bold;
}

On your stylesheet, you can define the font weight. And even you can create a custom CSS class or ID and assign its font weight to bold. This way, you can use the same class or ID over & over throughout your project.

To use this external CSS method, you need to connect the stylesheet with your HTML file. If you need help, see how to do it.

And it brings me to the end of this post.

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview
Coming soon templatePreview
Landing page templatePreview
Roofing website templatePreview

Conclusion

This is fairly a quick & short post. I gave you examples and showed you the syntaxes. And also I explained the best (alternative) way to write CSS.

If you have any questions, please let me know.