To make bold text in HTML you can use the <b> tag, the <strong> tag, or font-weight in CSS.
When you’re designing a web page, you may want to emphasize a specific piece of text.
For example, let’s say you have a list of instructions on how to use a new piece of technology, and there is a security notice that is particularly important for the user to read. You may want to emphasize that notice to ensure that the user does not miss it when they’re reading the instructions.
In HTML, there are built-in functions that allow coders to embolden particular text. In this tutorial, we are going to break down the three most common ways to embolden text in HTML: the <b> tag, the <strong> tag, and the font-weight Cascading Style Sheets (CSS) parameter.
HTML <b> Tag
The most common way in which developers create emboldened text in HTML is through using the <b> tag. The <b> tag works to create an element that represents bold text on an HTML webpage. For example, a <b> tag can highlight subheadings in an online article.
Here is an example of the HTML <b> tag in action:
<b>This text is bold</b>
It’s that simple. If you want to make a particular portion of text bold but leave the rest of a paragraph, you can enclose a <b> tag in a section as we do below:
<p>This text is not bold. <b>But this text is bold!</b></p>
Here is the result of our code:
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
The start of our paragraph appears normal, and the text within our <b> tag has been emboldened.
HTML <strong> Tag
In addition, you can use the <strong> tag to create emboldened text in HTML. The <strong> tag is in exactly the same way as the <b> tag, with one difference: the strong tag indicates that its contents require special attention. Here’s an example of a <strong> tag being used:
<p>Your username for your new computer is <b>JohnAppleseed</b></p> <p><strong>Attention!</strong> You must change your password after logging in.</p>
Our code returns the following:
As you can see, the <b> tag is being used to highlight text that the reader may want to read. The <strong> tag is being used to indicate that the word Attention should be given special attention by the reader. That said, aside from this difference, <b> and <strong> tags are the same.
CSS font-weight Property
The <strong> and <b> tags are used in vanilla HTML elements to indicate that text is important and should be read. However, there is also a CSS property that gives us more control over how our text appears: font-weight.
font-weight allows coders to determine how heavy or light — how bold — a particular portion of text appears. Here’s an example of the font-weight tag applied to a paragraph with the tag thick:
HTML:
<p>This is an example paragraph.</p> <p class="thick">This is a bold example paragraph.</p>
CSS:
p.thick {
font-weight: 900;
}
Our code returns the following:
In our example, we define a class called thick, which sets the font-weight property for our text to 900, meaning that the text where we reference the class thick will appear emboldened. It’s worth noting that we could customize the number “900,” depending on whether we wanted our text to appear lighter or bolder.
Alternatively, we could specify our font-weight using the style font-weight bold attribute, like so:
<p>This is an example paragraph.</p> <p style="font-weight:900;">This is a bold example paragraph.</p>
Conclusion
Bold text is an important part of text formatting in HTML. If you need to call attention to a particular line of text or a few words, you may want to embolden it. In this tutorial, we have broken down the three main ways to embolden text: <b>, <strong>, and font-weight. Now you’re ready to create bold text like an expert!