Bold is not the same as <strong>

One of those little HTML decisions that seem like they only affect style, but can have a big impact on accessibility: using <strong> when you only want bold text, or using CSS font-weight: bold on something that’s actually important.

Visually, these can look identical, but semantically, they are not.

✅ If you only want to change how text looks → use CSS.

<p>This is <span class=”bold”>important</span>.</p>

.bold {

font-weight: 700;

}

✅ If the text has strong importance or seriousness → use <strong>.

<p><strong>Do not share your password.</strong></p>

The difference matters because HTML communicates the meaning and structure of content to browsers and assistive technologies.

Other reasons why it is important:

• <strong> carries semantic meaning

• CSS font-weight changes presentation, not meaning

• assistive technologies can expose semantic emphasis differently depending on the technology and user settings

• removing CSS should not remove the meaning of important content

• semantic HTML gives other technologies more information to work with

Here are some interesting facts:

• <strong> doesn’t simply mean “make this bold” - its meaning is strong importance, not a visual instruction

• <b> and <strong> are not interchangeable: <b> draws attention without adding the same semantic importance as <strong>

• you don’t need to make <strong> visually bold. CSS can style it however you want - the semantic meaning remains

• you can have <strong> inside a sentence, you don’t need to wrap an entire paragraph in it

• nesting matters: <strong><strong>Very important</strong></strong> doesn’t magically make something “twice as important”

• bold-looking text isn’t necessarily important text: a navigation label, product name or visual heading might be bold simply because of the design.

• screen readers don’t necessarily announce every <strong> as “bold” or “important”. The exact experience depends on the screen reader and its settings.

• <em> is also semantic. It represents emphasis, while <strong> represents strong importance. Neither is simply a replacement for font-style: italic or font-weight: bold.

Here’s a practical checklist on using <strong> versus bold:

• You only want text to look bold → use CSS font-weight

• The text is strongly important → use <strong>

• You want to draw attention without adding importance → consider <b> or appropriate styling

• The meaning is emphasis → use <em>

• You’re making a heading → use the appropriate <h1>–<h6>, not bold text

• You’re making a list → use <ul>, <ol> and <li>, not bold lines with bullets

• You’re making a button → use <button>, not a bold <span>

HTML isn’t decoration, the elements you choose tell the browser not only what your content should look like, but also what it means.

What’s another HTML element that you find developers often use for its appearance instead of its meaning?