There are three ways to make text bold in your HTML document:
- By enclosing it in the
<b>tag - By enclosing it in the
<strong>tag - By giving it the
font-weight: boldCSS property
In this tutorial, we will look at each of these ways to make text bold and discuss when it’s appropriate to use each.
With the <b> tag
To make the text in your HTML document bold, enclose it in the <b> tag.
<!doctype html>
<html>
<head>
<title>How to Make Text Bold</title>
</head>
<body>
<p>This is regular text. <b>And this is text that's bold.</b></p>
</body>
</html>
With the <strong> tag
If you not only want to make the text bold but also stress that it is of greater importance than the text in the HTML document, enclose it in the <strong> tag instead.
<!doctype html>
<html>
<head>
<title>How to Make Text Bold</title>
</head>
<body>
<p>This is regular text. <strong>And this is text that's bold.</strong></p>
</body>
</html>With the font-weight CSS property
You can also make the text in your HTML document bold by giving it the font-weight: bold CSS property.
<!doctype html>
<html>
<head>
<title>How to Make Text Bold</title>
</head>
<body>
<p>This is regular text. <span style="font-weight: bold">And this is text that's bold.</span></p>
</body>
</html>Often, the text that you want to make bold won’t be enclosed in an HTML element of its own. The best thing to do in such a case is to enclose it in the <span> HTML element.
You can then style the contents of the <span> element by editing its style="" attribute or by giving it a class name or unique id that you can target with a CSS rule within your CSS style sheet.
We hand-picked these tutorials for you:
Which One Should You Use?
According to the HTML5 specification, the <b> element should only be used as a last resort when no other option is available.
Headings, the specification goes on to explain, should use the <h1> through <h6> tags, important sentences or phrases should be enclosed in the <strong> tag, and highlighted text should be in a <mark> tag.
It’s important not to take what the specification says the wrong way. This doesn’t mean that you should stop using the <b> tag altogether—it just means that it isn’t a good idea to nest it under heading tags just to make their text bold.
When in doubt about whether to use the <b> tag, the <strong> tag, or the font-weight: bold CSS property to make text in your HTML document bold, use the following rule of thumb:
If you want to make the text in an HTML element bold, enclose it in the <b> tag or give its parent element the font-weight: bold CSS property.
If you want to convey that the text being bolded is of greater importance or urgency than the rest of the text in the HTML document, wrap it in the <strong> tag.
