Proper Use Of The Strong Element In HTML (Plus Code Example)
- 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 <strong> just to make a word <b>bold</b>. Instead, use the <b> tag or a <span> element and CSS to <span class="bold">make the font bold</span>.</p> <p><strong>Use <strong> 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:
.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:
