Bold and strong text

1

So whats the difference between bold and strong text?

2

They both have the same effect on text, however <strong> is semantically better. It conforms to accessibility. This is because bold just modifies the text, whereas strong tells screen readers that there is emphasis going on.

1 Like
3

If your intent is solely a visual effect (your goal is just to visually separate the bolded text from the surrounding text), you should use CSS for that and not an HTML tag—well unless you’re inserting a <span> which you plan on adding a style to.

Also, don’t consider <strong> to be a drop-in replacement for <bold> either—i.e., although it does bold text visually, it shouldn’t be used for that purpose. This HTML snippet demonstrates the proper use case for both <strong> and <em> (which are intrinsically linked to each other, as they’re both tags that were created for accessibility):

<p>"Blue is alive—you <em>raised</em> her," Claire reminded Owen.</p>
<p>"Run! <strong>RUN!</strong>" Owen yelled at all of them.</p>

(lines from a recent movie trailer for Jurassic World: Fallen Kingdom) :wink:

4

If you only want to make one or a few words “bold”, it is easier to just use the HTML tags. What’s the point of adding a span in your HTML, then styling it with CSS, when it can be done with one tag in one place. I agree that using the font-weight property in CSS is better otherwise, just not necessarily for one or two words in one place. And in that case <strong> is better than <b> semantically and accessibility-wise.

Here’s an explanation from here:

"The <b> and <i> elements simply denote how the text should look: text within these tags should appear as bold or italicized, respectively.

<strong> and <em>, however, denote how text should be understood and, though they result in the same visual appearance, they affect how the screen reader interprets them: text within these tags are read out with a different voice to indicate the emphasis for each. These tags are known as semantic tags.

So although <strong> and <em> result in visually similar text as <b> and <i>, they provide a way for screen readers to communicate the parts of text that are already highlighted visually to the user."