Proper Use Of The Strong Element In HTML (Plus Code Example)

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
What does Proper Use Of The Strong Element In HTML (Plus Code Example) do?
The <strong> element is used to identify text that is of greater importance than the surrounding text. By default, all browsers render <strong> text in a bold typeface.
Display
inline
Usage
semantic

Code Example

<p>Chapter 1: <strong>Proper Use of the Strong Element</strong></p>

<p>This oft-misused element implies added importance, seriousness, or urgency. <strong>Use it carefully</strong>.</p>

Chapter 1: Proper Use of the Strong Element

This oft-misused element implies added importance, seriousness, or urgency. Use it carefully.

Pay Attention!

That’s what the <strong> element is all about. Use it and you are saying, in effect:

“Look here! These words are more important than the surrounding words. So pay attention!”

By default, browsers will render text between <strong> tags in a bold typeface. However, you can always adjust the browser defaults with a little CSS. It’s important to use the <strong> element for it’s semantic meaning–added importance, urgency, or seriousness–and not for it’s stylistic presentation. If your goal is just to make a word appear in bold typeface without added importance, urgency, or seriousness, it’s better to use the <b> element, or even better, just use CSS. Here’s what I mean:

<p><strong>Notice:</strong> Don't use &lt;strong&gt; just to make a word <b>bold</b>. Instead,  use the &lt;b&gt; tag or a &lt;span&gt; element and CSS to <span class="bold">make the font  bold</span>.</p>  <p><strong>Use &lt;strong&gt; to imply importance, urgency, or seriousness.</strong></p>  <style> .bold {   font-weight: bold; } </style> 

Let’s see how that looks when rendered in the browser:

Notice: Don’t use <strong> just to make a word bold. Instead, use the <b> tag or a <span> element and CSS to make the font bold. Use <strong> to imply importance, urgency, or seriousness.

.bold{font-weight: bold;}

This Word is So Serious

One little-known fact is that HTML actually allows you to imply levels of importance by stacking up multiple <strong> elements. While browsers won’t generally render these elements any differently, browsers and anyone using assistive technologies will pick up the cue. Here’s how you could use this option if you’re so inclined:

<p><strong>Danger: Swimming in this area is restricted. <strong>Do not enter the water.</strong></strong></p> 

Let’s see what your browser does with the nested <strong> tags:

Danger: Swimming in this area is restricted. Do not enter the water.
Adam is a technical writer who specializes in developer documentation and tutorials.