The correct way to make text bold with HTML/CSS

In this article, we will see the correct way to make the text bold with HTML and CSS, both for semantics and also in terms of good practices.

If you already know a little bit of HTML and CSS, you may have come across the <b> tag, which makes the text bold

But there are two other ways  to add bold to text with HTML and CSS, and it’s good to know which one to use depending on the situation

This can interfere with SEO, for example, but we’ll see later

In addition, the two other ways are:

• The <strong> tag;
• The font-weight property of CSS;

So let’s understand each one of them!

When to use the <b> tag

The <b> tag is used to represent a text of importance

We should apply this element when there is an intention to add semantic value to the text, not just when the word is to be bold.

Previously this tag was used for this purpose, but with the arrival of font-weight it lost this function

Even for the sake of not mixing CSS with HTML, leaving each one to their responsibility

<b> tag lost styling function in HTML version 4

<p>Our main focus is to <b>post weekly blog</b>, interesting content that adds up for programmers</p>

When to use the <strong> tag

The <strong> tag, on the other hand, determines a highly important text in the HTML, besides making it bold

Again it cannot be used for styling purposes only, it is bad practice

You may have noticed that <strong> and <b> are very similar in concept, as the strong add semantics to the code as well.

But the fact is that <b> comes in bold, and this brings a very strong correlation with bold black text

Already strong, you can render the text in the format you want, it will be present more for the semantic idea that the tag brings, of giving greater importance to the text that surrounds it

<p>We have a <strong>weekly video frequency</strong> on our YouTube channel, we do a lot of free courses and tutorials too!</p>

When to use the font-weight property

The font-weight property is certainly easier to understand

In this case, we just want to change the visual part of the text, that is, we don’t care about semantics but layout

So in case, we follow a PhotoShop file that a designer made just for aesthetic purposes some bold, we use font-weight

Not misleading search engines, that part of the text is essentially important to the page

<!-- HTML -->
<p>This paragraph is in bold</p>

/* CSS */
p {
 font-weight: bold;
}

And the font-weight property value must be bold, which makes the texts bold

Conclusion

We saw in this article the correct way to make the texts in bold, for each case, so when the idea is to put semantics in some text we use <b> or <strong>

And when it’s visual, we use the font-weight property

Furthermore, we must not use <b> or <strong> for visual/layout purposes only.

And that’s it for today, until the next post!