How to Make Text 𝗕𝗼𝗹𝗱
in HTML, CSS & Markdown

Master every method to bold text — from classic HTML tags to CSS font-weight, Markdown shortcuts, and Unicode styles that work anywhere you paste.

Whether you’re building a webpage, writing documentation, or styling a social media bio, knowing how to bold text correctly across different environments is a core skill. This guide covers every method — with copy-paste code examples — so you always pick the right tool.

01 Bold text in HTML

HTML gives you two tags specifically for making text bold: <b> and <strong>. They both render text visually bold in browsers, but they carry different semantic meaning — and choosing the right one matters for accessibility and SEO.

The <strong> tag — semantic importance

Use <strong> when the text is genuinely important — a warning, a key term, or critical information. Screen readers typically announce <strong> content with additional emphasis, helping visually impaired users understand the priority of the content.

<!-- Use <strong> for semantically important text -->
<p>Always <strong>save your work</strong> before closing the editor.</p>

<p><strong>Warning:</strong> This action cannot be undone.</p>

The <b> tag — stylistic bold only

Use <b> when you want text to look bold for purely visual reasons — like highlighting product names, keywords in a UI, or decorative emphasis. It carries no semantic weight for assistive technologies.

<!-- Use <b> for stylistic bold without extra meaning -->
<p>Our newest product is the <b>ProMax 3000</b>.</p>

<p>Keywords: <b>HTML</b>, <b>CSS</b>, <b>Markdown</b></p>

Nesting bold inside other elements

You can nest <strong> inside headings, list items, links, or any inline element:

<ul>
  <li>Plan your project <strong>before</strong> writing any code</li>
  <li>Use <strong>semantic HTML</strong> for better accessibility</li>
  <li>Test on <strong>mobile</strong> and desktop</li>
</ul>

<!-- Bold inside a link -->
<a href="#tools">Try our <strong>free bold text generator</strong></a>

02 Bold text with CSS

CSS’s font-weight property is the most powerful and flexible way to control text boldness. It works on any HTML element and lets you fine-tune the exact weight — from thin to ultra-black — when your typeface supports it.

Using font-weight: bold

/* Keyword value — equivalent to 700 */
p.important {
  font-weight: bold;
}

/* Numeric value — more precise control */
p.heavy {
  font-weight: 700;
}

/* Extra bold / black weight */
h1.hero {
  font-weight: 900;
}

CSS font-weight numeric scale

The numeric scale runs from 100 (Thin) to 900 (Black). Not all fonts include every weight — a font with only Regular and Bold will snap to the nearest available weight. Common values you’ll actually use:

Applying bold inline with the style attribute

If you want a quick, one-off bold without writing a CSS class, use the style attribute directly in HTML:

<p style="font-weight: 700;">This entire paragraph is bold.</p>

<span style="font-weight: bold;">Just this phrase is bold.</span>

CSS-only bold for specific elements

/* Bold all headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/* Bold only the first line of a paragraph */
p::first-line {
  font-weight: 600;
}

/* Bold on hover — for interactive UI elements */
.nav-link:hover {
  font-weight: 700;
  letter-spacing: -0.02em; /* counteract layout shift */
}

03 Bold text in Markdown

Markdown is the language of documentation, GitHub READMEs, Notion, Obsidian, Reddit, and dozens of other platforms. Making text bold in Markdown is simple — wrap the text in double asterisks ** or double underscores __.

# Both of these produce bold text:

**This text is bold using asterisks**

__This text is bold using underscores__

# Combine bold and italic:

***This is bold and italic***

**You can _mix_ bold and italic** in the same sentence.

# Bold inside a list:

- **Step 1:** Install the dependencies
- **Step 2:** Configure the environment  
- **Step 3:** Run the build

Markdown bold on different platforms

Markdown flavors vary slightly across platforms. Here’s how bold works where you’re most likely to use it:

04 Unicode bold — works everywhere

Unicode bold characters are real text characters — they’re just from a different part of the Unicode character set that visually resembles bold Latin letters. Because they’re actual characters (not formatting), they survive copy-paste into any platform: Instagram captions, Twitter bios, WhatsApp, LinkedIn, gaming usernames, and more.

For example, this is Unicode bold: 𝗛𝗲𝗹𝗹𝗼 𝗪𝗼𝗿𝗹𝗱 — paste it anywhere and it stays bold.

# Regular text → Unicode bold variants:

Hello World  →  𝗛𝗲𝗹𝗹𝗼 𝗪𝗼𝗿𝗹𝗱   (Bold Sans-Serif)
Hello World  →  𝐇𝐞𝐥𝐥𝐨 𝐖𝐨𝐫𝐥𝐝   (Bold Serif)  
Hello World  →  𝕳𝖊𝖑𝖑𝖔 𝖂𝖔𝖗𝖑𝖉   (Bold Fraktur)
Hello World  →  𝙃𝙚𝙡𝙡𝙤 𝙒𝙤𝙧𝙡𝙙   (Bold Italic)
Hello World  →  𝓗𝓮𝓵𝓵𝓸 𝓦𝓸𝓻𝓵𝓭   (Bold Cursive)

05 When to use which method

Choosing the right bold method depends entirely on your context. Here’s a quick reference:

06 Common mistakes when bolding text

1. Using <b> for semantically important content

Many developers use <b> for everything bold. But if the text is genuinely important — an error message, a safety warning, a key instruction — you should use <strong> so screen readers communicate the importance to users with visual impairments. See the MDN documentation on <strong> for the full semantic distinction.

2. Bolding entire paragraphs

Bold works by contrast. If everything is bold, nothing stands out. Reserve bold for genuinely key phrases — typically no more than 10–15% of your text. Over-bolding is one of the most common readability mistakes in web content.

3. Forgetting to close tags

<!-- ✗ Wrong — tag not closed, everything after is bold -->
<p>This is <strong>important text and this accidentally becomes bold too.</p>

<!-- ✓ Correct -->
<p>This is <strong>important</strong> text and this is normal.</p>

4. Using Markdown bold on platforms that don’t support it

A common frustration: you write **bold** in an Instagram caption and publish it — only to see the literal asterisks appear. Instagram, WhatsApp, and most social platforms don’t render Markdown. For those, use Unicode bold characters generated by a tool like the BoldTexts.xyz bold generator.

07 Frequently asked questions

What is the difference between <b> and <strong> in HTML?

Both render text visually bold in browsers. The difference is semantic: <strong> signals that the content is important, and assistive technologies like screen readers may announce it differently. <b> is purely stylistic — it bolds text without implying any special importance. Use <strong> for key information, warnings, or critical instructions. Use <b> for decorative or UI-level emphasis.

How do I bold text in HTML without CSS?

Use the <b> or <strong> HTML tag. Both apply browser-default bold styling with zero CSS required. Example: <strong>This text is bold</strong>.

How do I make text bold in CSS only?

Set font-weight: bold or font-weight: 700 on any element using a CSS rule or inline style. You don’t need any HTML bold tags — CSS alone is enough.

Does bold text help SEO?

Using <strong> to highlight keywords can provide minor SEO signals, as it communicates relevance to search engine crawlers. However, it’s a very minor factor compared to content quality, backlinks, and page structure. Avoid stuffing <strong> tags around every keyword — use them naturally where the text is genuinely important. For further reading, Google’s own Search Central documentation covers how crawlers interpret HTML semantics.

How do I bold text in Instagram bio or captions?

Instagram doesn’t support HTML or Markdown formatting. To display bold text, you need to use Unicode bold characters — which look like bold letters but are actually different Unicode code points that render bold in any plain text field. Use the free BoldTexts.xyz bold generator to convert your text instantly.

Can I bold text in WhatsApp?

Yes — WhatsApp actually supports its own limited Markdown-like formatting. Wrap text in single asterisks: *bold text* (not double asterisks like standard Markdown). Alternatively, Unicode bold characters also work in WhatsApp and paste without any formatting syntax.