So whats the difference between bold and strong text?
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.
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
<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)
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:
<i> elements simply denote how the text should look: text within these tags should appear as bold or italicized, respectively.
<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.
<em> result in visually similar text as
<i>, they provide a way for screen readers to communicate the parts of text that are already highlighted visually to the user."