Do you think IIT Guwahati certified course can help you in your career?
Introduction
HTML strong Tag is used to emphasize text, giving it more importance and making it appear bold. This tag is crucial when you want to highlight certain words or phrases to ensure they stand out to the reader.
In this article, you'll learn what the <strong> tag does, how to use it with examples, and which browsers support it.
Syntax of <strong tag> in HTML
<strong>Important text</strong>
The text wrapped inside the <strong> tag will be displayed with bold emphasis, helping the reader identify important or emphasized content. The syntax doesn’t require any additional attributes but can be styled further using CSS if needed.
How to use <strong> tag in HTML?
The <strong> tag is an HTML element used to indicate that the enclosed text has strong importance, seriousness, or urgency. Browsers typically render this text in bold by default, though this can be modified using CSS. Here's how to use it:
<p>This is <strong>very important</strong> text.</p>
While both <strong> and <b> tags display text in bold, they serve different semantic purposes. <strong> adds semantic meaning indicating importance, while <b> is purely presentational. For accessibility and SEO purposes, <strong> is preferred when you want to emphasize content significance. You can nest <strong> tags inside other elements, and they can contain other inline elements. The tag requires both opening and closing tags to function properly.
Example: Basic Usage of HTML <strong> Tag
Here’s an example where we emphasize a portion of a paragraph using the <strong> tag:
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<title>Strong Tag Example</title>
</head>
<body>
<p>This is a normal sentence, but <strong>this part is emphasized</strong> to show importance.</p>
</body>
</html>
Output:
Examples of HTML <strong> Tag
Let’s explore more examples to solidify your understanding.
Example 1: Emphasizing Multiple Sections
You can use multiple <strong> tags in a single HTML file to emphasize different parts of the text:
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<title>Multiple Strong Tags Example</title>
</head>
<body>
<p>Learning HTML is <strong>important</strong> if you want to build websites.</p>
<p>The <strong>strong</strong> tag is useful for emphasizing <strong>key points</strong> in your content.</p>
</body>
</html>
Output:
Example 2: Combining <strong> with CSS
You can also apply additional CSS styling to the text inside the <strong> tag to change the appearance:
HTML
HTML
<!DOCTYPE html>
<html>
<head>
<style>
strong {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>HTML provides structure to webpages, and the <strong>strong</strong> tag adds emphasis.</p>
</body>
</html>
Output:
Explanation:
CSS Styling: By using CSS, you can change how the emphasized text looks (color, size, etc.), while the <strong> tag itself still ensures the text is given strong importance.
<b> Vs <strong> Tag in HTML
the key differences between <b> and <strong> tags in HTML:
1. Semantic Meaning
<strong>: Indicates strong importance, seriousness, or urgency. It has semantic value.
<b>: Simply makes text bold without adding any semantic meaning.
<!-- Using <strong> for emphasis on important warning -->
<p>Warning: <strong>This medication must be taken with food</strong></p>
<!-- Using <b> for stylistic purposes -->
<p>Product Features: <b>Fast charging</b> | <b>Water resistant</b></p>
2. Accessibility
<strong>: Screen readers may use different voice tones to emphasize the content
<b>: Screen readers treat it like regular text
<!-- Good for accessibility -->
<p><strong>Deadline approaching:</strong> Submit your application by Friday.</p>
<!-- Purely visual styling -->
<p>Our store hours: <b>9 AM - 6 PM</b></p>
3. SEO Impact
<strong>: Search engines may give more weight to content within strong tags
<b>: No SEO significance
<!-- Good for SEO - highlighting key product features -->
<p>Introducing our <strong>revolutionary AI-powered</strong> camera</p>
<!-- Just visual styling for brand name -->
<p>Visit your local <b>PhotoMax</b> store today</p>
Supported Browsers
The <strong> tag is universally supported by all major web browsers, making it a reliable tag to use for emphasizing text. This ensures your content will appear as expected no matter which browser your users are using.
Here’s a quick look at the browser support:
Browser
Version Support
Google Chrome
Supported since version 1.0
Mozilla Firefox
Supported since version 1.0
Microsoft Edge
Supported since version 12
Safari
Supported since version 1.0
Opera
Supported since version 7.0
Why Use the <strong> Tag?
While you might think using the <strong> tag is the same as simply styling text with CSS (like font-weight: bold;) but there's a difference. The <strong> tag also provides semantic meaning to the text, which indicates to the browser and readers that this text is important. This improves accessibility for visually impaired users as well.
Frequently Asked Questions
What is the difference between <strong> and <em>?
The <strong> tag indicates strong importance and typically appears bold, while <em> represents emphasized text that is usually italicized. <strong> conveys urgency or seriousness, whereas <em> indicates stress emphasis in natural speech.
Is the <strong> tag compatible with older HTML versions?
Yes, the <strong> tag is fully compatible with all HTML versions including HTML4 and HTML5. It has been a standard element since HTML2, making it widely supported across all major browsers and versions.
Should I use the <strong> tag for every bold text?
No, only use <strong> when text has semantic importance or urgency. For purely visual bolding, use CSS with font-weight property or the <b> tag if styling isn't possible.
Can I style the <strong> tag using CSS?
Yes, you can use CSS to change the appearance of the text inside the <strong> tag, such as changing its color, font size, or other styling properties.
Conclusion
To conclude this article, the HTML <strong> tag is a straightforward but effective tool for emphasizing important text by making it appear bold. It adds semantic value, improving both accessibility and content organization. The article also covered examples, browser compatibility, and the distinction between the <strong> and <b> tags.
518+ registered 
