HOWTO · HTML
How to Create Bold Text in HTML
Choose <strong> for important text, <b> for attention without added importance, or CSS font-weight when you need control over visual weight.
On this page
To make text bold in HTML, use <strong> when the text is important, <b> when you want to draw attention without adding importance, or CSS font-weight when you need to control its visual weight. These choices affect meaning and appearance differently, so pick the one that matches the content.
Use for semantically important text
Use <strong> for text that has strong importance, urgency, or seriousness in its surrounding context. Browsers commonly display it in bold by default, while the element communicates its meaning independently of that styling.
<p><strong>Save your changes before closing the page.</strong></p>
The sentence remains marked as important even if a stylesheet changes how it looks. Use <strong> for the whole sentence here because the instruction as a whole matters.
Run this example:
const message = "Save your changes";
console.log(`<strong>${message}</strong>`);
This JavaScript example prints an HTML snippet as text; it does not render a browser page. It is unexecuted here.
Use for stylistic attention
Use <b> to draw attention to text without saying that it has greater importance. For example, it can identify a key term or a label that readers should notice. It is a valid HTML element; choose it when that attention cue fits better than the stronger meaning of <strong>.
<p>Search results for <b>CSS selectors</b></p>
Choose <strong> instead when the text itself carries importance, such as a warning. The visual appearance may be similar, but the semantic purpose differs.
Use CSS font-weight to control visual weight
Set the CSS font-weight property when the goal is visual styling. An inline style is quick for a one-off, while a class can be reused and adjusted from a stylesheet.
<p style="font-weight: bold;">This text is bold.</p>
<style>
.bold-text {
font-weight: bold;
}
</style>
<p class="bold-text">This text uses a reusable class.</p>
normal requests the normal weight; bold requests bold. bolder and lighter request a weight relative to the parent. The exact rendered weight depends on the font’s available faces, so these values do not guarantee a visibly distinct weight in every font.
Combine semantic HTML with CSS styling
Use semantic markup for meaning and CSS for appearance. For important text that needs a particular visual weight, put <strong> around the words and style that element or a class on it.
<style>
.important {
font-weight: 700;
color: darkred;
}
</style>
<p>Before submitting, read the <strong class="important">confirmation message</strong>.</p>
Here, <strong> identifies the message as important; the class controls its weight and color. If the text only needs visual styling and has no special importance, apply a CSS class without adding semantic emphasis.
Bold Text and Accessibility
Making text bold is purely visual: screen readers do not announce <b> elements or CSS font-weight changes. If bold text matters to understanding — a warning, a key term, a required field — mark it up with <strong> so assistive technologies can convey its importance, and never rely on bold alone to carry meaning.