How to Make Text Bold in HTML

What you’ll build or solve

You’ll make specific words or phrases appear bold in a sentence, paragraph, or label.

When this approach works best

This approach works best when you want bold text for emphasis or to mark something as important inside normal content.

Use it when you:

• Highlight key terms in a tutorial or documentation.
• Mark warnings, labels, or “required” text in forms.
• Emphasize a word in a sentence without changing the whole design.

Skip this approach when:

• You want a heading. Use <h1> to <h6> instead of bolding a paragraph.
• You want bold styling across many pages. Use CSS so you don’t repeat tags everywhere.

Prerequisites

None. You only need an HTML file.

Step-by-step instructions

Step 1: Choose the right tag for bold text

HTML has two common tags that make text bold, but they mean different things.

Option A: Use <strong> for important text (most common)

Use <strong> when the text matters semantically, such as warnings, labels, and key terms.

<p><strong>Warning:</strong> This action can’t be undone.</p>

Option B: Use <b> for visual styling only

Use <b> when you only want bold styling, such as UI labels or keyboard keys.

<p>Press<b>Ctrl</b> +<b>S</b> to save.</p>

What to look for

• Wrap only the specific words that should be bold.
• Keep punctuation outside unless it belongs to the bold phrase.
• Use <strong> for warnings, labels, and anything you’d call “important.”
• Use <b> for UI text, shortcuts, or styling that shouldn’t carry extra meaning.

Examples you can copy

Example 1: Bold one word in a sentence

<p>This course is<strong>free</strong> to start.</p>

Example 2: Bold a label at the start of a line

<p><strong>Note:</strong> Save your work before closing the tab.</p>

Example 3: Bold shortcuts and UI labels

<p>Click<b>Settings</b>, then select<b>Security</b>.</p>
<p>Use<b>Ctrl</b> +<b>F</b> to search.</p>

Common mistakes and how to fix them

Mistake 1: Bolding a whole paragraph instead of the key part

What you might do:

<p><strong>This entire paragraph is bold, even though only one phrase matters.</strong></p>

Why it breaks:

The page becomes harder to scan, and the “important” meaning gets diluted.

Correct approach:

Bold only the words that need emphasis.

<p>This paragraph has one<strong>important phrase</strong> and the rest stays normal.</p>

Mistake 2: Using <b> for warnings or key alerts

What you might do:

<p><b>Warning:</b> This action can’t be undone.</p>

Why it breaks:

<b> only changes appearance. It does not signal importance to assistive tech.

Correct approach:

Use <strong> for important text.

<p><strong>Warning:</strong> This action can’t be undone.</p>

Mistake 3: Using <strong> as a styling shortcut everywhere

What you might do:

<p><strong>About us</strong></p>
<p><strong>Contact</strong></p>
<p><strong>FAQ</strong></p>

Why it breaks:

This turns “importance” into a styling hack and can confuse assistive tech.

Correct approach:

Use the right HTML structure, then style with CSS if needed.

<nav>
<ahref="/about">About us</a>
<ahref="/contact">Contact</a>
<ahref="/faq">FAQ</a>
</nav>

<style>
nava {
    font-weight:700;
  }
</style>

Troubleshooting

• If bold text doesn’t look bold, the font may not include a bold weight. Try a different font or use CSS font-weight: 700.
• If everything becomes bold, look for a missing closing tag like </strong> or </b>.
• If you’re using bold to fake headings, switch to heading tags instead.
• If the bold looks too heavy, use CSS font-weight: 600 or 500 for a softer emphasis.

Quick recap

• Use <strong> for important text like warnings and labels.
• Use <b> for visual bolding without extra meaning.
• Wrap only the words that should be bold.
• Use CSS for site-wide bold styling with font-weight.
• If bold doesn’t show, check font weights or missing closing tags.